jQuery UI Widgets Forums ASP .NET MVC DropdownList with checkboxes load checked value at startup

This topic contains 4 replies, has 3 voices, and was last updated by  dpitchfo 2 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • RobWarning

    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
            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);
                    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 Stoev

    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


    Thanks Peter,

    May be something for a future update?


    Peter Stoev

    Hi Rob,

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

    Best Regards,
    Peter Stoev

    jQWidgets Team


    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);
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.