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
Related
I've used the hierarchical kendo for showing my data, I mean each row has a child which contains a grid of rows' details,my kendo should appear based on the data that user enter in inputs and after click on a button , it works well for the first time but if user change the inputs' data and click the button again, the kendo does not show the grid of details it just show me my parent grid but if the user refresh the page and then change the data and click the button it works fine. after a lot of search I couldn't find the reason.can anyone help me
var grid;
var createGrid = function () {
grid = $("#mygrid").kendoGrid({
dataSource: {
data: schema.PNR_item,
schema: {
hasChildren: true,
model:{
fields:fields,
}
},
pageable: true,
height: 550,
pageSize: 6,
serverPaging: true,
serverSorting: true,
//columns
},
height: 600,
sortable: true,
pageable: true,
scrollable: true,
resizable:true,
columns: columns,
detailTemplate: '<div class="grid" ></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.Details,
columns: details_columns,
schema:{
model:{
fields: details_fields
}
}
});
},
}).data("kendoGrid");
}//end of createGrid function
createGrid();
I am loading a Kendo UI grid with virtual scrolling option on and for un-identified reasons when I scroll down when inside the grid infinite hits are made to the get grid data method.
My page also has angular JS.
The page number is always sent as one, but it should at least be incremented to two.
Grid has been defined as following:
dataSource: {
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
transport: {
read: URL
},
schema: {
data: function(data) {
/* Few business filter operation done here */
return data.Items;
},
total: function(data) {
if (data.Items != null && data.Items.length > 0) {
// Every record of the current data set has total employees count
// Thus returning the first value
return data.Items[0].totalEmployees;
}
return 0;
},
scrollable: {
virtual: true
},
sortable: true,
columns: columns,
dataBound: function(arg) {
/* few more business operations */
},
scrollable: {
virtual: true
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
editable: {
'mode': 'inline',
'createAt': 'top'
},
Image showing infinite hits:
I was loading the kendo.all.js file more than once, precisely thrice. I made sure it only loads once and the issue is gone.
I am using Kendo UI's Grid system for a data grid, and am migrating my code to Typescript. I am loving it so far, but have hit a few snags; One of which is that the declaration for the grid seems to be a bit incomplete, even with Telerik's official Typescript definitions.
For example, this code works in javascript. However if I run this exact same code in Typescript, I am told that the toolbar property is invalid, because it is expecting a type of GridToolbarItem. I have traced GridToolbarItem down and, while I do find the interface for it, I cannot seem to actually declare or create it, thus I am not being allowed to create a toolbar for my grid!
elements.grid = $('#grid').kendoGrid({
dataSource: {
transport: {
read: {
url: "/administrator/data/items",
dataType: "json",
type: 'GET',
cache: false
}
},
schema: {
total: "total",
data: "data"
},
page: 0,
pageSize: 15,
take: 15,
serverPaging: true,
serverFiltering: true,
type: "aspnetmvc-ajax"
},
toolbar: kendo.template($("#search-byName").html()),
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
columns: [
{
field: "Id",
width: 25,
title: "Identity"
},
{
field: "Name",
width: 40,
title: "Name",
template: "<div class='#: Quality.CSS #'>#: Name #</div><div>#: (Origin.Label != null) ? Origin.Label : '' #</div>"
}
],
change: function (e) {
// do some stuff when an item is selected
},
}).data("kendoGrid");
TypeScript's type system is different from that of Java or C# in that it's the shape of the type that matters, not the names in the class hierarchy. I like to think of it as a contract. The contract says you have to have certain things and it doesn't matter why you have them or if you have more.
Here's a lame example I cooked up:
interface BagOfStuff {
anum: number;
astring: string;
anany: any;
}
function processBag(bag: BagOfStuff): void { }
var aBag = {
anum: 5,
astring: "foo",
anany: {},
bonusThing: "bar"
};
processBag(aBag); // works
aBag never said it was of type BagOfStuff, but it satisfies all the requirements of one so I can pass it into processBag and that will work.
take a look at these 2 fiddles
http://jsfiddle.net/uFcHK/
(v2013.1.319)
http://jsfiddle.net/rcvY3/
(v2013.2.716)
The code is identical.
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 15,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 450,
sortable: true,
pageable: true,
editable: true,
toolbar: ["create"],
filterable: false,
columns: ["ProductID", "ProductName", "UnitPrice"]
});
(you can ignore the the broken nav panel, I don't see this in prod)
The problem is the record count.
If you click on "Add new record" you will see the record count do a text add instead of number add. This is crazy, no idea how kendo let this slide for half a year+
The problem is with OData that return total as string since this is received as string.
In previous releases of code the increment was done as total++ but now it is being added a number allowing to add more than one record in one single operation. The problem is that if you do string + number you actually get the number concatenated to the string.
The easiest way of solving it is providing a total function that just converts the string to number something as simple as defining in the DataSource:
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
schema : {
total : function (data) {
// Convert __count to number
return +data.d.__count;
}
},
pageSize : 15,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
I am trying to implement server side sorting with kendo grid in my MVC application. but sorting option is not showing. i have double checked that i have enabled all the necessary option (made the serversorting to true to the the kendo grid data source and made the scrollable to true to the grid element) to do this but still i am able to find the sortable option. below is my kendo grid code
Kendo Grid Script
var grid = $("#grid");
grid.children().remove();
grid.kendoGrid({
columns: [{attributes:"",field:"",template:"${ResultFields[0].Value},title:"Column 1",width:"110px"},{attributes:"",field:"",template:"${ResultFields[1].Value},title:"Column 1",width:"110px"}],
resizable: true,
reorderable: true,
scrollable: true,
filterable: true,
columnMenu: true,
selectable: "row",
selectable: "multiple",
dataBound: function () { alert("Data Bound"); },
dataSource: {
transport: {
read: {
url: '#Url.Action("Index", "KendoServerSideSorting")',
type: "GET",
dataType: "json",
traditional: true,
data: {
itemTypeId: 1,
where: values,
orderBy: ["", "", ""],
},
},
},
schema: {
data: "Items",
total: "TotalItems",
},
serverPaging: true,
pageSize: 10,
error: function (e) {
alert(e.errors);
}
},
pageable: {
pageSize: 10,
input: true,
pageSizes: [10, 20, 30, 50, 100, 250],
},
change: function () { alert("Change event"); },
})
Controller Action will look like this
public JsonResult Search(int itemTypeId, int skip, int take, string[] where, string[] orderBy)
{
var v = Kernel.Get<IItemSearch>().Search(itemTypeId, skip, take, where, orderBy);
return Json(v, JsonRequestBehavior.AllowGet);
}
*Can anyone help me to resolve this issue. *
You can use the helper functionality from KendoGridBinderEx to parse all the commands (like filter and sort) and do the filtering and sorting at the server-side automatically using DynamicLinq.
See this project : https://github.com/StefH/KendoGridBinderEx for some examples.Also available as NuGet package : https://www.nuget.org/packages/KendoGridBinderEx/