We Keep Coding

Kendo grid dropdownlist issue

I'm using a custom template on one of the column in my kendo grid. Everything is fine, when data retrieve, the dropdownlist show correct value. However when i click on edit command, the row become edit mode and the dropdownlist doesn't show its value. Only when i click on the dropdownlist, the item show selected. What I want is it show out the text when its in edit mode.
Before click edit
After click edit
My code:
function customDdlEditor(container, options) {
$('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')//data-text-field="text" data-value-field="value" data-bind="value:fieldType"
.appendTo(container)
.kendoDropDownList({
autobinds: false,
dataTextField: "text",
dataValueField: "value",
dataSource: ddl
});
}
var ddl = [{ text: "Text", value: "Text" },
{ text: "Date", value: "Date" },
{ text: "Number", value: "Number"}];
var Grid = $("#grid").kendoGrid({
dataSource: fieldDataSource,
columns: [
...
{ field: "type", title: "Type", editor: customDdlEditor, template: "#= type #" },
...
,
noRecords: true,
}).data("kendoGrid");
var fieldDataSource = new kendo.data.DataSource({
data: gridData,
pageSize: 50,
schema: {
model: {
id: "name",
fields: {
...,
type: { field: "type"},
...
}
}
}
});
Anyone know how to solve this?

If you make your drop down autoBind: true should work.
function customDdlEditor(container, options) {
$('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')//data-text-field="text" data-value-field="value" data-bind="value:fieldType"
.appendTo(container)
.kendoDropDownList({
autobinds: true, // <-- auto bind true instead
dataTextField: "text",
dataValueField: "value",
dataSource: ddl
});
}

kendo grid maximum call stack exceeded error

Issue
I am trying to simply pass an array of objects into kendo.data.HierarchicalDataSource to which then I set that DataSource to the DataSource of my kendo grid.
I keep receiving Maximum Call Stack Exceeded error when i try and do this and was wondering how to debug the issue.
Code
So when the user clicks the Open button it will trigger an event that will populate create the DataSource and will populate it like below:
var pDataSource = new kendo.data.HierarchicalDataSource({
page: 1,
data: session.UserDetails.Routes,
schema: {
model: {
hasChildren: "Routes",
fields: {
guid: { type: "string" },
description: { type: "string" },
created: { type: "string" }
}
}
},
pageSize: 50,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
filter: { field: "id", operator: "neq", value: "0" }
});
session.UserDetails.Routes array looks something like:
Then I simply set the DataSource on my kendoGrid to the DataSource that I have just created above:
$("#routeGrid").kendoGrid({
dataSource: pDataSource,
filterable: true,
scrollable: true,
sortable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [{
field: "description",
title: "Title"
},
{
field: "activityTypeDesc",
title: "Activity"
},
{
field: "created",
title: "Created",
template: "#= kendo.toString(kendo.parseDate(created, 'yyyy-MM-dd'), 'dd/MM/yyyy' ) #"
},
{
command: [
{
name: "Open",
template: "<div class='k-button grid-button'><i id='img_Open' class='fa fa-folder-open' aria-hidden='true' onclick='getGridGuidOpen(this)'></i></div>",
click: getGridGuidOpen
},
{
name: "Sync",
template: "<div class='k-button grid-button'><i id='img_Sync' class='fa fa-refresh' aria-hidden='true'></i></div>",
click: getGridGuidSync
},
{
name: "Delete",
template: "<div class='k-button grid-button'><i id='img_Delete' class='fa fa-times' aria-hidden='true' onclick='getGridGuidDelete(this)'></i></div>",
click: getGridGuidDelete
}]
}]
});
So whenever the user clicks open again the same code will run. Can anyone see an issue with what I am doing?

Kendo DropDownList in Grid not binding until after selection

I have an editable Kendo Grid, with a field that is a dropdownlist. I have a U_UserId and U_Name field that need to be used in that column. The name obviously displays, while the ID should be what is used for binding. I've removed my datasource URLs in the example below, but the DropDownList data displays just fine, with a list of Names and ID values.
I've been looking at this for a while so it's possible I'm missing something obvious. I'm having an identical problem to this question (the dropdown doesn't bind to the user displayed in that row until I click on the dropdown to expand it), but I think my model and fields are correct so I'm not sure why I still can't get the dropdown to bind correctly.
Here is my JS for both the grid and the editor:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json-ajax",
transport: {
read: {
url: myUrl,
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
model: {
id: "OrderId",
fields: {
O_OrderNumber: {
editable: false
},
O_Date: {
editable: false, type: "date"
},
O_InvoiceNumber: {
editable: false
},
O_Status: {
editable: false
},
O_DueDate: {
editable: false, type: "date"
},
U_UserId: {
editable: true
},
U_Name: {
editable: false
},
O_VendorId: {
editable: false
},
O_TrackingNumber: {
editable: false
}
}
}
},
},
scrollable: false,
editable: true,
pageable: true,
columns: [
{
field: "O_OrderNumber",
title: "Order #",
hidden: false
},
{
field: "O_Date",
title: "Pull Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "O_InvoiceNumber",
title: "Invoice #",
hidden: false
},
{
field: "O_Status",
title: "Status",
hidden: false
},
{
field: "O_DueDate",
title: "Due Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "U_UserId",
title: "Owner",
hidden: false,
width: 130,
editor: ownerDropDownEditor,
template: "#=U_Name#"
},
{
field: "O_VendorId",
title: "Vendor",
hidden: false
},
{
field: "O_TrackingNumber",
title: "Tracking #",
hidden: false
}
]
}).data("kendoGrid");
});
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
Edit: Out of curiosity, I tried changing my dropdownlist to have both the DataTextField and the DataValueField be UserId, and the selection was made right away, but with the ID (int) value being shown instead of the Name (string).

