How to create and set checkbox in DataTables

Question

I have a table that is loaded with an AJAX call and rendered with the DataTables extension for jQuery. This is my code:

 $("#tblSelectedUserRoles").dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("GetAllRolesForUser")?' + "userId=" + $("#txtSelectedUserId").val(),
        bJQueryUI: true,
        sProcessing: "<img src='~/Images/spinner.gif' />",
        dom: 'T<"clear">rtip',
        bAutoWidth: false,
        "aoColumns": [
            { "sWidth": "1%", sClass: "smallFonts" },
            { "sWidth": "20%", sClass: "smallFonts" },
            { "sWidth": "20%", sClass: "smallFonts" },
            {
                "sWidth": "20%", sClass: "smallFonts", "sName": "UserRoleId", "mRender": function (data, type, row) {
                    return "<input type='checkbox' onchange=defaultrole('" + row[0] + "'); >";
                }},
            { "sWidth": "20%", sClass: "smallFonts" },
            {
                "sName": "UserRoleId", "sWidth": "20%", sClass: "smallFonts", "mRender": function (data, type, row) {
                    return "<button class='gridButton' onclick=deleterole('" + row[0] + "');>Delete Role</button>";
                }}
        ]
    });

I'm trying to put a checkbox in the table. The checkbox show up and when I click on any of them I invoke the function with the proper user_role_id without a problem. My problem is the data is coming from this in the controller:

 [HttpGet]
    public ActionResult GetAllRolesForUser(string userId)
    {
        List<UserRoleModel> userroles = DataRepository.GetSelectedUserRoles(userId);
        return Json(new
        {
            aaData = userroles.Select(x => new String[] {
                x.UserRoleId,
                x.Role,
                x.RoleDesc,
                x.Default.ToString(),
                x.UarApproved.ToString()})
        }, JsonRequestBehavior.AllowGet);
    }

the default and approved valued are Boolean and I have to convert them to a string to pass then in the aaData. In any case, none of the checkboxes are set when at least one should be. How do you do this?

davidkonrad · Accepted Answer · 2015-09-22 12:13:16Z

1

You need to actually set the checked status. If the value that should define the checked status is UarApproved and that value is a stringified boolean, always 'true' or 'false', then do this :

{
    sWidth: "20%",
    sClass: "smallFonts",
    sName: "UserRoleId",
    mRender: function(data, type, row) {
      return '<input type="checkbox" checked="'+row[4]+'" onchange=defaultrole('+row[0]+');/>';
    }
},

edited Sep 22, 2015 at 12:13

answered Sep 22, 2015 at 11:33

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create and set checkbox in DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related