jQWidgets Forums

jQuery UI Widgets Forums Grid Issue while updating Grid based on Searching

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 5 months ago.

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

  • Robby
    Member

    Hey,

    I am getting some issue while updating grid based on search criteria. Here’s i am describing about what i am trying to do.
    When first time page loads, I am filling Grid with data based on some default search values and again user can narrow down to
    results by new search values and got new set of records from database. At this point I am using “updatebounddata” to update
    the Grid. Now here problem occurs, if at page load i am getting 4000 records and on norrow down results i am getting 2000 records,
    total records value in paging section doesn’t changing on “updatebounddata”.
    Here’s the code I am using :

    var source;
    var dataAdapter;
    $(document).ready(function () {
    /* Called on PAGE LOAD event */
    BindGrid('new')
    /* Called when user search for new records */
    $('#btnSearch').click(function () {
    BindGrid('update');
    });
    }
    function BindGrid(type)
    {
    if (type == 'new') {
    source = {
    datatype: "json",
    datafields: [
    { name: 'Kontonummer', type: 'string' },
    { name: 'Navn', type: 'string' },
    { name: 'Kmailadresse', type: 'string' },
    { name: 'Mailadresse', type: 'string' },
    { name: 'Adresse1', type: 'string' },
    { name: 'Telefon', type: 'string' },
    { name: 'DebitorGruppe', type: 'string' },
    { name: 'Kontoudtog', type: 'number' },
    { name: 'Spxrret', type: 'number' },
    { name: 'Saldodkr', type: 'number' },
    { name: 'Rykkerkode', type: 'number' }
    ],
    formatdata: function (data) {
    $('#page').BlockUI('Loading account list....');
    var num = parseInt(data.pagenum) + parseInt(1);
    gridPageSize = data.pagesize;
    return {
    Kontonummer: $('#txtKontonummer').val(), PageSize: data.pagesize, PageNumber: num
    }
    },
    cache: false,
    root: 'Debitors',
    url: '/ajax/opretkontoudtog-helper.aspx/GetDebtors'
    };
    dataAdapter = new $.jqx.dataAdapter(source,
    {
    contentType: 'application/json; charset=utf-8',
    downloadComplete: function (data, textStatus, jqXHR) {
    var sResponse = $.parseJSON(data.d);
    var dResponse = $.parseJSON(sResponse.ResponseData);
    source.totalrecords = dResponse.TotalRecords;
    cTotalRecords = dResponse.TotalRecords;
    currentRecords = dResponse.Debitors.length;
    return dResponse.Debitors;
    },
    loadComplete: function () {
    if ($("#page").isMasked()) {
    $('#page').UnBlockUI();
    }
    }
    });
    $("#accountlist").jqxGrid({
    width: 1300,
    autoheight: true,
    source: dataAdapter,
    theme: "HattenTheme",
    selectionmode: 'multiplerows',
    columnsresize: true,
    enabletooltips: true,
    virtualmode: true,
    pageable: true,
    pagesize: 100,
    pagesizeoptions: ['100', '250', '500'],
    rendergridrows: function (args) {
    return args.data;
    },
    columns: [
    { text: 'Kontonummer', datafield: 'Kontonummer', width: 100 },
    { text: 'Navn', datafield: 'Navn', width: 205 },
    { text: 'K Mail', datafield: 'Kmailadresse', width: 175 },
    { text: 'F Mail', datafield: 'Mailadresse', width: 175 },
    { text: 'Adresse1', datafield: 'Adresse1', width: 175 },
    { text: 'Telefon', datafield: 'Telefon', width: 75 },
    { text: 'Debitor Gruppe', datafield: 'DebitorGruppe', width: 100 },
    { text: 'Kontoudtog', datafield: 'Kontoudtog', width: 75 },
    { text: 'Spræret', datafield: 'Spxrret', width: 60 },
    { text: 'Saldo', datafield: 'Saldodkr', width: 80 },
    { text: 'Rykkerkode', datafield: 'Rykkerkode', width: 80 }
    ]
    });
    $("#accountlist").bind('bindingcomplete', function () {
    if (currentRecords < gridPageSize) {
    $("#accountlist").jqxGrid({
    pagesize: currentRecords
    });
    }
    else {
    $("#accountlist").jqxGrid({
    pagesize: gridPageSize
    });
    }
    });
    }
    else if (type == 'update') {
    $('#page').BlockUI('Loading account list....');
    source = {
    datatype: "json",
    datafields: [
    { name: 'Kontonummer', type: 'string' },
    { name: 'Navn', type: 'string' },
    { name: 'Kmailadresse', type: 'string' },
    { name: 'Mailadresse', type: 'string' },
    { name: 'Adresse1', type: 'string' },
    { name: 'Telefon', type: 'string' },
    { name: 'DebitorGruppe', type: 'string' },
    { name: 'Kontoudtog', type: 'number' },
    { name: 'Spxrret', type: 'number' },
    { name: 'Saldodkr', type: 'number' },
    { name: 'Rykkerkode', type: 'number' }
    ],
    formatdata: function (data) {
    $('#page').BlockUI('Loading account list....');
    var num = parseInt(data.pagenum) + parseInt(1);
    return {
    Kontonummer: $('#txtKontonummer').val(), PageSize: data.pagesize, PageNumber: num
    }
    },
    totalrecords: cTotalRecords,
    root: 'Debitors',
    url: '/ajax/opretkontoudtog-helper.aspx/GetDebtors'
    };
    dataAdapter = new $.jqx.dataAdapter(source,
    {
    contentType: 'application/json; charset=utf-8',
    downloadComplete: function (data, textStatus, jqXHR) {
    var sResponse = $.parseJSON(data.d);
    var dResponse = $.parseJSON(sResponse.ResponseData);
    source.totalrecords = dResponse.TotalRecords;
    cTotalRecords = dResponse.TotalRecords;
    currentRecords = dResponse.Debitors.length;
    return dResponse.Debitors;
    },
    loadComplete: function () {
    if ($("#page").isMasked()) {
    $('#page').UnBlockUI();
    }
    }
    });
    $("#accountlist").jqxGrid('updatebounddata');
    }
    }

    What I am doing wrong in code ?


    Peter Stoev
    Keymaster

    Hi Robby,

    In your second source object definition, cache: false is missing so your Ajax calls could be cached. I also do not see where you use the dataAdapter that is defined when the “type” == “update”. If you want to use that dataAdapter, set the Grid’s source property to point to it. Otherwise, by calling the “updatebounddata” you will make the Grid to call the dataBind method of its original dataAdapter.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Robby
    Member

    I got it working after resigning the Value of “dataAdapter” to the grid again under Update section.

            $("#accountlist").jqxGrid({ source: dataAdapter });
    $("#accountlist").jqxGrid('updatebounddata');

    Thanks.


    Peter Stoev
    Keymaster

    Hi Robby,

    According to me, the

     $("#accountlist").jqxGrid('updatebounddata');

    is unnecessary.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Robby
    Member

    Thanks Peter, I have removed the “updatebounddata” from the script.

    I have one more requirement within Grid but don’t know whether its there or not. Sometime I am loading around 1000 Records
    in the Grid with Page Size 250 or 500 or many be more then I need to scroll down the page to hit next page button from paging
    section. Is there any way to duplicate the same paging section at the top of Grid ? So I don’t have to go at the bottom.

    Thanks,
    Ravi Joshi


    Peter Stoev
    Keymaster

    Hi Ravi Joshi,

    Top Pager UI is currently not available. We will consider adding such in the future versions.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.