kendo grid maximum call stack exceeded error - javascript

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?

Related

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

Error while inserting an item into the dataSource using kendo ui library

I am trying to insert a new item into an existing kendo ui table but I get nothing displayed. DataSource is charged from an ajax request. Here in the definition of my kendo ui table
var baseUrl = '/SMART/api/Build/GetAll';
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: baseUrl,
dataType: "json",
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 15
});
$("#listGrid").kendoGrid({
dataSource: dataSource,
pageable: true,
reorderable: true,
resizable: true,
sortable: true,
filterable: {
mode: "row"
},
columns: [
{
filterable: {
cell: {
enabled: true,
showOperators: false,
operator: "contains"
}
},
field: "Name",
title: "Name"
},
{
filterable: {
cell: {
enabled: true,
showOperators: false,
operator: "contains"
}
},
field: "Type",
title: "Type"
},{
filterable: {
cell: {
enabled: true,
showOperators: false,
operator: "contains"
}
},
field: "ToBeDisplayed",
title: "To be displayed",
template: "<input name='ToBeDisplayed' type='checkbox' data-bind='checked: ToBeDisplayed' #= ToBeDisplayed ? checked='checked' : '' # class='build-tobedisplayed-checkbox'/>"
},
]
})
Here is the code of the insertion
var grid = $("#listGrid").data("kendoGrid");
grid.dataSource.insert({ Name: "6.03", Type: "WIP", ToBeDisplayed: true });
The issue is a simple one.
The insert command also requires an index position as part of the insert ie:
this
grid.dataSource.insert({ Name: "6.03", Type: "WIP", ToBeDisplayed: true });
would be
grid.dataSource.insert(1,{ Name: "6.03", Type: "WIP", ToBeDisplayed: true });
as per the documentation link. datasource insert
if you want to add a new item to the datasource collection then use the add method instead.
datasource add

How to set Kendo editor as cell template?

Requirement 1:
I need the user to the ability to edit content of the grid all the time, meaning as a template, the user should not be required click on the field and then the editor appears.
Requirement 2: I want a kendo editor for the user to enter/edit values.
The following is what I tried, since I don't know how to do this using template I tried out using editor
Grid setup:
dataSource: {
data: $scope.planOverviewModel,
sort: {
field: "TermName",
dir: "asc"
},
schema: {
model: {
fields: {
TermName: { type: "string", editable: false },
InNetwork: { type: "string", editable: true },
OutNetwork: { type: "string", editable: true }
}
}
},
},
columns: [
{ field: "TermName", title: "Term" },
{
field: "InNetwork",
title: "In-Network",
editor: $scope.setupTextBox
},
{
field: "OutNetwork",
title: "Out-Network",
editor: $scope.setupTextBox
}
],
editable: true,
change: function (e) {
console.log("changed");
if (e.action == "itemchange") {
this.sync();
}
}
Editor setup:
$scope.setupTextBox = function(container, options) {
$('<textarea class="form-control" type="text" data-bind="value:' + options.field + '"> </textarea>')
.appendTo(container).kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
};

Drop-down in kendo-ui not retrieving data

I am working on the test project where i fill dropdown list from web api...
Using ThisDemo as it is....
This all worked fine one time and now it consistently showing console error which i have stated at the end of question...
I am sure there is problem only in targeting template
{template: "#=Status.StatusName#"}
...i am not sure if this is the right way....but when i remove this code part error disappears but dropdown show undefined instead of StatusName...
The view code (i have used selected 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: { defaultValue: { StatusID: 1, StatusName: "Completed" } },
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: "180px", editor: statusDropDownEditor, template: "#=Status.StatusName#" },
{ 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-text-field="StatusName" data-value-field="StatusID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
Uncaught TypeError: Cannot read property 'StatusName' of
null(anonymous function) #
VM1415:1pt.ui.DataBoundWidget.extend._rowsHtml #
kendo.all.min.js:31pt.ui.DataBoundWidget.extend._renderContent #
kendo.all.min.js:32pt.ui.DataBoundWidget.extend.refresh #
kendo.all.min.js:32b.extend.proxy.b.isFunction.i #
jquery.min.js:3i.extend.trigger # kendo.all.min.js:9ht.extend._process
# kendo.all.min.js:11ht.extend.success #
kendo.all.min.js:11ht.extend.read.n._queueRequest.n.online.n.transport.read.success
# kendo.all.min.js:11pt.extend.read.n.success #
kendo.all.min.js:11b.Callbacks.c #
jquery.min.js:3b.Callbacks.p.fireWith # jquery.min.js:3k #
jquery.min.js:5b.ajaxTransport.send.r # jquery.min.js:5
If someone have any idea please help, any kind of help will be appreciated thanks for your time
The problem is linked to the data returned by the odata service. The data looks like this:
ProductID : 1,
ProductName : "Chai",
SupplierID : 1,
CategoryID : 1,
QuantityPerUnit : "10 boxes x 20 bags",
UnitPrice : 18.0000,
UnitsInStock : 39,
UnitsOnOrder : 0,
ReorderLevel : 10,
Discontinued : false,
Category : {
CategoryID : 1,
CategoryName : "Beverages",
Description : "Soft drinks, coffees, teas, beers, and ales"
}
As you can see, there's no Status in the data returned by the odata service. A missing field (like Status) will be parsed as an undefined value. However, if you try to get a property of that undefined object (like your template does), you end up with an error because you can't do undefined.undefined.
As a side note; defaultValue ain't supported by the kendo model.

Categories