DropdownList with checkboxes load checked value at startup

[RobWarningParticipant]

Hi,
I am using a jqxDropdownListBox with the checkbox option to true to set some filter options.
Using the jqx dataadapter to fill the list. Like this:

$(document).ready(function () {
    //prepair the Data template
    var source =
        {
            datatype: "json",
            datafields: [
                { name: 'TypeId' },
                { name: 'TypeName' },
                { name: 'Selected'}
            ],
            id: 'id',
            url: '../Home/GetTypeList',
            async: false
        };
    var dataAdapter = new $.jqx.dataAdapter(source);
    //Create the jqx DropDownList the div in my partial view has the id JQXUserTypeDropDown
    $("#JQXUserTypeDropDown").jqxDropDownList({
        checkboxes: true,
        source: dataAdapter,
        displayMember: "TypeName",
        valueMember: "TypeId",
        placeHolder: "Select!",
        width: 100,
        height: 25
    });
})

And this is my controller logic:

 using (HandOverContext context = new HandOverContext())
            {
                // Get the current User ID.
                var claimsIdentity = User.Identity as ClaimsIdentity;
                var userIdClaim = claimsIdentity.Claims.FirstOrDefault(x => x.Type == ClaimTypes.NameIdentifier);
                var UserIdValue = userIdClaim.Value;

                List<UserTypeSelectModel> datamodel = new List<UserTypeSelectModel>(); //datamodel has 3 properties typeId, TypeName and Selected.

                var types = (from t in context.ACTypes
                             select t).ToList();

                var userType = from u in context.UserTypes
                               where u.UserId == UserIdValue
                               select u;

                var i = userType.Count();
                foreach(var item in types)
                {
                    UserTypeSelectModel m = new UserTypeSelectModel();
                    m.TypeId = item.TypeId;
                    m.TypeName = item.TypeName;
                    m.Selected = userType.Any(type => type.ACTypeId == item.TypeId);
                    datamodel.Add(m);
                }

                return Json(datamodel, JsonRequestBehavior.AllowGet);
            }

Since my experience with client development is rather limited I am wondering what would be the best way to incorporate the initial state of the checkboxes in my jqxDropDownList?
Should I take the record area from the DataAdapter and loop trough all the records to see if the item is checked or not or is there a better way doing this?

Regards Rob

[Peter StoevKeymaster]

Hi Rob,

It cannot happen through the data binding to set the checked state. However, the DropDownlist has an event called bindingComplete. Bind to that event which occurs when the data binding is completed and the DropDownList is loaded with data. Within the event handler, you can use methods such as checkItem or checkIndex to check items which you would like to check.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[RobWarningParticipant]

Thanks Peter,

May be something for a future update?

Regards
Rob

[Peter StoevKeymaster]

Hi Rob,

Yes, we will think about this in the future versions.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[dpitchfoParticipant]

Just following up on this:

Is this the correct way of checking a checkbox on loading from the database. By iterating through each of the items, or is there a better way?

I am loading the data from database, passing a field called active. I see the value that I am passing located items[i].[‘originalItem’][‘active’].
If it is 1, then checked, if 0 unchecked.

$("#jqxDropDownList").on('bindingComplete', function (event) {

                var items = $("#jqxDropDownList").jqxDropDownList('getItems');

                for(var i=0; i<items.length; i++) {
                    var active = items[i]['originalItem']['active'];
                    var index = items[i]['index'];
                    if (active == 1) {
                        $("#jqxDropDownList").jqxDropDownList('checkIndex', index);
                    } else {
                        $("#jqxDropDownList").jqxDropDownList('uncheckIndex', index);
                    }
                }

            });

[Author]

Posts