Kendo MVC Grid - filter empty values - model-view-controller

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: ""
}
});
});

Related

Problem with WebDataRocks Pivot Table captions in rows, columns, measures

I have 3 questions about captions (data localizations):
How to provide caption for a field not included in slice object
Why are captions ignored in: toolbar -> fields -> all fields -> any measure field
Why are captions ignored while adding calculated value: toolbar -> fields -> add calculated value -> any row or column field
Check out this js fiddle
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
"slice": {
"rows": [{
"uniqueName": "Category",
"caption": "Category_Localized"
}
],
"columns": [{
"uniqueName": "Color",
"caption": "Color_Localized"
}],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum",
"caption": "Price_Localized"
}
]
}
}
});
It seems like all these features are currently not working as expected.
As a workaround to the first question though you can simply change the field names in the CSV file you're feeding to the pivot table.

Hide All/Grand Total Row and Column From Kendo UI PivotGrid

I am currently working with a Kendo UI PivotGrid. I ran into an issue where I do not want to display the "All" column. This is the Grand Total column that contains some aggregates of the data in your grid. The screenshot shows only the "All" column but there is another additional row at the very bottom with aggregate data. In code it is referred to as "measures" of the grid. I do not want to view these summations but when I remove the "aggregate" property from the measures the grid does not populate. Does anyone know of a way to hide this aggregate column and row? Here is the JavaScript code that I am using to initialize this grid as well as a screenshot:
var pivotgrid = $(divid).kendoPivotGrid({
dataSource: {
data: result,
schema: {
cube: {
measures: { "Data": { field: "Data", format: "{0:n6}", aggregate: "sum" }
}
}
},
columns: [{ name: "Date", expand: true }],
rows: [{ name: "AcctCd", expand: true }],
measures: ["Data"]
}
}).data("kendoPivotGrid");

Kendo UI Diagram ShapeDefaults Content Template

Can we use a kendo Template in the shapeDefaults Content template part in below code?
$("#diagram").kendoDiagram({
dataSource: [{
"name" : "Telerik",
"items": [
{"name": "Kendo", "items": [{"name": "Kendo", "items":[{"name":"abc"}]}]}
],
}],
shapeDefaults: {
content:{template: "#=item.name#"}, //Need to use a kendo template here
editable: true
}
});
Your code is correct but there is a bug in the Kendo code; the content visual is not added on redraw when using templates.
You can wait for next release or simply add it in the redrawVisual method, it should be;
redrawVisual: function() {
this.visual.clear();
this.shapeVisual = Shape.createShapeVisual(this.options);
this.visual.append(this.shapeVisual);
this.visual.append(this._contentVisual);
this.updateBounds();
}

How to perform case-insensitive sort in Kendo Tree view?

I am using the below code to sort the value of the tree, it seems like the sorting happens based on CASE.
I am trying to figure out a way to perform case insensitive sorting, can someone please help me?
if(sortValue == 'Ascending') {
$("#groupTree").data("kendoTreeView").dataSource.sort({ field: "text", dir: "asc" });
} else if(sortValue == 'Descending') {
$("#groupTree").data("kendoTreeView").dataSource.sort({ field: "text", dir: "desc" });
}
Even that your question says "sort in Kendo Tree View" it actually refers to Kendo DataSource.
Said so, it is not supported BUT in KendoUI forums there is solution that might work. Check it here
Just thought of listing a sample code to help others who are in search of a work around to perform case-insensitive sorting when using Kendo datasource.
var homogeneous = new kendo.data.HierarchicalDataSource({
data: [{
"id":"1237",
"text":"b",
"encoded":false,
"items":[{
"id":"234",
"text":"b1",
"encoded":false,
"items":[{
"id":"456",
"text":"se",
"encoded":false,
"items":[{
"id":"567",
"text":"BB",
"encoded":false
}]
}]
}]
}, {
id: 1,
// lowercase foo should be after 'text:b' in case-insensitive sort
text: "foo"
}],
schema: {
parse: function(data) {
for (var i = 0; i < data.length; i++) {
data[i].lowerText = data[i].text.toLowerCase();
}
return data;
},
model: {
id: "id",
children: "items"
}
},
sort: { field: "lowerText", dir: "asc" }
});
$("#tree").kendoTreeView({
dataSource: homogeneous
});

Filter jqGrid programmatically on client?

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?

Resources