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 1 month ago.

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

  • RobWarning
    Participant

    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 Stoev
    Keymaster

    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


    RobWarning
    Participant

    Thanks Peter,

    May be something for a future update?

    Regards
    Rob


    Peter Stoev
    Keymaster

    Hi Rob,

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

    Best Regards,
    Peter Stoev

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


    dpitchfo
    Participant

    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.