I just used datagrid FuelUX with a couple of select for filtering but, i got the follow problem:
When i perform then click event btnShow's i initialized the properties DataSourceGrid's and i send a filter for ajax request, the first time works fine, but when i change the selected item from the select and i push btnShow button the datagrid reload data but with the same information that the previous filter and no matter how many times i change the selected item from select control, in datagrid i got the same information.
Regards
$("#btnShow").on("click", function () {
var dataSourceGrid = new DataSourceGrid({
filter: { ID: JSON.stringify(parseInt($("#cboSelect").val())) }, //Here i'm trying to filter to datagrid
url: "StudentList.aspx/GetStudent", columns: [{
property: 'IDStudent',
label: 'ID',
sortable: true,
cssClass: "text-center"
}, {
property: 'Name',
label: 'Name',
sortable: true
}],
formatter: {}
});
var grid = $('#grdItems');
grid.datagrid({
dataSource: dataSourceGrid
});
grid.datagrid('reload');
});
var DataSourceGrid = function (options) {
this._url = options.url;
this._columns = options.columns;
if (options.formatter != undefined) {
this._formatter = options.formatter;
}
if (options.filter != undefined) {
this._filter = options.filter;
}
};
DataSourceGrid.prototype = {
columns: function () {
return this._columns;
},
data: function (options, callback) {
var self = this;
var ajaxParam;
_optionsGrid = options;
_callbackGrid = callback;
_formatterGrid = self._formatter;
ajaxParam = {
type: "GET",
url: self._url,
data: self._filter, //this parameter never change after the first time
method: CallbackGrid // this is my callback function to format datagrid(search, pagination, etc)
}
ajaxRequest(ajaxParam); //Here is my ajax request
}
};
UPDATE: I've been checking the loader.js file and i think the problem might be in $.fn.datagrid. The option param have the datasource property and inside that, the filter property, the first time data is undefined and perform data = new Datagrid(this, options) and load the filter that i sent, but the next time, data change to not undefined and it never perform data = new Datagrid(this, options) again and never change the filter value. I don't know how to solve this because this code is high level javascript for me :p.
I hope this help, regards.
$.fn.datagrid = function (option) {
return this.each(function () {
var $this = $(this);
var data = $this.data('datagrid');
var options = typeof option === 'object' && option;
if (!data) {
$this.data('datagrid', (data = new Datagrid(this, options))); //only the first time load the filter value
}
if (typeof option === 'string') data[option]();
});
};