How to update model data when using jQuery Data table with ASP.NET MVC

Question

I have large amount of data returning from JSON and to sort,filter and page, I am using jQuery dataTable.

This is working perfect with sorting, searching and pagination.

But I have an issue when I am trying to bind model with View controls.

For example, I have following JSON returned,

{
    "data":
    [
    {"IsSelected":true,"Name":"SMyDataPoint__01"},
    {"IsSelected":true,"Name":"SMyDataPoint__04"},
    {"IsSelected":true,"Name":"SMyDataPoint__07"},
    {"IsSelected":true,"Name":"SMyDataPoint__08"},
    {"IsSelected":true,"Name":"SMyDataPoint__09"},
    {"IsSelected":true,"Name":"SMyDataPoint__10"},
    {"IsSelected":true,"Name":"SMyDataPoint__11"}
    ]
}

And now I am using jQuery to populate the json data in my browser,

$('#myTableName').DataTable(
        {
            "ajax": {
                "url": "/API/Loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                {
                    "data": "IsSelected",
                    "render": function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                        }
                        return data;
                    },
                    "className": "dt-body-center"
                   // "autoWidth": true
                },
                { "data": "Name", "autoWidth": true }
            ],
            "rowCallback": function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-active', row).prop('checked', data.active == 1);
            }
        }
    );

Though I am getting ISelected as true from JSON, in UI , they are not ticked.

@StephenMuecke,And that was the issue , I should have done data.IsSelected.If you could post an answer , will mark that as solution. I was following a tutorial and many people could make same mistake. — Simsons
– Simsons, Commented Jan 22, 2018 at 7:44

user3559349 · Accepted Answer · 2018-01-22 07:50:11Z

3

The json objects you have shown do not have a property named active (and therefore data.active would return undefined). Use the IsSelected to set the checkedproperty.

$('#myTableName').DataTable({
   ....
   "rowCallback": function (row, data) {
        // Set the checked state of the checkbox in the table
       $('input.editor-active', row).prop('checked', data.IsSelected);
    }
})

answered Jan 22, 2018 at 7:50

user3559349

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

3 Comments

Simsons Over a year ago

Is it feasible to do two way biding using jQuery Datatable? Now that I am un-selecting few of check boxes and want to get them by using , _returnData.Where(x => x.IsSelected == false), really does not return anything..

user3559349 Over a year ago

Do you have a form that is being submitted? and is that code in a POST method? Your checkboxes do not have name attributes, so do not post back a value (and they do not have a value either so even if they had a name attribute, they would only submit "on" is checked, and nothing if not.

Simsons Over a year ago

Yes, I have a form and not psoting any thing, I want the model to set true or false as soon as I select or un-select an item. Created a separte post for it, stackoverflow.com/questions/48377642/…

Collectives™ on Stack Overflow

How to update model data when using jQuery Data table with ASP.NET MVC

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related