Is there a way to filter the data currently displayed in a jqGrid programmatically (in Javascript, not server-side)? All the search examples seem to depend on using jqGrid's own search UI, which doesn't work for me. For example, I'd like to be able to filter based on user actions elsewhere on a page.
I'm imagining something like
jQuery("#grid_id").filter('CategoryID', selectedCategoryID);
where CategoryID is a column in the grid and selectedCategoryID contains, for example, a value chosen by the user in a select element.
If you want to pre-filter your data first:
$('#myGrid').setGridParam({ data: filtereddataarray }).trigger("reloadGrid");
where filtereddataarray contains only records you want to display for this view
If you want to construct your filter programmatically(I use this method, mostly):
var filters = { "groupOp": "AND", "rules": [{ "field": "id", "op": "eq", "data": "9" }, { "field": "amount", "op": "ge", "data": "10" }, { "field": "name", "op": "cn", "data": "do i"}] };
//To filter:
jqGridFilter(filters , $('#myGrid'));
//To reset:
jqGridFilter(null, $('#myGrid'));
function jqGridFilter(filtersparam, grid) {
grid.setGridParam({
postData: {
filters: filtersparam
},
search: true
});
grid.trigger("reloadGrid");
}
You could pass JSON as the data and use the setGridParam method to reload the data!
I have never tried this and not sure how you would get jqgrid to use your client data rather than hit a URL!
Have you had any luck?
Related
I'm struggling with getting a footer, to display totals, on a Kendo Angular Grid which is bound async. to a backend API.
The example on the Kendo website refers to a fixed array and doesn't include any examples (although everything else does !?) of have to achieve this when bound to ASYNC data.
You need to grab your Database results into an object (data) independent from you grid data
Here you have documentation about aggregateBy https://www.telerik.com/kendo-angular-ui/components/dataquery/api/aggregateBy/
const result = aggregateBy(data, [
{ aggregate: "sum", field: "unitPrice" },
{ aggregate: "sum", field: "unitsInStock" }
]);
To get your result use
const result = <AggregateResult>{
"unitPrice": { "sum": 53, "count": 2 },
"unitsInStock": { "sum": 66, "count": 3 }
};
I am working with Coldfusion and jqgrid.
Is there a way to populate the colModel editoptions dynamically from query results?
If you need to set dynamically the options like 1:female;2:male, then I suppose that you fill grid with data which contains 1 or 2 in the specified column. So you have to use formatter: "select" (see the documentation). Thus you should be able to set the properties like below
{name: "sex", formatter: "select", editoptions: { value: "1:female;2:male" }}
If you need to set such options dynamically, that you want to load the information about editoptions.value from the server.
The most native callback which you can use for it is beforeProcessing. The callback will be processed before the data returned from the server will be displayed using the formatter. So one can make any changes of formatoptions or editoptions.
If the server response looks now like
{
"rows": [
{"id": 123, "name": "John", "sex": "2"},
{"id": 456, "name": "Mary", "sex": "1"}
]
}
then you can extend the data of the server response to the following
{
"rows": [
{"id": 123, "name": "John", "sex": "2"},
{"id": 456, "name": "Mary", "sex": "1"}
],
"colModelExtentions": {
"sex": {"formatter": "select", "editoptions": {"value": "1:female;2:male"}}
}
}
In the way you specify some changes of specific items of the colModel directly inside of the server response. The implementation of the beforeProcessing callback which process such data can looks like
beforeProcessing: function (data) {
var cmName, cmExt = data.colModelExtentions, $self = $(this),
p = $self.jqGrid("getGridParam");
for (cmName in cmExt) {
// enumerate properties of colModelExtentions like sex
if (cmExt.hasOwnProperties(cmName)) {
$self.jqGrid("setColProp", cmName, cmExt[cmName]);
}
}
}
and to define the "sex" columns in colModel like
{name: "sex", width: 50}
You will find more details about the scenario in the answer and this one. You can extend the information which return the server. In the case you can need to call setColWidth or setLabel additionally to apply dynamically the column width and the text of the column header.
I'm trying to filter some data for a chart with date-sensitive information
if I select a date range, with no date, that would return an empty array of results, the application doesn't crash, but as soon as there is data withing the range of the FilterDate and gte (hence, there are points made after the filterDate), then the application crashes on that line.
axisChange : function(){
//set date from period
var filterDate = new Date();
switch(this.get('selectedPeriod'))
{
case 'week':
filterDate.setMonth(filterDate.getMonth()-1);
break;
case 'day':
filterDate.setDate(filterDate.getDate()-7);
break;
case 'hour':
filterDate.setDate(filterDate.getDate()-1);
break;
}
/*var chart = jQuery("#chart").data("kendoChart");
chart.setOptions({ categoryAxis: { baseUnit: this.get('selectedCategory') }});*/
dataSource.filter({
"field": "CreatedAt",
"operator": "gt",
"value": filterDate
});
}
EDIT
ON closer inspection this is an issue with dataSource.filter, specific to the date, if I try to use another filter like:
dataSource.filter({
"field": "Note",
"operator": "contains",
"value": 'e'
});
everything is updated okay according to the filter.
FOR DETAILED CODE, PLEASE VISIT GITHUB REPO
https://github.com/Danelund/NeuroHelper/blob/master/NeuroHelper/scripts/app.js
My first thought about this problem is about date format. Place a breakpoint before dataSource.filter line and check what is the date format. Probably you should also convert this date object to string using some kind of date.toString() function.
dataSource.filter({
"field": "CreatedAt",
"operator": "gt",
"value": filterDate.toString()
});
Have you specified the type of the field that you want to filter (i.e. CreatedAt) to be of type "date" ?
How to do so is demonstrated here.
schema: {
model: {
id: "ProductID",
fields: {
CreatedAt: {
type: "date"
},
How to implement custom filtering to include/exclude empty values (filtering by one column)?
What you could do is add a new column (boolean) in your model to indicate that another column is empty. And filter on this new column.
All you need is a "not equal" filter on the desired column.
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data:[{
field1:"A",
field2:"Z"
}, {
field1:"B",
field2:"Y"
}, {
field1:"C",
field2:""
}, {
field1:"D",
field2:null
}],
filter: { field: "field2", operator: "neq", value: "" }
},
height: 550,
columns: [{
field: "field1",
title: "Field 1"
}, {
field: "field2",
title: "Field 2"
}]
});
});
</script>
http://dojo.telerik.com/Esada
---EDIT---
I did some research and i think ajax sometimes works with mvc ... anyways this is what you would do. I dont implicitly see the documentation for it or the mvc docs but its in the ajax docs
---EDIT---
If you set AutoPostBackOnFilter property of a column to True, the user does not need to press the filter button to initiate filtering. Instead, a postback filter operation occurs when the user types a filter in the filter box and presses [Enter] from the keyboard.
When AutoPostBackOnFilter is True, the column assumes a filter operation of Contains for string types or EqualTo for numeric types.You can change this to another filter function by setting the CurrentFilterFunction property. For example:
// filter out a certain column that is null
<telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
UniqueName="ProductName" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true" />
/*
This is a rundown version of the above code
if you happen to have a grid defined somewhere
else in the code. Basically you would do this
to apply the filter or create multiple to apply
multiple.
*/
$(document).ready(function() {
$("#grid").kendoGrid({
filter: {
ColumnName: "TheColumn",
operator: "neq",
value: ""
}
});
});
I am currently using dojox/app to create a SPA, and I am starting now to add stores and models. I have been able to create a store from a json object, to create a model from the store, and to bind fields to the model using dojox mvc. However, I have something that I have not yet been able to do: update a 2nd model that is binded to the same store as the 1st one.
I will give an example. I have this store:
win.global.modelApp = {};
modelApp.names = {
identifier: "id",
items: [{
"id": 1,
"First": "John",
"Last": "Doe",
},{
"id": 2,
"First": "John2",
"Last": "Doe",
}]
}
and then I create two models using this store in the config.json file:
"stores": {
"namesStore":{
"type": "dojo/store/Memory",
"params": {
"data": "modelApp.names"
}
}
},
"models": {
"namesXUnused": {
"modelLoader": "dojox/app/utils/mvcModel",
"type": "dojox/mvc/EditStoreRefListController",
"params":{
"store": {"$ref":"#stores.namesStore"}
}
},
"namesXUnused2": {
"modelLoader": "dojox/app/utils/mvcModel",
"type": "dojox/mvc/EditStoreRefListController",
"params":{
"store": {"$ref":"#stores.namesStore"}
}
}
}
Then, in my HTML file, I have a field binded to namesXUnused (property First), and another binded to namesXUnused2 (property First). When I edit the first field, I then have a button that commits these changes to the store. I can see via debugger that the store data has been correctly updated. However, I cannot get the second field to reflect the changes. Is there a way to refresh or recreate the model from the store?
Thank you,
I think you need to set "observable": true, on the store to use an Observable store since you want to have updates to the store be reflected back to the models. There are examples in the dojox/app/tests (and the dojox/mvc/tests) if you have problems, but just adding:
"observable": true, to your namesStore should do it.
"stores": {
"namesStore":{
"type": "dojo/store/Memory",
"observable": true,
"params": {
"data": "modelApp.names"
}
}
},
Regards,
Ed