So investigating a little further into my edit above, I found this Telerik post, which made it sound like the dropdown actually binds by an object, and not by dropdown value. There is a data-value-primitive attribute that can be added so that it binds by value. I updated my editor, and it is now behaving as expected:
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-value-primitive="true" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}

Set a Placeholder if the Value is null in KendoUI

The following Kendo grid with a dropdown. The dropdown AccountCode item is in form of an object as below;
The following is used to display the details;
function loadGrid() {
$("#grdItems").kendoGrid({
dataSource: itemDS,
pageable: {
refresh: false,
pageSizes: false
},
aggregate: [{ field: "Amount", aggregate: "sum" }],
columns: [ {
field: "CostCenter",
title: "Cost Center",
editor: costCenterDropDownEditor,
template: "#:CostCenter.Description#"
}, {
field: "AccountCode",
title: "Account Code",
editor: accountDropDownEditor,
template: "#AccountCode.AccountDescription#"
}, {
field: "Description",
}, {
field: "BillNumber",
title: "Bill Number",
},
{
field: "Amount",
format: "{0:n}",
footerTemplate: "Sum: #= kendo.toString(sum, 'n')#"
},
{ command: [{ name: "edit", text: "MODIFY" }], title: " ", width: "120px" }],
editable: "popup"
});
}
and it looks like this when displayed;
How can I insert a placeholder when the dropdown object is empty as shown in the first image? Tried the usual placeholder tag, but it doesn't seem to work.
EDIT: Code added

I'm pretty sure those strings are just javascript code.
"#:CostCenter.Description.length > 0 ? CostCenter.Description : 'placeholder'#"

How to get checked rows from kendo grid?

I'm trying to use checkbox with every row & then get those row's values, which are checked. this checkbox column is not representing any field in datasource. Here is my Grid:
var SeparatedEmployeeList = $("#SeparatedEmployeeList").kendoGrid({
dataSource: DataSourceSeparatedEmployeeList,
pageable: true,
editable: true,
selectable: "row",
navigatable: true,
filterable: true,
sortable: true,
groupable: true,
height: '200PX',
scrollable: true,
columns: [
{ field: "SLNO", title: "SL.", filterable: false, sortable: false, width: "30px" },
{ field: "EMP_CODE", title: "Code", filterable: false, width: "70px" },
{ field: "EMP_NAME", title: "Name", filterable: true, width: "100px" },
{ field: "DIVI_NAME", title: "Division", width: "70px" },
{ field: "EMP_DESIG_NAME", title: "Designation", width: "75px" },
{ field: "JOINING_DATE", title: "Join Date", width: "60px" },
{ field: "TRMN_TYPE", title: "Separation Type", width: "85px" },
{ field: "TRMN_EFCT_DATE", title: "Effect Date", width: "60px" },
{ field: "LAST_SAL_PROS_MON", title: "Last Salary Proc. Month", width: "110px" },
{ field: "TRMN_REM", title: "Remarks", width: "60px" },
{ field: "Date", title: "Date", width: "65px" },
{ field: "check_row", title: "Submit", width: 60, onClick: test, template: "<input class='check_row' OnCheckedChanged='test' type='checkbox' />" }
]
});
I need to fire a while checking the checkbox to validate user entered data in the date field defined just before the checkbox, & later I will need to iterate through the checked rows to use their values. Please help.

I would change the last item to:
{ title: "Submit", width: 60, template: "<input class='check_row nsa-checkbox' type='checkbox' />" }
Now, using jQuery delegation I would NSA-like capture all the "change" events on every control under the DIV grid, having the css class "nsa-checkbox":
$('#SeparatedEmployeeList').on('change', '.nsa-checkbox', function(e){
// "this" is your checkbox
var myCheckbox = $(this);
// To get the item, you must access the data-uid attribute in the row that wraps the checkbox.
var myDataItem = DataSourceSeparatedEmployeeList.getByUid(myCheckbox.closest('tr').attr('data-uid'));
// Have fun
})

If you later want to iterate through the checked rows in controller you can use
postUrl = '#Url.Content("~/Billing/CustomerAccountManage/AccountsManagerTransferResponsiblityAction")';
paramValue = JSON.stringify(
{
'pEmpID1': gEmpID1
, 'pEmpID2': gEmpID2
, ManagerList: gridData // passing the grid value in controller as parameter
});
$.ajax({
url: postUrl,
type: 'POST',
dataType: 'json',
data: paramValue,
contentType: 'application/json; charset=utf-8',
success: function (result) {
console.log(result);
},
error: function (objAjaxRequest, strError) {
var respText = objAjaxRequest.responseText;
console.log(respText);
}
});
you can also see this