MVC DataTable render checkbox and with CheckBox-value in each row

samuelJackSon

here is my code from controller:

public ActionResult _CustomerProductList(BatchUpdateTableParamModel param)
{
int start = param.iDisplayStart;
int perPage = Math.Min(param.iDisplayLength, 100);
int currentPage = (start / perPage) + 1;

        Guid ProductId = new Guid(param.ProductID);
        Guid ProductVersionID = new Guid(param.ProductVersionID);
        IPagedList<Customer> customers = customerRepository.SearchCustomerByProductAndProdcutVersion(ProductId, ProductVersionID, start, perPage);

        //Put data into object array for Json
        var result = from a in customers
                     select new object[]
                     {
                         false,
                         a.Name,
                         a.Address1,
                         a.Address2,
                         a.PhoneNumber,
                         a.Id
                     };

        //Return Json data for Datatable
        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = customers.TotalItemCount,
            iTotalDisplayRecords = customers.TotalItemCount,
            aaData = result
        });
    }

here some js code from view:

function GetTable() {
        var urlRequest = $('#customerTable').data("request-url");
        $('#customerTable').dataTable({
            "bSort": false,
            "bServerSide": true,
            "sAjaxSource": urlRequest,
            "sServerMethod": "POST",
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    $('td:eq(0)', nRow).html('<input class="CheckBox" type="checkbox" value="check"            checked/>')
            },
            "bProcessing": true,
            "bFilter": false,
            "bDestroy": true,
            "aoColumns": [
                            {
                                "sName": "Selected",
                                "fnRender": function (oObj , oData) {
                                    return '<input class="CheckBox" type="checkbox" value=" '+oData.Id +  ' "/>'
                                }
                            },
                            { "sName": "NAME" },
                            { "sName": "ADDRESS1" },
                            { "sName": "ADDRESS2" },
                            { "sName": "PHONENUMBER" },
                            { "sName": "CUSTOMERID" }
            ]

        });
    };

here is the table :

     <div class="portlet box blue">
         <div class="portlet-title">
             <div class="caption">
                <i class="fa fa-user"></i>Customers
             </div>
         </div>
         <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover"
               id="customerTable"
               data-request-url="@Url.Action("_CustomerProductList")">
                <thead>
                    <tr>
                        <th style="width: 8px;"></th>
                        <th class="hidden-480">Name</th>
                        <th class="hidden-480">Add</th>
                        <th class="hidden-480">Add2</th>
                        <th class="hidden-480">Phone No</th>
                         <th class="hidden-480">CustomerID</th>
                     </tr>
                 </thead>
             </table>
         </div>
     </div>

problem/question is when i have webpage loaded up the check box is populated but when i check the HTML them checkboxs have values of undefined,,
is there something wrong with this line ? the oData seems to be have no value at all !!
{
"sName": "Selected",
"fnRender": function (oObj , oData) {
return '<input class="CheckBox" type="checkbox" value=" '+oData.Id + ' "/>'
}
},

any suggestion will be great
thank you very much !

samuelJackSon

omg my code is a mess !! how do i edit >?