jQuery UI Widgets Forums Grid Set Total Records for pager in dataAdapter->loadServerData function

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

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

  • samsamet
    Participant

    Hi, I am trying to use the data adapter loadserverData function and I can get the data from the server side without problem. But I couldn’t figure out how to set the total number of records to be used by the pager. I am developing using .NET MVC 4.

    This is how my dataAdapter looks like:

    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    loadServerData: function (serverdata, source, callback) {

    $.ajax({
    dataType: source.datatype,
    url: url,
    data: serverdata,
    success: function (data, status, xhr) {

    var json = JSON.stringify(eval(“(” + data.Rows + “)”));

    data.Rows = jQuery.parseJSON(json);

    if (!data) {
    data = [];
    }
    var dataArray = new Array();

    for (var i = 0; i < data.Rows.length; i++) {
    var record = data.Rows[i];
    var datarow = {};

    for (var j = 0; j < source.datafields.length; j++) {
    var datafield = source.datafields[j];

    var value = ”;

    if (undefined == datafield || datafield == null) {
    continue;
    }
    if (datafield.map) {
    value = $(datafield.map, record).text();
    }
    // searches by both selectors when necessary.
    if (value == ”) {
    value = record[datafield.name];
    }
    // console.log(‘ value: ‘ + i + ‘ ‘ + j + record);
    //console.log(record);
    datarow[datafield.name] = value;
    }

    dataArray[dataArray.length] = datarow;

    }
    // send the loaded records to the jqxDataAdapter plug-in.

    callback({ records: dataArray});
    }
    });
    }
    }
    );

    dataAdapter.dataBind();

    This is how my source look like :

    var url = ‘../JqGrid/GetData’;
    var source =
    {
    datatype: “json”,
    data: ”,
    datafields: [
    { name: ‘CompanyName’, type: ‘string’ },
    { name: ‘ContactName’, type: ‘string’ },
    { name: ‘ContactTitle’, type: ‘string’ },
    { name: ‘Address’, type: ‘string’ },
    { name: ‘City’, type: ‘string’ },
    { name: ‘Country’, type: ‘string’ }
    ],
    url: ‘../JqGrid/GetData’,
    beforeprocessing: function (data) {
    console.log(data);

    }

    };

    The Grid

    $(“#jqxgrid”).jqxGrid(
    {
    width: 700,
    selectionmode: ‘singlecell’,
    source: dataAdapter,
    editable: true,
    theme: ‘classic’,
    autoheight: true,
    pageable: true,

    rendergridrows: function (params) {
    return params.data
    },
    columns: [
    { text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
    { text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
    { text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
    { text: ‘City’, datafield: ‘City’, width: 120 },
    { text: ‘Country’, datafield: ‘Country’, width: 120 }
    ]
    });
    });

    And this is the data format which I send form the server side:

    rows = some json string ;
    total = total row count that will be displayed at the grid;
    var result = new
    {
    TotalRows = total,
    Rows = rows
    };

    return Json(result, JsonRequestBehavior.AllowGet);

    Thanks,
    Samet CAGLAR


    Peter Stoev
    Keymaster

    Hi Samet,

    It should not be necessary to use loadServerData here. Server Paging can be implemented in much easier way – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-server-side-paging.htm

    Best Regards,
    Peter Stoev

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.