Search code examples
templatestelerikkendo-multiselect

Kendo Multiselect data.length undefined in template


This is very simple, I have a Multiselect and when one item is selected, I want the tag to represent the DataTextField. When multiple items are selected, I want one tag to represent the quantity of items selected. Here is my code:

@(Html.Kendo().MultiSelect()
      .Placeholder("Select Employees...")
      .Name("empSelect")
      .DataTextField("Employee")
      .DataValueField("PERSONNEL_KEY")
      .HtmlAttributes(new { style = "width:100%;font-size:10px;", id = "empSelect" })
      .AutoBind(false)
      .AutoClose(false)
      .Filter(FilterType.Contains)
      .TagTemplateId("tagTemplate")
      .DataSource(source => {
            source.Read(read =>
            {
                 read.Action("GetEmployees", "EmployeeTS");
            })
      .ServerFiltering(true);}))

and here is the tagTemplate script:

<script id="tagTemplate" type="text/x-kendo-template">
# if (data.length < 2) { #
    <span>
        #= data.Employee #
    </span>
# } else { #
    <span>
        #= data.length # selected
    </span>
# } #

All items come back from my Controller just fine. When I select an item(s), the tag displays "UNDEFINED selected". Apparently "data.length" is undefined, yet I know of no other way to grab the count of items selected.

I am currently on the 2016.3.1118 build of Telerik Kendo MVC.


Solution

  • "data" doesn't have property of length. Because of that, always works "else" and shows undefined.

    <script>
    function onChange(e) {
        var multi = $("#empSelect").data("kendoMultiSelect");
    
         var multi = $("#empSelect").data("kendoMultiSelect");
    
        if (multi.listView._dataItems.length > 1) {
    
            multi.setOptions({
                tagMode: 'single'
            });
        } else {
            multi.setOptions({
                tagMode: 'multiple'
            });
        }
    
        multi.refresh();
    }
    

    @(Html.Kendo().MultiSelect()
      .Placeholder("Select Employees...")
      .Name("empSelect")
      .DataTextField("TANIM")
      .DataValueField("URETIM_YERI")
      .AutoBind(false)
      .AutoClose(false)
      .Filter(FilterType.Contains)
      .TagMode(TagMode.Multiple)
      .Events(e =>
            {
                e.Change("onChange");
            })
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetFactories", "Factory");
          })
    .ServerFiltering(true);
      }))