Setting value for MultiSelect in a template with ToClientTemplate method

[Toby]

I have the following in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"></script>

@(Html.Kendo().MultiSelect()
                .Name("otherParties")
                .DataSource(ds =>
                {
                    ds.Read("GetOtherParties", "Term", new { SPHostUrl = ViewBag.SPHostUrl });
                })
                .DataValueField("TermId")
                .DataTextField("Label")
                .AutoBind(false)
                .HtmlAttributes(new { style = "width:100%" })
                .Placeholder("Select Other Parties...")
                .ItemTemplate("<div class=\"k-state-default term-label\">\\#= data.Label \\#</div><div class=\"k-state-default term-path\">\\#= data.Path \\#</div>")
                .Value("#: OtherParties #")
                .MinLength(3)
                .Filter(FilterType.Contains)
                  .ToClientTemplate())

The OtherParties property is a List of classes as detailed in the code snippet below.

public class TermItem
    {
        public Guid TermId { get; set; }
        public string Label { get; set; }

        public string Path { get; set; }

    }

public List<TermItem> OtherParties { get; set; }

The template is then passed with a dataItem in javascript using the code below.

var documentList = $("#documentsList").data("kendoListView");
                var dataSource = documentList.dataSource;
                var document = dataSource.getByUid(documentList.select().attr("data-uid"));

                var template = kendo.template($("#documentDetailsTemplate").html());

Have checked with Fiddler and the values are coming back correctly. Have debugged the JavaScript and the document object in the snippet above has the values in it.

The documentation at http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/multiselect/overview#pre-select-values-on-initial-load says that you need to select it with a List<class> object.

It's not pre-selecting the values when the template is generated.

Any ideas on what is the correct way to do this?

 

 

 

 

 

 

 

 

 

 

 

[Ivan Danchev]

Hello Toby,

The list OtherParties cannot be evaluated properly in the context of the Value() method: .Value("#: OtherParties #").
A value can be pre-selected using the following syntax:

.Value(new[] { new { Label = "#: Label #", TermId = "#: TermId #" } })

Regards,
Ivan Danchev
Telerik

[Toby]

But how can I select multiple values? The OtherParties property is of type List<TermItem>

Could I do

.Value(new[] {#: OtherParties #})

[Ivan Danchev]

Hello Toby,

I am afraid new[] {#: OtherParties #} does not evaluate to a proper object needed by the Value method. In addition to passing a list of strings and the approach from my previous reply, ViewBag/ViewData containing the list of items can be passed to the MultiSelect's Value() method in order to pre-select them.

Regards,
Ivan Danchev
Telerik

[Toby]

The problem is that your method will only work if I have one value. It won't evaluate multiple values which is needed for a MultiSelect. When you say a "list of strings" do you mean a list of the values declared in DataValueField (i.e. TermId) and how to I parse this list. Is it an object like List<string> or just a delimited string? Can I do the following if OtherParties returns a list of TermIds delimited with commas

.Value("#: OtherParties #".Split(',').ToList())

[Ivan Danchev]

Hello Toby,

Value will accept an array which does not have to be declared in the method itself:

@{
    var list = new[] { "1", "2" };
}

//...
.Value(list)

You could try accessing the OtherParties property in the MultiSelect's dataBound event handler and pass them to the value method as shown below:

function onDataBound() {
    var multiselect = $("#otherParties").data("kendoMultiSelect");
    var value = multiselect.value();
    multiselect.value(multiselect.dataSource._pristineData[0].OtherParties);
}

Could you post your GetOtherParties controller?

Regards,
Ivan Danchev
Telerik

[Toby]

I did a little bit of a hack, but it seems to work

I added a corresponding hidden control that stores the selected items as a delimited string and then added this JavaScript on the DataBound event.

function onMultiSelectDataBound(e) {
  var ctl = e.sender;
  var list = ctl.list;
  var listName = list.attr("id");
  var hidden = $('#' + listName.replace('-list', 'Hidden'));

  ctl.value(hidden.val().split(','));
}

[Ivan Danchev]

Hello Toby,

Thank you for getting back to us and sharing your approach for passing the data to the value() method.

Regards,
Ivan Danchev
Telerik