Select All items after data is read

7 posts, 0 answers
  1. Lee
    Lee avatar
    20 posts
    Member since:
    Jun 2014

    Posted 07 Apr Link to this post

    Trying to figure out how to select all items in a multiselect after reading the data.

    @(Html.Kendo().MultiSelect()
    .Name("Benchmarks")
    .DataValueField("ID")
    .DataTextField("BenchmarkName")
    .Events(e => e.DataBound("selectAllBenchmarks"))
    .DataSource(source =>
    {
    source.Read(read =>
    {
    read.Action("GetBenchmarksForPeriodOfEntry", "Reporting")
    .Data("filterPeriodOfEntry");
    });
    })
    .AutoClose(true)
    .HtmlAttributes(new { style = "width: 240px" })
    )

    my "selectAllBenchmark" function fires but then I don't know how to loop through the datasource and select each item in the datasource.

  2. Adrien
    Adrien avatar
    6 posts
    Member since:
    Jan 2016

    Posted 08 Apr Link to this post

    Hi Lee,

    I think you will find your answer here http://www.telerik.com/forums/multi-select-select-all

    with something like

    var all = $.map(multiselect.dataSource.data(), function(dataItem) {
      return dataItem.value;
    });
     
    multiselect.value(all);

     

    Bye !

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Lee
    Lee avatar
    20 posts
    Member since:
    Jun 2014

    Posted 08 Apr in reply to Adrien Link to this post

    Yeah I saw this article and tried to implement.  Either my javascript/jquery is weak or  there is something I'm missing about this dataSource structure.  So my routine looks like this:

    function selectAllBenchmarks()
    {
    var multiselect = $("#Benchmarks").data("kendoMultiSelect");
    //multiselect.wrapper.find(".k-multiselect-wrap").removeClass("floatWrap").addClass("k-floatwrap");
    var all = $.map(multiselect.dataSource.data(), function (dataItem) {
    return dataItem.value;
    });
    multiselect.value(all);
    }

    I'm calling it on the dataBound event and I've stepped through it.  It hits the map line and then skips down to the multiselect.value(all) as if the multiselect.dataSource.data() is empty but there are 6 items in my multiselect afterward.  Am I calling it on the wrong event or am I setting my multiselect incorrectly?

     

    Thanks for help

    Lee

  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 11 Apr Link to this post

    Hello Lee,

    You are on the right direction in order to achieve the desired funcitonality. However, as I can see you have set ID as DataValueField for your MultiSelect, which is why, you need to access this field from the dataItem. Please consider the following implementation:

    function selectAllBenchmarks()
    {
    var multiselect = $("#Benchmarks").data("kendoMultiSelect");
    //multiselect.wrapper.find(".k-multiselect-wrap").removeClass("floatWrap").addClass("k-floatwrap");
    var all = $.map(multiselect.dataSource.data(), function (dataItem) {
    return dataItem.ID;
    });
    multiselect.value(all);
    }



    Regards,
    Nencho
    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. Lee
    Lee avatar
    20 posts
    Member since:
    Jun 2014

    Posted 11 Apr Link to this post

    That got it!  Thank you so much.
  7. mth developer
    mth developer avatar
    2 posts
    Member since:
    Apr 2010

    Posted 27 Apr Link to this post

    Hello guys,

    i ran into the same problem, so i'll post it into this thread. I've created a Kendo Multiselect like this:

                    @(Html.Kendo().MultiSelect()
                        .Name("multiselect")
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("LoadFilialen", "PEP").Data("returnfirmavalue");
                            })
                            .ServerFiltering(true);
                        })
                        .DataTextField("filiale")
                        .DataValueField("id")
                        .AutoBind(true)
                        .AutoClose(false)                        
                    )

    And now my goal would be to select all items of the multiselect by clicking on a simple button:

            $('#selectAllButton').click(function () {
               
                var multiselect = $('#multiselect').data("kendoMultiSelect");

                var all = $.map(multiselect.dataSource.data(), function (dataItem) {
                    return dataItem.ID;
                });
                multiselect.value(all);

            });

    It seems like the event fires, but the result isn't correct. The debugger shows me, that the variable "all" is empty, or has a Length of 0. What's happening next is that the multiselect loses all of the already selected items, because it gets the empty variable assigned.

     

    Any help is really appreciated!

    Best Regards,

    Daniel

  8. Lee
    Lee avatar
    20 posts
    Member since:
    Jun 2014

    Posted 27 Apr in reply to mth developer Link to this post

    It looks as though your DataValueField("id") that you would need to change the "return dataItem.ID;" to return dataItem.id;
  9. mth developer
    mth developer avatar
    2 posts
    Member since:
    Apr 2010

    Posted 27 Apr in reply to Lee Link to this post

    Wow! I'm really speechless right now. After hours and hours of searching your suggestion was the solution.

    Thank you so much Lee!

    Regards, Daniel

Back to Top
UI for ASP.NET MVC is VS 2017 Ready