Setting value for MultiSelect in a template with ToClientTemplate method

8 posts, 0 answers
  1. Toby
    Toby avatar
    20 posts
    Member since:
    Nov 2010

    Posted 31 May Link to this post

    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?

     

     

     

     

     

     

     

     

     

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 01 Jun Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Toby
    Toby avatar
    20 posts
    Member since:
    Nov 2010

    Posted 02 Jun in reply to Ivan Danchev Link to this post

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

    Could I do

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

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 06 Jun Link to this post

    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
  6. Toby
    Toby avatar
    20 posts
    Member since:
    Nov 2010

    Posted 06 Jun in reply to Ivan Danchev Link to this post

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

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 07 Jun Link to this post

    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
  8. Toby
    Toby avatar
    20 posts
    Member since:
    Nov 2010

    Posted 09 Jun in reply to Ivan Danchev Link to this post

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

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 13 Jun Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready