Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
405
Fetch data for the combobox dropdown with multiselection based on a model property.
posted

Hello,
we recently ran into a problem with igCombo, and we are not sure how to deal with it.
We want to use a multiselectable combobox dropdown with ticks defined like this:

@(Html.Infragistics()
.ComboFor(model => model.Committees)
.ID("SubTopicCommitteeCombo")
.Width("150")
.LoadOnDemandSettings(lods => lods.Enabled(true).PageSize(25))
.DataSourceUrl(Url.Action("GetComboCommittees"))
.ValueKey("CommitteeID")
.TextKey("FullTitle")
.CompactData(true)
.EnableClearButton(false)
.MultiSelectionSettings(msw => msw.Enabled(true))
.MultiSelectionSettings(msw => msw.ShowCheckBoxes(true))
.DataBind()
.Render()
)

It all works fine, until we reload the page, submit or fetch any ticked data.

Now the problem is basically:
So far, everytime we reload the page and fetch data, no matter what we previously selected, the combobox dropdown has no items ticked.
Therefore: How does the model property assigned to the combobox dropdown have to look like in C#, so the data is submitted and fetched correctly?

Thanks in advance. 

Parents
  • 2680
    Offline posted

    Hello,

    Thank you for contacting us.

    1. How to fetch preselected records correctly? - In order to fetch records which are preselected, you should use SelectedValues property. As written in the documentation "that option is supported only for currently available list of items. When load-on-demand or filtering is enabled, then attempt to select not loaded item will fail." Therefore you should load all the items.

    2. How to submit selected/unselected records? - You can attach on "selectedChanged" client-side event and perform AJAX query to apply your change to the server.

    Please review the following sample for the 2 changes:

    <div>
        @(Html.Infragistics()
            .ComboFor(model => model.Committees)
            .ID("SubTopicCommitteeCombo")
            .Width("150")
            .ValueKey("CommitteeID")
            .SelectedValues(Model.SelectedCommiteesIds)
            .TextKey("FullTitle")
            .CompactData(true)
            .EnableClearButton(false)
            .MultiSelectionSettings(msw => msw.Enabled(true).ShowCheckBoxes(true))
            .AddClientEvent("selectionChanged", "selectionChanged")
            .DataBind()
            .Render()
        )
    </div>
    <script>
        function selectionChanged(evt, ui) {
            if (ui.oldItems == null) {
                //first item selected
                var selectedItem = ui.items[0];
                //perform AJAX query to mark record as selected (id - selectedItem.data.CommitteeID)
            } else if (ui.items.length > ui.oldItems.length) {
                var selectedItem = $(ui.items).not(ui.oldItems).get()[0];
                //perform AJAX query to mark record as selected (id - selectedItem.data.CommitteeID)
            } else {
                var unselectedItem = $(ui.oldItems).not(ui.items).get()[0];
                //perform AJAX query to mark record as unselected (id - selectedItem.data.CommitteeID)
            }
        }
    </script>

    Let me know if this helps you.

Reply Children