Too many options in multiselect

[Rinck]

In one of my forms, I have 6 MultiSelect widgets of which all will eventually contain up to 5000 different options (30.000 in total per page), all loaded from a remote datasource.

I noticed that when the MultiSelect is first loaded, it loads all possible options, whether or not you have set a pagesize and set server filtering to true.

With only a few options, this is fine, but with as many as I have, you start to notice a performance issue in the browser (especially on older PC's). I've tried making changes to the server side, limiting the number of results, but then when I try to add options through javascript code, which are not in the current resultset, they will not be added.

For example:

• a total of 20 results exist on the server
• at any given time, only 10 results are provided to the client, filtered based on the users' input
• on initialization, only the first 10 results are loaded
• assume you have entered a letter 'x' into the multiselect, this returns 6 results which you can select
• now you add a value through the multiselect.value() method, which has an id that is not in the list which contains an x; this will not work as the id does not exist in the current result set, even though it does exist on the server

I've attempted sending the selected values using the parameterMap() method and including those in the returned result set, which works to some extent. But then when I use the multiselect.value() method to add another selection, the change event is not triggered and thus I cannot retrieve the new result set from the server.

Is there another way to achieve what I am trying to do? Or is it possible to manually trigger the updating of the resultset? I've tried using .trigger('change') but that doesn't reload the resultset.

Hoping someone can help!

[Georgi Krustev]

Hello Rinck,

In the last internal build (2013.1.411), we allowed to define minLength option of the MultiSelect to prevent initial request of all data. Thus the user can filter data and see only matched items. Also the widget allows to define a list of data items, which will be used if the autoBind is set to false. Thus you can avoid initial binding and still show the selected tags.

If you need to set values which are not present in the current set, then I will suggest you first add the item and then select the value.

Kind regards,
Georgi Krustev
the Telerik team

[Rinck]

Hi Georgi,

thanks for the tip, however, I still cannot get it to work! I've tried every configuration option I could find in the documentation, but I'm just getting frustrated.

Let's assume the datasource has the following list of items (tag_id - tag):

• 1 - tag_1
• 2 - tag_2
  
• 3 - tag_3
  
• 4 - tag_4
  
• 5 - tag_5
  
• 6 - tag_6
  
• 7 - tag_7
  
• 8 - tag_8
  
• 9 - tag_9
  
• 10 - tag_10
  
• 11 - tag_11
  
• 12 - tag_12
  
• 13 - tag_13
  
• 14 - tag_14
  
• 15 - tag_15
  
• 16 - tag_16
  
• 17 - tag_17
  
• 18 - tag_18
  
• 19 - tag_19
  
• 20 - tag_20
  

Problem 1: Now when I attempt to load initial values, it doesn't happen (see code snippet below); the multiselect remains empty upon initial page load

Problem 2: if I add a selection (for example 19, by typing 19 and then selecting it with the mouse) and then click the 'test' link, my items 1 and 4 are not added to the multiselect.  The console prints two arrays: [1,4,19] and then [19]. For some reason, tags 1 and 4 are not added, even though they are in the array passed to .value().

Problem 3: when I load the page, and then immediately click the 'test' link, values 1 and 4 are added to the multiselect. However, when I then again add tag 19 by typing 19 and clicking it to add 19 to the multiselect, and then I again click the test link, items 1 and 4 are once again removed.

As I said, I have tried every option I could think of (serverFiltering, serverPaging, autoBind, pageSize, etc etc) in almost all possible combinations, but these problems simply keep reappearing, or, with autoBind set to false, the list remains empty at all times.

What am I missing? I really hope you can help me out here!

<input name="tags" id="tags" />
<br />
<a id="test">test</a>

<script>
$(document).ready(function(){

    // tags datasource
    var tags_dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/tag",
                type: "POST"
            },
            create: {
                url: "/tag/add",
                type: "POST",
                dataType: "json"
            },
            parameterMap: function (data, type) {
                return kendo.stringify(data);
            }
        },
        schema: {
            data: "data",
            total: "total",
            errors: "errors",
            model: {
                fields: {
                    "tag_id": {
                        type: "number"
                    },
                    "tag": {
                        type: "string"
                    }
                }
            }
        },
        serverFiltering: true,
        serverPaging: true,
        pageSize: 10
    });

    // tag widget options
    var tag_options = {
        dataTextField: "tag",
        dataValueField: "tag_id",
        filter: "contains",
        placeholder: "enter one or more search terms",
        dataSource: tags_dataSource
    };

    // create tag widget
    $("#tags").kendoMultiSelect(tag_options);

    // add new option
    tags_dataSource.add({ tag: "new tag" });
    tags_dataSource.sync();

    // set value for tags
    var tags = ${'#tags').data('kendoMultiSelect');
    tags.value([3, 18]);
    tags.refresh();

    // function to get only unique values
    function unique(list) {
        var result = [];
        $.each(list, function(i, e) {
            if ($.inArray(e, result) == -1)
                result.push(e);
        });
        return result;
    };

    $('#test').on('click', function(e){
        e.preventDefault();
        var newArray = [1,4];
        var result;
        newArray = $.merge(newArray, tags.value());
        result = unique(newArray);
        tag.value(result);
        console.log(result);
        console.log(tags.value());
        tags.enable(false);
        tags.enable(true);
        tags.refresh();
    });

});
</script>

[Georgi Krustev]

Hello Rinck,

 
Straight up to your questions:

#1:
I examined your code snippet and there should no problem with initial loading of the items. Check this jsBin demo, which loads the item correctly and selects the correct tags.

#2:
You will need to clear applied filter (by the end user) if you need to set a value through the API. Check the same jsBin demo. We do not clear filter in the value method, because we cannot be sure that this is the requried behavior by all users.

#3:
Same as point 2.

Regards,

Georgi Krustev
the Telerik team

[Rinck]

Hey Georgi,

clearing the filter did the trick! :) Could have saved me a day if frustrating if I'd found that sooner! :)

[Aditya]

Hi Georgi,

I have same kind of issue described in (Problem 1),with the pageSize in the datasource.
Can you please suggest how can i select the items which are not in the current page using api.

To reproduce the issue please add/uncomment the (pageSize: 10) in the jsBin demo ..now you will realize that only one item is selected(tag_18 is not getting selected)  on initial page load.

Thanks, 

[Georgi Krustev]

Hello Aditya,

 
Currently, the MultiSelect widget does not support selecting items, which cannot be found in the DataSource. In this case, the widget does not know which page needs to get in order to find the correct item. I will suggest you either page the dataSource before selecting the new item or just load all data on the client.

Regards,
Georgi Krustev
Telerik

[Aditya]

Thanks Georgi for clearing the doubt. 

can you please let me know if we have any method to find out the page no, for any dataItem. Like : if we pass tag18 and  it will return me pageno=2, so that i can page the dataSource.

[Georgi Krustev]

Hello again Aditya,

If I am understanding your question correctly, you need to find out the page number for a specific item. Currently there is no such built-in method and you will need to implement it manually. Once you find the number of the page, you can get the data using DataSource page method.

Regards,
Georgi Krustev
Telerik