I have a Kendo UI grid. I want to display data as grouped and sorted, but seems that doesnt work. In my dataSource i have
serverPaging: true,
serverSorting: true,
serverFiltering: true,
group: {
field: "ApplicationName",
dir: "desc"
},
sort: {
field: "VersionTo",
dir: "desc"
},
Grouping works...But data is not sorted.
If i remove group property then i get data sorted but not grouped.
From a google search i see that serverGrouping is not enabled, so grouping happen on client-side and change sorting. But if i add in my configuration "serverGrouping: true," i get this error "Uncaught TypeError: Cannot read property 'length' of undefined".
How can integrate grouping and sorting?
Related
I am creating a kendo grid that is built out by calling an remote data source. I have enabled grouping, which works as expected, but I would like to default grouping and leave the user the option of adding/changing the groupings. I added the group parameter to the data source and this adds the desired group by default, but it also causes all column headers to disappear which prevents the end user from having the ability to add/change the groupings and also makes it a bit harder to read the displayed data. Google has failed me, so I submit myself to the mercy of stack overflow.
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://localhost:44387/api/values",
dataType: "json"
}
},
pageSize: 8
,group: { field: "State" }
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
groupable: true,
sortable: true,
pageable: {
pageSize: 5,
buttonCount: 10,
pageSizes: true
},
excel: {
allPages: true
},
pdf: {
allPages: true,
landscape: true
},
selectable: {
mode: "multiple, row"
},
reorderable: {
columns: true
},
dataSource: remoteDataSource,
height: 800,
width: 2000
});
</script>
Without default grouping:No Default Group
With default grouping: With Default Group
The reason is because you're allowing the grid to implicitly create the columns. If you explicitly define them, then they will show up.
See this example with the implicit column definition: https://dojo.telerik.com/AMucoVav versus this example with the explicit column definitions: https://dojo.telerik.com/EjeGeHAJ
Is it possible to call an API while typing filters in kendo grid or can we add pagination in filters itself.
We have around 5000000 filters,and we are populating data for only 5 filters,If the user wants any other filter,he can type in kendo text box and then we can make api call and show data for all related filters.
I am trying keydown event,but this will close grid and user need to enter again
Sample :
$('body').on('keydown', '.k-textbox','#grid' ,function (event) {
var grid=$('#grid').data("kendoGrid");
grid.setOptions({
columns: [{
field: "ProductName",
title: "Product Name",
filterable: {
mode: "menu,row",
multi: true, search: true,
dataSource:
[{ "ProductName": "abc" }, { "ProductName": "bh" }, { "ProductName": "li" }]
}}]
});
I am using kendo Grid. When i am filtering with combo box on a column, then the filtering working but the filtering cross button right side of the filter button is not showing.To see this i need to drag column of the grid. How can i see the cross button when i am filtering.
{
field: "BranchId",
type: "number",
title: "Branch",
width: "200px",
editable: true,
nullable: true,
hidden: false,
values: Branches,
},
Try to give a custom width size to the columns
I'm creating a stacked bar chart and almost everytime, the bars on my chart are overflowing.
I'm not sure what could be causing this, I found that people had issues with sorting data source in chrome but this is not specific to chrome. Sometime depending on the default sort I set, it would show up correctly, but if I changed the sorting, it would go back to messed up. On top of this, sometime the values are interchanged but if I checked the datasource.data(), it would still be okay.
I tried calling redraw, refresh on the chart, read on the datasource, I'm a bit lost here
Thanks for any help!
http://jsfiddle.net/2mMMC/
$(document).ready(function () {
var data = {
data: [{"name":"R-24","series":"Moving","Idle":0,"Moving":1396,"Stopped":0,"count":"0.39"},
{"name":"R-25","series":"Moving","Idle":0,"Moving":6795,"Stopped":0,"count":"1.89"},
{"name":"P-24","series":"Moving","Idle":0,"Moving":2622,"Stopped":0,"count":"0.73"},
{"name":"RF-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":796,"count":"0.22"},
{"name":"RF-25","series":"Stopped","Idle":0,"Moving":0,"Stopped":27024,"count":"7.51"},
{"name":"P-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":26430,"count":"7.34"}
],
group: [{
field: 'series'
}],
sort: [{
field: "series",
dir: "asc"
}]
};
$("#chart").kendoChart({
dataSource: data,
series: [{
field: 'count',
stack: true,
type: 'bar'
}],
categoryAxis: [{
field: 'name'
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
});
I have used Kendo grid, I need to select a row without command columns.
Here is my code..
var grid = $("#grid").kendoGrid({
dataSource: grid,
height: 450,
sortable: true,
selectable: "row",
columns: [
{ field: "user" },
{ field: "subject" },
{ field: "status" },
{ command: ["Update"], title: "Subscribe" },
{ command: ["destroy "], title: "Delete"}
]
});
In UI I want to select user, subject, status only.
Not possible out-of-the box, however when you use the select() method you will receive only the data cells.
If you need it really badly you might use the change event of the Grid and search for selected command cells to remove their k-state-selected class.