This is a migrated thread and some comments may be shown as answers.

Setting value for MultiSelect in a template with ToClientTemplate method

7 Answers 582 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Toby
Top achievements
Rank 1
Toby asked on 31 May 2016, 02:10 PM

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?

 

 

 

 

 

 

 

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 01 Jun 2016, 02:55 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Toby
Top achievements
Rank 1
answered on 02 Jun 2016, 08:40 AM

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

Could I do

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

0
Ivan Danchev
Telerik team
answered on 06 Jun 2016, 08:48 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Toby
Top achievements
Rank 1
answered on 06 Jun 2016, 10:49 AM

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())

0
Ivan Danchev
Telerik team
answered on 07 Jun 2016, 03:14 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Toby
Top achievements
Rank 1
answered on 09 Jun 2016, 11:26 AM

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(','));
}

0
Ivan Danchev
Telerik team
answered on 13 Jun 2016, 06:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
MultiSelect
Asked by
Toby
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Toby
Top achievements
Rank 1
Share this question
or