CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3datatables
user1434177
user1434177

Reputation: 1977

jquery datatables.net check boxes not setting checked property

So I'm using the JQuery datatables.net(www.datatables.net) and having alot of success. But recently I tried to add some checkbox columns but am not having much success. Visually everything is working but when I actually check/uncheck it does not change the underlying value underneath, either when I inspect the element with chrome or catch it in javascript. Do I need to update the table or something to refresh the DOM object?

Javascript creating datatable:

$('#userGroupSettings').dataTable({
"bJQueryUI": true,
"aoColumns": [
/* ID */
    {
    "bVisible": false
},
/* Group Name */null,
/* Display Group */null,
/* Group Minimised*/null,
/* Send Fault Email*/null],
"aaSorting": [[1, "asc"]]

});

asp mvc razor code for creating the table:

<table id="userGroupSettings">
    <thead>
        <th>Group ID</th>
        <th>Group Name</th>
        <th>Display Group</th>
        <th title="When loading the webpage this will determine if the group is minimised or not">Group Minimised</th>
        <th title="Send me a fault email when an issue occurs in this group">Send Fault Email</th>
    </thead>
    <tbody>
    @foreach (MvcApplication2.Models.UserGroup group in user.Groups)
    {
        <tr>
            <td>@group.GroupID</td>
            <td>@group.GroupName</td>
            <td><input class="SettingsDisplayGroup" type="checkbox" name="displayGroup" value="@group.DisplayGroup" @(group.DisplayGroup ? "checked=\"checked\"" : "")/></td>
            <td><input class="SettingsMinimiseGroup" type="checkbox" name="minimiseGroup" value="@group.GroupMinimised" @(group.GroupMinimised ? "checked=\"checked\"" : "")/></td>
            <td><input class="SettingsSendFaultEmail" type="checkbox" name="sendFaultEmail" value="@group.SendFaultEmail" @(group.SendFaultEmail ? "checked=\"checked\"" : "")/></td>
        </tr>
    }
    </tbody>
</table>
<button id="saveUserGroupSettings">Save</button>

Any help appreciated

Upvotes: 0

Views: 1821

Answers (2)

user1434177
user1434177

Reputation: 1977

So I fixed the issue. The main problem I had was when I was accessing the data I was converting a string into a javascript element and because it did not have the checked="checked" property it was set to false:

$($('#userGroupSettings').dataTable().fnGetData(i)[2])

So instead of looping through the datatables with fnGetData I had to use the javascript table row elements and search through them this way:

$('#userGroupSettings tbody tr').each(function () {
    var isChecked = $(this).find('.SettingsDisplayGroup')[0].checked;
}

I think because i was creating a new jquery element from the datatables content(a string), the checked property had not been set there

Just to note that if you have any datatables.net hidden columns then you will not be able to access them like.

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

A checked checkbox simply means that it's value will be sent as post, it doesn't need to change anything else. Of course if you have multiple checkboxes with the same name, if one of the checkboxes is checked it's value will be sent

Upvotes: 1

Related Questions