jQuery UI Widgets Forums Grid Grid Refresh

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Grid Refresh Posts
  • Grid Refresh #63609

    Vinay Reddy
    Participant

    Hi,

    I have a issue on gird reloading.

    I have a grid where i should load data from server. I am able to load the data from server for the first time but inorder to reload/refresh the data based on some inputs what should i do.

    Here is my code snippet which is a generic jqxgrid where every one uses to build grid. can you please help me out.

    $.fn.createJqxGrid = function(options)
    {
    var adpater = getDataAdapter(options);
    $(“#” + options.gridID).jqxGrid(
    {
    width:options.width,
    height:options.height,
    source: adpater,
    pageable: true,
    columnsresize: true,
    filterable: true,
    sortable: true,
    virtualmode: true,
    theme:’custom’,
    rowdetails: options.rowdetails,
    initrowdetails: function initrowdetails(index, parentElement)
    {
    var subGrid = $(parentElement).find(‘.subgrid’);

    if (subGrid != null)
    {
    subGrid.append(getSubGridElement(options).html());
    }
    },
    rowdetailstemplate:{
    rowdetails: “<table width=’100%’ height=’100%’><tr><td class=’subgrid’ style=’width:100%;height:100%’ align=’center’></td></tr></table>”,
    rowdetailsheight: 80 },
    autoshowfiltericon: true,
    rendergridrows: function()
    {
    return adpater.records;
    },
    columns: options.columns,
    });
    }

    function getDataAdapter(options)
    {
    var source= {
    type: “GET”,
    dataType: ‘json’,
    cache: false,
    datafields: options.datafields,
    url:options.url,
    beforeprocessing: function(data)
    {
    source.totalrecords = data.records;
    },
    sort: function()
    {
    $(“#” + options.gridID).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    filter: function()
    {
    $(“#” + options.gridID).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    };

    var gridDataAdapter = new $.jqx.dataAdapter(source, {
    downloadComplete: function (data, status, xhr)
    {
    return data.rows;
    }
    });

    return gridDataAdapter;
    }

    function getSubGridElement(options)
    {
    var subGridDetails = options.subGridDetails;
    var tableEle = $(“<table>”,
    {
    width:”100%”,
    id:’sub_grid’
    });
    var trEle = $(“<tr>”);
    var tdEle, divEle;
    var length = Object.keys(subGridDetails).length;
    var sepWidth = length*2;
    var tdWidth = (100-sepWidth)/length;
    var counter=0;
    $.each(subGridDetails,function(key,value, index)
    {
    counter++;
    tdEle = $(“<td>”,
    {
    width: tdWidth + “%”,
    class:’block’
    });

    divEle = $(“<div>”,
    {
    class: “rowDetails”,
    text: value
    });

    divEle.appendTo(tdEle);

    divEle = $(“<div>”,
    {
    class: “rowSubDetails”,
    id: key
    });
    divEle.appendTo(tdEle);
    tdEle.appendTo(trEle);

    if(counter<length)
    {
    tdEle = $(“<td>”,
    {
    width: “2%”,
    class:’v-separator’
    });
    tdEle.appendTo(trEle);
    }
    });
    trEle.appendTo(tableEle);

    return tableEle;
    }

    Grid Refresh #63620

    Dimitar
    Participant

    Hello yennamvinay,

    First you should make sure your data adapter is bound to the required data. If you have changed the url to the data, you need to re-set the source url property, then call the data adapter’s dataBind method and finally, call the grid’s updatebounddata method.

    Best Regards,
    Dimitar

    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.