I am trying to build this dojo with the headerTemplate and the columns title and data fields under it but I am not sure what I am doing wrong I am not getting any errors so its hard to understand what is happening?
https://dojo.telerik.com/#mcdevittnccn/iNinebUm
I would suggest a bit different approach here. Problem is that your data is a complex nested object (an object with an array of objects - basically grid inside grid). Kendo data source best works with flattened data. If you can't change data you can use the kendo grid detailInit event so every object array has an inner table with data. Something like this:
$(document).ready(function () {
$("#kendogrid").kendoGrid({
dataSource: {
data: data,
pageSize: 10
},
pageable: true,
scrollable: false,
persistSelection: true,
toolbar: ["search"],
search: {
fields: ['Name']
},
sortable: true,
columns: [
{
field: "Name",
title: "Name"
}
],
detailTemplate: '<div class="grid"></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.PanelsMeetingViewModel
});
}
});
});
Example: Kendo grid detail init
Note: because of the inner table quick search will not work.
Related
I am trying to programmatically set the filter value of a Kendo Grid Custom Filter. I'm applying my new filter values like:
gridOptions.dataSource.filter = [
{
field: 'MyField',
operator: 'eq',
value: newTextValue
}
];
My field definition in the grid options look like:
{
width: '140px',
title: 'MyFieldTitle',
field: 'MyField',
filterable: getFieldFilter()
}
With the following filter:
function getFieldFilter() {
return {
cell: {
template: function (args) {
var element = args.element;
element.kendoComboBox({
dataSource: {
transport: {
read: 'api/Items'
}
},
valuePrimitive: true,
dataTextField: 'Description',
dataValueField: 'Code'
});
},
showOperators: false
}
};
}
If I apply the filter as shown above, it only works after I click the kendoComboBox in the column and click outside of it again.
My initial thought was that kendo grid would not apply the dataValueField and just set the dataTextField. When I was checking the requests kendo grid is sending to the server, I saw that it was sending to value stored in the kendoComboBox itself (text) and not the value behind it.
If I select something in the kendoComboBox from the UI, everything works just fine. But if I set it programmatically like above, it doesn't.
Do I need to refresh some kind of state to make the kendoComboBox refresh its internal value or how do I solve this issue?
EDIT:
What I'm trying to do, is getting the value of the kendoCombobox from the grid.
var currentlyAppliedFilters = grid.dataSource.filter().filters;
for (var filter of currentlyAppliedFilters) {
if (filter.field === 'MyField') {
var currentlyApplied = filter.value;
}
}
So the code above, would give me the Description property of the items in the kendoCombobox, but what I actually want to get it the Code property.
Initially when the dataSource do not have a filter, the cell filter need a option label. so that the 1st value does not appear as selected.
eg : dojo example with optionLabel
args.element.kendoDropDownList({
dataSource: args.dataSource,
optionLabel: "Select a color...",
dataTextField: "color",
dataValueField: "color",
valuePrimitive: true
});
if you you need the grid to filter when binding, a default filter should be added to the dataSource
eg: dojo example with DataSource Filter
dataSource: {
data:[ { color: "#ff0000", size: 30 }, { color: "#000000", size: 33 }] ,
filter: { field: "color", operator: "eq", value: "#ff0000" }
}
Hope this helps.
I hava a kendo grid which is set to be editable. It is working fine. all I need is to show a empty row in my grid regardless of any items present or not. This editable row should always come. for that I have searched various questions here also but none of them is working except the below:
$("#Grid").kendoGrid({
dataSource: TableDataSource,
autoBind: true,
scrollable: true,
sortable: {
allowUnsort: false
},
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: 5
},
noRecords: {
template: "No records found."
},
dataBound : function () {
var firstItem = this.dataSource.view()[0];
if (firstItem.isNew() == false) {
firstItem.isNew();
this.addRow();
}
},
editable: true,
But here the problem is that it only shows a new row if grid have atleast one record coming from database . If Grid is empty, it is not adding a row in grid.
If I remove if condition , then the grid goes into infinite loop and crashes the browser.
I also tried this in document.ready but there is no success. Grid just don't respond
$(function(){
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.insert( {} );//Not working
grid.addRow(); // Not working
});
I am binding the Combobox to a complex Object, the binding is such that ID field is available as a direct property on this object but the Text Property is coming from a child objects property.
I have been able to configure it show the values correctly, but running into problem to specify the optionLabel saying "select" not able to specify Parent.Childproperty getting runtime error (Uncaught TypeError: Cannot read property 'Childproperty' of undefined )
How can i specify Complex Objects in the Model defination and below for the empty selection ?
$('<input id="DegreeDDL" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
autoBind: true,
serverFiltering: true,
optionLabel: {
'Parent.Childproperty': "--- Select ---",
ABCD_PK: null
},
dataSource: {
transport: {
read: {
url: function (e) {
return "api/Org/XXXXXXXX?abcdPK=" + efgh;
},
dataType: "json" // <-- The default was "jsonp"
}
},
},
dataTextField: "Parent.ChildProperty",
dataValueField: "ABCD_PK"
});
Also running into similar propblem when defining model for the grid
var model = {
id: "ABCD_PK",
fields: {
Parent.Child.ChilProperty:
}
}
To answer your first question: use optionLabel as string if creating object here causes errors:
optionLabel: "--- Select ---",
Here is working JSFiddle: http://jsfiddle.net/a6Ek2/11/
To answer your second question just use dataSource.schema to parse your json for non complex object. More in this topic: How can I use nested Json to populate Kendo UI grid?. Grid official do not working with complex data objects. But if you wanna give a try you delclare only parent object in model eg:
fields: {
ABCD_PK: { editable: false },
Parent: { editable: true },
}
If you still got problem with this just update this JSFiddle and show exacly where this is. I'll try improve my answers then.
I'm using a kendo gird. When I sort my grid, It doesn't sort next page data. It is only sorted on first page. I want to sort whole data in the grid. How can I do it??
$("#ProductGrid").kendoGrid({
columns: [
{ field: "ProductID", title: 'Product Id' ,width:50},
{ field: "ProductName", title: 'Product Name' },
{ field: "Price", title: 'Price' },
],
groupable: true,
sortable: true,
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
scrollable: true,
filterable: true,
dataSource: new kendo.data.DataSource({
transport: {
read: "../api/Product/FindByPartyIDForGrid?partyID=" + PartyID
},
serverPaging: true,
serverSorting: true,
pageSize: 50,
schema: {
data: "Data",
total: "Count"
}
})
});
My server side method
[System.Web.Http.AcceptVerbs("GET", "POST")]
[System.Web.Http.HttpGet]
[ActionName("FindByPartyIDForGrid")]
public Responce FindByPartyIDForGrid(string partyID)
{
int take = httpRequest["take"] == null ? 10 : int.Parse(httpRequest["take"]);
int skip = httpRequest["skip"] == null ? 0 : int.Parse(httpRequest["skip"]);
var content = new ProductBS().FindByPartyID(Convert.ToInt32(partyID));
if (content != null)
{
return new Models.Responce(content.Skip(skip).Take(take).ToArray(), content.Count());
}
else
{
return new Responce(new Array[0], 0);
}
}
Seems like this is not a client side (kendo) issue. Kendo grid is configured correct as I can see. In your FindByPartyIDForGrid method you need to do the sorting and return relevant page correctly.
Check your server logic, If you can post it here we can have a look in to it.
EDIT
Seems like you haven't handle the sorting in the server,you have two options,
1.You can do it using Odata protpcol
2. You can do it by handling sorting yourself,
This occurs because you have enabled serverSorting. Then you should perform the sorting yourself.
If you don't bind the grid to lots items you can use client-side sorting. Simply remove the serverSorting: true option of the data source.
I'm generating a KendoUI Grid using ajax dataSource. The table is generated and by default has no class. To keep it looking uniform with the rest of the site, I'd like to add a class "interactive" to it.
$("#pending_documents").kendoGrid({
dataSource: {
transport: {
read: "/get-data?type=1"
},
schema: {
data: "data",
total: "total"
},
pageSize: 2,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
reorderable: true
},
height: 500,
filterable: {
extra: false
/*
, ui: "datetimepicker" // use Kendo UI DateTimePicker
*/
},
sortable: true,
pageable: {
pageSize: 2 },
columns: [...]
});
});
I know that I can do this using JQuery.addClass() method, run after the grid is generated, however if there a way of setting it in the grid setup/configuration?
Thanks in advance.
I guess you don't have any other choice but to use addClass(). Can't find anything on their documentation about setting a grid's(not grid column) htmlAttributes using built-it property in JS. I tried it also with no success. Unless you declare it like this (C#):
#(Html.Kendo().TabStrip()
.Name("TabStrip")
.HtmlAttributes( new { #class = "newclass"})
)
But if you really need it in JS, then you'll have to do it like this:
$("#pending_documents").kendoGrid({
dataSource: {
//code
}
}).addClass("newclass");
You can also use the TableHtmlAttributes()
#(Html.Kendo().Grid<Object>()
.Name("dataGrid").TableHtmlAttributes(new { #class = "interactive" })
The way I do it is add it to my columns in my configuration, in the attributes section. Depending on which column you want to set the class on do the following:
columns: [{ field: 'Name', title: 'Company Name', width: '250px',attributes: {
"class": "class1 class2"
}},
.
.
.
.
.
.
.]
This way all the items in the 'Name' column (in my case) have their classes set up on initialization of the grid. No need to do extra jquery to add classes. I tried that in the beginning. Doing it the jquery way (using addClass) worked until I tried to sort my columns, then the bindings broke (probably because of the magic we were doing in the implementation). After doing it the way I did above, my bindings worked even after sorting.
You can do it by defining a class in original element, You used, like:
<div id="pending_documents" class="your-class-name"> </div>