jQuery UI Widgets Forums Grid Refresh Grid Data

Tagged: , , ,

This topic contains 6 replies, has 5 voices, and was last updated by  Natraj 6 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Refresh Grid Data #10527

    himaja
    Member

    Hi,

    How can the grid data be refreshed.
    Once the data is loaded to the grid and after performing updates to the grid and save to database, the grid is not getting loaded with the updated information. How can the cache be cleared to fetch the data again from data source.

    Please suggest.

    Thanks

    Refresh Grid Data #10528

    Dimitar
    Participant

    Hello himaja,

    To refresh the Grid, you need to simply set its ‘source’ property again. You can find more information on the matter in Grid Data Sources.

    Best Regards,
    Dimitar

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

    Refresh Grid Data #10531

    himaja
    Member

    Hi,

    Thanks for responding.

    The source property is set again, but the call is not being made to controller. Please check below code.

    The grid is being loaded with the input as “Pending” on page load. Once the status is changed the grid is being refreshed again on dropdown change event.
    InternalGridActions is being called on save and on success of post, LoadInternalGrid() method is called again to set the source and get the udpated data. But this call is not hitting controller and database to fetch the information.

    $(document).ready(function () {

    /*By Default the grid should show the users with pending status*/
    LoadInternalGrid(“Pending”);

    /*on change of status the grid needs to loaded with the data for the given request filter*/
    $(‘#ddlRequestStatus’).change(function () {

    LoadInternalGrid($(‘#ddlRequestStatus’).val());
    });

    });

    /*Function to load Internal Users Grid*/
    function LoadInternalGrid(input)
    {

    $.ajax({
    url: ‘../UserTest/GridInternalUsers/’,
    dataType: ‘json’,
    data: { status: input },
    type: ‘GET’,
    contentType: ‘application/json; charset=utf-8’,
    success: function (data) {
    var ssource = {
    datafields: [{ name: ‘UserID’ }, { name: ‘UserName’ }, { name: ‘UserEmail’ }],
    localdata: data
    }
    var dataAdapterforInternalUsers = new $.jqx.dataAdapter(ssource);
    $(“#Injqxgrid”).jqxGrid(
    {
    width: ‘99%’,
    height: 206,
    source: dataAdapterforInternalUsers,
    editable: true,
    theme: getTheme(),
    enablehover: false,
    selectionmode: ‘singlecell’,
    filterable: true,
    pageable: true,
    sortable: true,
    //rendergridrows: function () { return dataAdapter.records; },
    pageable: true,
    columns: [

    { text: ‘UserID ‘, dataField: ‘UserID’, editable: false, width: ‘7%’ },
    { text: ‘UserName ‘, dataField: ‘UserName’, editable: false, width: ‘15%’ },
    { text: ‘UserEmail ‘, dataField: ‘UserEmail’, editable: false, width: ‘15%’ }

    ]
    });
    }
    });

    }

    /*function to save*/
    function InternalGridActions(action)
    {

    if (action == “Save”)
    {

    var updatedData = JSON.stringify(savedData);

    $.ajax({
    url: ‘/UserTest/InternalSave’,
    type: ‘POST’,
    data: updatedData,
    contentType: ‘application/json; charset=utf-8’,
    success: function (data){

    LoadInternalGrid($(‘#ddlRequestStatus’).val());
    }
    });

    }

    Thanks

    Refresh Grid Data #10536

    Dimitar
    Participant

    Hi himaja,

    We do not know for sure the reason for the reported issue. Sometimes AJAX requests are cached. You might try setting the cache property of $.ajax to false.
    Remember to set the source property again, too.

    Best Regards,
    Dimitar

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

    Refresh Grid Data #46520

    herbergonzalez
    Participant

    Hi.
    I have this code where I cant’t send the data: { datefrom: “2013-12-13”, dateto: “2013-12-31″,}

    Again. I placed a datetimepicket where the user can select oter range of dates but doesn’t work.
    Please tell me what to do.

    <script type=”text/javascript”>
    $(document).ready(function () {
    var theme = ”;

    var url = “datos.php”;
    // prepare the data
    var source =
    {
    async: false,
    data: {
    datefrom: “2013-12-13”,
    dateto: “2013-12-31”,
    },

    datatype: “json”,
    datafields: [
    { name: ‘PEDIDO’, type: ‘string’},
    { name: ‘LOTE’, type: ‘string’},
    { name: ‘MATERIAL’, type: ‘string’},
    { name: ‘CONCEPTO’, type: ‘string’},
    { name: ‘CALIDAD’, type: ‘string’}
    ],
    cache: false, /*http://www.jqwidgets.com/community/topic/refresh-grid-data/*/
    id: ‘id’,
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#jqxgrid”).jqxGrid(
    {
    width: 1100,
    source: dataAdapter,
    theme: theme,
    showfilterrow: true,
    filterable: true,
    sortable: true,
    groupable: true,
    autoshowfiltericon: true,
    pageable: true,
    pagesize:100,
    autoheight: true,
    //enabletooltips: true,
    //pagesizeoptions: [‘5′, ’10’, ’15’],
    columnsresize: true,
    selectionmode: ‘multiplecellsextended’,
    columns: [
    { text: ‘Pedido’, datafield: ‘PEDIDO’, width: 100},
    { text: ‘Lote’, datafield: ‘LOTE’, width: 100 },
    { text: ‘Material’, datafield: ‘MATERIAL’, width: 450 },
    { text: ‘Concepto’, datafield: ‘CONCEPTO’, width: 200 },
    { text: ‘Calidad’, datafield: ‘CALIDAD’, width: 120 }
    ]
    });

    $(“#button”).click(function () {
    var fechaini=$(“#wf1”).jqxDateTimeInput(‘getDate’);
    var fechafin=$(“#wf2”).jqxDateTimeInput(‘getDate’);

    function convert(fecha){
    var date = new Date(fecha),
    mnth = (“0” + (date.getMonth()+1)).slice(-2),
    day = (“0” + date.getDate()).slice(-2);
    return [ date.getFullYear(), mnth, day ].join(“-“);
    }
    var wf1= convert(fechaini);
    var wf2= convert(fechafin);
    //alert(wf1); Ya se que funciona

    source.data.datefrom=wf1;
    source.data.dateto=wf2;
    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    formatData: function (data) {
    $.extend(data, {
    datefrom: wf1,
    dateto: wf2
    });
    return data;
    }
    });
    dataAdapter.dataBind(); //sto Lo Puse Yo

    $(“#jqxgrid”).jqxGrid({ source: dataAdapter });

    });
    });
    </script>

    Refresh Grid Data #46524

    Peter Stoev
    Keymaster

    Hi herbergonzalez,

    dataAdapter.dataBind() is not required. The data binding is performed by the Grid after you set the “source” property to point to the dataAdapter.

    Best Regards,
    Peter Stoev

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

    Refresh Grid Data #81768

    Natraj
    Participant

    Hello all,

    How can i refresh the grid data without its column headers?

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

You must be logged in to reply to this topic.