Refresh Grid Data

[himajaMember]

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

[DimitarParticipant]

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/

[himajaMember]

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

[DimitarParticipant]

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/

[herbergonzalezParticipant]

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>

[Peter StoevKeymaster]

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/

[NatrajParticipant]

Hello all,

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

[Author]

Posts