jQuery UI Widgets Forums Grid Updating the totalrecords count dynamically based on response

Tagged: 

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

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

  • sudharshan
    Member

    I have been trying out Knockout along with jqxgrid. In virtual mode, the grid is being updated with data from API. However, API also sends me the total records count for that specific condition. I have initated the totalrecords to be 1000. Now I am trying to read the x-documents count from response and update the “totalrecords” of the grid with this value. This way I would like to avoid the extra rows being displayed in the grid in case the result value is small.

    This way user will get to scroll the entire records without limiting to the pre-defined value(1000). If I go with data[0].TotalRows, this would give only the count that was loaded. In case of virtual mode, how do we get/set the total rows available.

    Here is the snippet

    $(document).ready(function () {
    var sortColumn = “LAST_NAME”;
    var sortOrder = “asc” ;
    var fromSort = false;
    var sortURL=””;
    var recLimit = 25;
    var selectedRows = new Array();
    var selectedRowCount = 0;
    var selectAll = false;
    var unSelectAll = false;
    var pStartIndex = 0;
    var pEndIndex = 0;
    var fromPinColumn = false;
    var exprNbr = “”;

    var dataSource = {
    datatype: “json”,
    type: “POST”,
    datafields: [
    {name: ‘_id’},
    {name: ‘LEADS’},
    {name: ‘curr_seg’},
    {name: ‘lastName’},
    {name: ‘firstName’},
    {name: ‘firm’},
    ],
    id: ‘_id’,

    };

    // Data Adapter creation for GRID
    var dataAdapter = new $.jqx.dataAdapter(dataSource, { autoBind: true, async: false });

    // Data model creation for GRID
    var GridModel = function (items) {
    this.items = ko.observableArray(items);
    };

    // activate knockout.
    var model = new GridModel(dataAdapter.records);
    ko.applyBindings(model);

    // bind grid to the knockout’s observable array.
    var source = {
    localdata: model.items,
    datatype: ‘observablearray’,
    totalrecords: 1000,

    sort: function (column, direction) {
    $(“#jqxgrid”).jqxGrid(‘clearselection’);
    sortColumn=column;
    if(direction == “ascending” || direction == true )
    sortOrder=”asc”;
    if(direction == “descending” || direction == false )
    sortOrder=”desc”;
    if(direction == null)
    {
    sortOrder=null;
    sortColumn = null;
    }

    $(“#jqxgrid”).jqxGrid(‘updatebounddata’);
    },
    beforeprocessing: function(data)
    {
    source.totalrecords = data[0].TotalRows;
    }

    }

    // load virtual data.
    var rendergridrows = function (params) {
    return loaddata(params);
    }

    var loaddata = function (params) {
    if(selectAll)
    {
    skipIndex = 0;
    selectAll= false;
    }
    else{

    endIndex = params.endindex;
    skipIndex = params.startindex;
    }
    url = “http://abc.com/query?limit=” + recLimit +”&skip=”+skipIndex+”&sort_by=”+sortColumn+”&sort_order=”+sortOrder;
    dataSource.url = url;

    dataAdapter = new $.jqx.dataAdapter(dataSource, {contentType:’application/json’, autoBind: true, async: false,
    formatData: function (data)
    {
    return ‘{ “firmName”:”PLACE HOLDER”}’;
    },
    downloadComplete: function(edata, textStatus, jqXHR)
    {

    }
    });

    return dataAdapter.records;
    }

    // Updating selectedRows Array based on Grid selected rows – START

    var disabledRow;
    $(“#jqxgrid”).on(‘rowselect’, function (event)
    {
    selectedRows[selectedRowCount++] = event.args.row.MyID;
    disabledRow = event.args.row;
    });

    $(“#jqxgrid”).on(‘rowunselect’, function (event)
    {
    if(unSelectAll || selectAll)
    {
    return;
    }

    for(var i=0; i< selectedRowCount; i++)
    {
    if(event.args.row.MyID == selectedRows[i])
    {
    selectedRows.splice(i,1);
    break;
    }
    }
    selectedRowCount = selectedRows.length;
    });
    // create jqxGrid.
    $("#jqxgrid").jqxGrid(
    {
    source: source,
    //autoheight: true,
    //pageable: true,
    sortable: true,
    selectionmode: 'multiplerowsadvanced',
    pagesize: 10,
    columnsresize: true,
    theme: 'ui-start',
    pagesizeoptions: ['5', '10', '15', '20', '25'],
    columnsreorder: true,
    width: 800,
    columnsheight: 40,
    rowsheight: 40,
    virtualmode: true,
    rendergridrows: rendergridrows,
    autoshowloadelement: false,

    columns: [
    {text: 'Type', dataField: 'LEADS', minwidth: 100, sortable: false},
    {text: 'Segment', dataField: 'curr_seg', minwidth: 150},
    {text: 'Last Name', dataField: 'lastName', minwidth: 130},
    {text: 'First Name', dataField: 'firstName', minwidth: 130},
    {text: 'Firm Name', dataField: 'firm', minwidth: 160}

    ]

    });
    });

    Appreciate your response

    Thanks

    Sudarshan


    Peter Stoev
    Keymaster
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.