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");
Related
I have a geojson file with a collection of points:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Point one",
},
"geometry": {
"type": "Point",
"coordinates": [13,52]
}
},...
By default those points are displayed as a standard location marker.
$("#map").kendoMap({
center: [52, 13],
zoom: 10,
layers: [{
type: "shape",
dataSource: {
type: "geojson",
transport: {
read: function(e) {
e.success(myPoints);
}
}
}
}]
});
});
But I want to display the points as bubbles. Searching for; how to display geojson data with kendo ui, then I only find tutorials of layer type: shape in combination with geojson polygons. If I read the kendo ui tutorials for type bubble, then there is a value field to define the radius, which is not defined in geojson data. How to edit the standard marker display of geojson points? Or how to setup the properties of a bubble layer with respect to a geojson data input?
Through the layerDefaults.marker.shape you can customize the marker and even set a custom icon for the marker, as shown here.
To show bubbles with different size add a bubble layer. Here is a dojo with a GeoJSON map and a bubble layer, with the bubble diameter being based on population value.
Edit:
The bubble layer expects data in the following format
[
{
"City":"City A",
"Country":"USA",
"MyValueField":123456789,
"MyLocationField":[
45.2,
24.33
]
},
{
"City":"City B",
"Country":"USA",
"MyValueField":123456789,
"MyLocationField":[
34.47,
95.28
]
}
]
If the endpoint returns the data in a different format you can use the schema.parse function to parse the response in the expected format:
{
type: "bubble",
dataSource: {
transport: {
read: {
url: "https://get/my/data",
dataType: "json"
}
},
schema: {
parse: function(response) {
// parse response to match expected format
return response;
}
}
},
locationField: "MyLocationField", //The Map accepts a [Latitude, Longitude] format for its locations field
valueField: "MyValueField"
}
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.
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 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
});
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?