We Keep Coding

Kendo Grid - pass over edited values in button click

Im relatively new to javascript/jquery so forgive me if this sounds like a silly question.
I have a Kendo UI grid which is bound to a url from a controller method. This all works fine, but I want the user to be able to change the value on some of the fields. I have enabled the 'editable' flag on the table itself to allow these values to be changed, but when the button is clicked, it passes over the original value instead of the updated ones. Am i missing something simple?
<div id="productlist-grid"></div>
<script>
$(function() {
$("#productlist-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "#Html.Raw(dataUrl)", type: "POST", dataType: "json", data: additionalData }
},
schema: { data: "Data", total: "Total", errors: "Errors" },
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(gridPageSizes)]
},
editable: true,
scrollable: false,
columns:
[
{ field: "ProductPictureUrl", title: "Picture", template: '<img src="#=ProductPictureUrl#" />', width: 100, editable: false },
{ field: "ProductName", title: "Product Name", editable: false },
{ field: "ProductSku", title: "Sku", editable: false},
{ field: "Quantity", title: "Quantity", type: "number"},
{ field: 'SplitPack', title: 'Split Pack', template: kendo.template($("#template").html())},
{ field: "AddToCart", title: "", template: 'Add To Cart', editable: false}
]
});
});
</script>
Many Thanks in advance!!

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"
}
}
}
});
}

Dropdown field select/returns null kendo ui grid - mvc

I am working on kendo ui grid, the dropdown fills with the data from api call.....
The problem is,
selected item value is not passing to viewModel or passing null value
I am doing something terrible, please help...thanks for your time:)
Script
...
schema: {
model: {
id: "ProjectId",
fields: {
ProjectId: { editable: true, nullable: false, type: "number" },
ClientId: { editable: true, nullable: false, type: "number" },
Name: { editable: true, nullable: true, type: "string" },
// Status: { editable: true, nullable: true, type: "string" },
Status: { editable: true, nullable: true, type: "string", defaultValue: { StatusId: "NotCompleted"}},
IsActive: { editable: true, nullable: false, type: "boolean" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: ["create"],
scrollable: false,
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Name", title: "Project Name", width: "170px" },
//{ field: "Status", title: "Status", width: "110px" },
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ field: "IsActive", title: "Active", width: "50px" },
{ command: "", template: "<a href='Project/Task'>Manage Task</a>", width: "30px", filterable: false },
{ command: "", template: "<a href='Project/Setting'>Setting</a>", width: "30px", filterable: false },
{ command: ["edit", "delete"], title: " ", width: "80px" }
],
editable: "popup"
});
function statusDropDownEditor(container, options) {
$('<input required data-value-field="StatusID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "/api/dropdown/GetProjectStatus"
}
}
});
}

have you add the
dataTextField: "name",
dataValueField: "id"
?

How to rearrange KendoGrid Tab Order?

I'm using a KendoGrid and doing a inline batch edit. Only a select few columns are editable. When hit tab the next column selected but it is not the next editable column. Is there a way to control the tab order in a KendoGrid? How would I make the tabs skip columns that are not editable?
My Mark-UP:
<div id="employeeGoalsGrid"></div>
My Javascript:
var goalsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/MVC/ResearcherPoints/GetEmployeeResearchers',
type: 'POST',
contentType: 'application/json'
},
update: {
url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
type: 'POST',
contentType: 'application/json'
//dataType: "jsonp"
},
parameterMap: function (options, type) {
debugger;
$.extend(options, { ID: options.id });
return JSON.stringify(options);
}
},
batch: false,
schema: {
model: {
id: 'ID',
fields: {
id: { editable: false, nullable: false },
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false, nullable: true },
TeamName: { editable: false, nullable: true },
PointsGoal: { type: "number", nullable: true, validation: { required: false, min: 1 } }
}
}
},
sortable: true,
filterable: true,
columnMenu: true
});
$('#employeeGoalsGrid').kendoGrid({
dataSource: goalsDataSource,
navigatable: true,
sortable: true,
resizable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "FirstName", title: "First Name", width: 200},
{ field: "LastName", title: "Last Name", width: 200 },
{ field: "Title", title: "Title", width: 200 },
{ field: "TeamName", title: "Team", width: 200 },
{ field: "PointsGoal", title: "Goal", width: 200 }],
editable: true,
filterable: true,
});
Any suggestions would be greatly appreciated.

To skip cell you need to use tabindex="99999"
I created a jsfiddle for testing purposes: http://jsfiddle.net/danieltulp/kfG7y/
I think you need to look at using attributes: { tabindex: "999999" } in
{ field: "UnitsInStock", title: "Units In Stock", width: 110, attributes: { tabindex: "999999" } }
but this doesn't seem to work. Anyone a better idea?
Perhaps this just isn't possible?

Can you try changing the editable property on the grid options from true to "inline" and let me know if that fixes the issue? I've created a similar scenario in this JSBin and the tab order works fine (Chrome on OSX) when I edit a row.