如何为Kendo MultiSelect下拉框长文本添加缩进以区分单条记录

你可以通过Kendo MultiSelect自带的自定义模板功能实现子项缩进，具体实现方式如下：

推荐实现（需后端配合加标识字段） #

这种方式扩展性最强，后续新增其他子项也无需修改前端代码：

1. 后端返回的数据源中新增布尔类型字段IsSubItem，主条目赋值为false，子条目（比如示例中的skills条目）赋值为true
2. 给MultiSelect添加ItemTemplate配置自定义下拉项渲染，同时可以配合CSS控制缩进样式，完整代码如下：

@(Html.Kendo().MultiSelect()
  .Name("OrderSelection")
  .DataTextField("OrderData")
  .DataValueField("OrderId")
  .AutoClose(false)
  .Placeholder("Select Orders...")
  .Height((wndHeight - 260))
  // 自定义下拉项模板
  .ItemTemplate(@"
    # if (data.IsSubItem) { #
        <span class='multi-select-sub-item'>#: OrderData #</span>
    # } else { #
        #: OrderData #
    # } #
  ")
  // 若需要选中后显示在输入框的标签也保留缩进，添加以下配置
  .TagTemplate(@"
    # if (data.IsSubItem) { #
        &nbsp;&nbsp;&nbsp;&nbsp;#: OrderData #
    # } else { #
        #: OrderData #
    # } #
  ")
  .Events(e =>
            {
              e.Select("onOrderSelect").Deselect("onOrderDeselect");
              e.Open("validateDates");
            })
  .DataSource(source =>
                {
                  source.Read(read =>
                                {
                                  read.Action("ReadOrderItemsByDate", "CustomNotes").Data("orderSelectionReuestData");
                                })
                  .ServerFiltering(false);
                })
)

3. 添加对应的CSS样式控制缩进大小：

<style>
.multi-select-sub-item {
    /* 可自行调整数值修改缩进宽度 */
    padding-left: 20px;
}
</style>

无需修改后端的临时方案 #

如果暂时没办法调整后端接口，可以直接在模板中根据文本内容判断是否是子项，示例如下：

.ItemTemplate(@"
  # if (data.OrderData.trim().startsWith('skills')) { #
      <span class='multi-select-sub-item'>#: OrderData #</span>
  # } else { #
      #: OrderData #
  # } #
")

内容的提问来源于stack exchange，提问作者Radha