CODEWITHSUNDEEP
jqueryasp.net-mvcinternet-explorer-8asp.net-mvc-5multi-select
Deise Vicentin
Deise Vicentin

Reputation: 137

Jquery MultiSelect List for more than 5 thousand records

I'm using the jquery multiselect, but now I'm facing some problems. There are moments that I need to display more than 5 thousand records and for IE8 it is not working out. This is what the component looks like?

enter image description here

Here is how I configure the multiselect:

@Html.ListBoxFor(m => m.MateriaisSelecionados, new MultiSelectList(ViewBag.Materiais, "Id", "Codigo"))

if ($('#MateriaisSelecionados').length) {
    //* custom headers
    $('#MateriaisSelecionados').multiSelect({
        selectableHeader: "<div class='custom-header'>Materiais</div>",
        selectionHeader: "<div class='custom-header'>Materiais Ativos</div>"
    });
}

When I open de screen on IE8 I'm getting this message:

localhost is not responding due to a long-running script

And it takes more than 5 minutes to load all the records. I thought I could use a search box for the list and show the items just after the user types something in the search box but I couldn't find a way to do so, or another component that could work well.

If I just show the first 500 records I works fine, but I do need to show all of them for the user (because he will select what will be active on the application for another CRUDS).

Any idea guys?

UPDATE

Well, I found a solution and now it is working. I chose to create it manually, so I created 2 ListBoxes on the View and as the user selects the items in the "all items" list I use jquery to transfer those items to the other ListBox. I also added a search box and always show maximum 300 item in the "all items" list. This is my code now:

//All items
@Html.ListBoxFor(m => m.Materiais, new MultiSelectList(ViewBag.Materiais, "Id", "TextoBreve"), new { @class = "form-control select-list", @multiple = "multiple" })

//Selected items
@Html.ListBoxFor(m => m.MateriaisSelecionados, new MultiSelectList(ViewBag.MateriaisAtivos, "Id", "TextoBreve"), new { @class = "form-control select-list", @multiple = "multiple" })

$("#Materiais").change(function (e) {
    $("#Materiais option:selected").each(function () {
        $(this).appendTo("#MateriaisSelecionados");
    });

    var selectList = $('#MateriaisSelecionados option');
    selectList.sort(NASort);
    $('#MateriaisSelecionados').html(selectList);

    return false;
});

$("#MateriaisSelecionados").change(function (e) {
    $("#MateriaisSelecionados option:selected").each(function () {
        $(this).appendTo("#Materiais");
    });

    var selectList = $('#Materiais option');
    selectList.sort(NASort);
    $('#Materiais').html(selectList);

    //Filters the items for the first list
    FiltrarMateriais();

    return false;
});

function NASort(a, b) {
if (a.innerHTML == 'NA') {
    return 1;
}
else if (b.innerHTML == 'NA') {
    return -1;
}
return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

Thank you guys for your ideas!

Upvotes: 1

Views: 2170

Answers (3)

Mihai Dinculescu
Mihai Dinculescu

Reputation: 20033

Just don't, please!

Neither browsers and jQuery aren't made to work with 5.000 controls.

I strongly suggest to rework your design so you do not have to display a huge number of controls.

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239430

5,000 records is way too much for a select control. Not only is it going to be slow to retrieve and build into a drop down list, but it's going to be nigh impossible for any user to navigate such a control. There's two options you can consider:

  1. Use a filter of some sort. If there's some way of categorizing these records or otherwise breaking them into smaller groups, provide a select list with those groupings, first, and then use AJAX to retrieve only the records in that group for your actual select list.

  2. Use a combobox/autocomplete control. The idea is that your select list will have an editable text field where a user can start typing an option, and the select list will be filtered to only matching entries. To make it efficient, you should wait for user input before selecting any records (generally 3+ characters to cut down on excessive AJAX requests), and then issue an AJAX request to bring in only those items with names that match what the user has entered so far. There's many JavaScript plugins you can choose from to add this functionality, so you don't have to worry about building it from scratch.

Upvotes: 1

Marcos Lima
Marcos Lima

Reputation: 771

Load 5,000 records in a browser view will be costly no matter what, I don't think this is a good approach... Have you considered pagination, maybe cut it down to 10 pages of 500 records each?

Upvotes: 0

Related Questions