Develop Reference

Kendo ui gives an empty data

hi guys look at my code see where is the problem. the problem is that kendo ui showing no data to me, but this will happen after template. and part of url is my controller that works fine but like i said the problem happen from template and says browser can identify 'id'. so i would happy anyone can help me and new with javascript and jquery!
here is my code:
$("#my-grid").kendoGrid({
dataSource: {
type: "Data",
transport: {
read: {
url: '/News/LoadNews',
dataType: 'json',
type: 'GET'
},
},
pageSize: 20,
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
},
columns: [
{
field: "news_title",
title: "عنوان",
},
{
field: "author_name",
title: "نویسنده",
},
{
field: "news_write_date",
title: "تاریخ",
},
{
title: "عملیات",
template:'#= editNewsButton(Id) #'
},
],
});

Date formating in handson table

I am using handson table lib in my angular project. have a date column and i want the dates to be formatted like that DD/MM/YYYY at the init of the table but unfortunately nothing is happened and even when i call afterRender() in angular's hooks(after view init and after view checked ) it tolds me cannot render of undefined so it's like the table is undefined at this time.
So what is the sollution for that?
this is afterRender method
private afterRender( ) {
console.log("rendere")
this.hotRegisterer.getInstance(this.idTableau).render();
this.hotRegisterer.getInstance(this.idTableau).validateCells();
}
this is my settings
hotSettings: Handsontable.GridSettings = {
height: MajStockComponent.HANDSON_TABLE_HEIGHT,
width: MajStockComponent.HANDSON_TABLE_WIDTH,
stretchH: 'all',
rowHeaderWidth: MajStockComponent.HANDSON_TABLE_ROW_HEADER_WIDTH,
colWidths: MajStockComponent.HANDSON_TABLE_COL_WIDTH,
colHeaders: MajStockComponent.HANDSON_TABLE_IS_COL_HEADER,
licenseKey: ConstantesNuc.LICENCE_KEY_TABLE_HANDSOME_TABLE,
language: ConstantesNuc.HANDSOME_FR,
columns: [
{
data: "code",
type: 'text',
readOnly: true
},
{
data: "num",
type: 'text',
readOnly: true
},
{
data: "date",
type: 'date',
readOnly: true,
dateFormat: 'DD/MM/YYYY',
correctFormat: true,
},
],
nestedHeaders: [
[{
label: '',
colspan: 3
}],
['Code ', 'Num ', 'Date']
],
afterLoadData: (bool) => {
this.afterRender();
},
}

Hi you have make to custom cell render for your date cell.
columns: [
{
data: "code",
type: 'text',
readOnly: true
},
{
data: "num",
type: 'text',
readOnly: true
},
{
data: "date",
type: 'date',
readOnly: true,
renderer: function(instance, td, row, col, prop, value, cellProperties) {
dateCell = value, // format your date value with custom pipe.
return dateCell;
}
},
],

Editable hierarchical grid in Kendo UI

I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
You can find the demo here: http://dojo.telerik.com/UqURE
Can you please help with this issue?
Thanks!
var outerDataSource= new kendo.data.DataSource({
schema: {
model: {
field1: { type: "string", validation: { required: true } },
field2: { type: "boolean", validation: { required: true } },
field3: { type: "string", validation: { required: true } }
}
}
});
$("#outerGrid").kendoGrid({
dataSource: outerDataSource,
detailInit: onExpansion,
toolbar: ["create"],
columns: [
{ field: "field1", title: "field1" },
{ field: "field2", title: "field2" },
{ field: "field3", title: "field3" },
{ command: ["destroy"], title: " " }],
editable: true
});
function onExpansion(e) {
var insideDataSource= new kendo.data.DataSource({
schema: {
model: {
in1: { type: "string", validation: { required: true } },
in2: { type: "string", validation: { required: true } }
}
},
data: [{
in1: "Click to edit",
in2: "Click to edit"
}]
});
var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: insideDataSource,
width: 90,
toolbar: ["create"],
editable: true,
columns: [
{ field: "in1" },
{ field: "in2" },
{ command: ["destroy"], title: " " }]
});
};

Answer from Telerik:
Please note that operations like paging, sorting, filtering and
editing cause the Grid to rebind and reevaluate all templates inside
it (including the details). That why in order to preserve the child
Grid data between rebinds you should either save it to remove service
(link to documentation here) or add it as navigation property
collection to the parent Grid model (demo is available here).
http://www.telerik.com/forums/hirarchialy-editable-grids

Date Issue in Kendo UI when Filter Grid

When we filter Kendo datagrid, use different types of operator like eq, and, or,
gt, lt etc. that's work well in string and number. When we use date to match another date using eq operator does not work but gt,lt works.
This is my source code
dataSource: {
data: data,
schema: {
model: {
fields: {
date: { type: "date"},
id: { type: "string" },
name: { type: "number" },
account: { type: "number" }
}
}
},
sort: [ { field: "date", dir: "desc" }],
filter : [{
field: "date", operator: "eq", value: dateString
}],
pageSize: 30,
}

probably your datestring is not being read has a date, so when it goes filter it throws a error.
Try to or use the format propertie in the grid
columns : [
{
field : "Date",
title : "Date",
format : "{0:dd-MMM-yyyy}",
filterable: {
ui: "datepicker"
}
}
]

KendoUI Grid row filter with dropdown for boolean

The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>

Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo