This is a migrated thread and some comments may be shown as answers.

[Solved] How to invoke datasource read of kendo dropdownlist within grid from its own cascade event

1 Answer 208 Views

Grid

This is a migrated thread and some comments may be shown as answers.

moonolite asked on 24 Nov 2014, 02:07 PM

I am using kendo HTML v2013.1.226 and I have a dropdownlist inside the grid.I need to invoke datasource read method for that dropdown from the cascade event of the same dropdown.Is it possible using 'this' keyword.A sample code works well in Kendo Dojo test page but same code gives this error in my application on eclipse.In this example catogary field is the dropdown. "Uncaught TypeError: Cannot read property 'data' of undefined kendo.all.min.js:11" Any suggestion.I am using kendo HTML v2013.1.226 and I need to stick with this version and cant update to new version :(.Thanks in Advance

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/grid/editing-custom">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

</head>

<body>

<script src="../content/shared/js/products.js"></script>

<div id="example">

<div id="grid"></div>

<script>

var url;

var url1="http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories";

$(document).ready(function () {

var dataSource = new kendo.data.DataSource({

pageSize: 5,

data: products,

autoSync: true,

schema: {

model: {

id: "ProductID",

fields: {

ProductID: { editable: false, nullable: true },

ProductName: { validation: { required: true } },

Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },

UnitPrice: { type: "number", validation: { required: true, min: 1} }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 350,

toolbar: ["create"],

columns: [

{ field:"ProductName",title:"Product Name" },

{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },

{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },

{ command: "destroy", title: " ", width: "150px" }],

editable: true

});

function onSelect(e) {

// console.log("DDD");

};

function categoryDropDownEditor(container, options) {

$('<input id="catId" required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

cascade:function(e){

// onSelect(options.model)

var g=JSON.stringify(options.model);

var p1=options.model;

console.log("HIFF"+g);

alert("new server request Made with parameter1 = "+p1["QuantityPerUnit"]+" and parameter2 = "+p1["ProductName"]);

//the next line shows ERROR in my Application

$("#catId").data("kendoDropDownList").dataSource.read({eer:p1["QuantityPerUnit"],rrf:p1["ProductName"]});

},

dataSource: {

type: "odata",

transport: {

read: url1

}

});

}

</script>

</div>

[Solved] How to invoke datasource read of kendo dropdownlist within grid from its own cascade event

1 Answer, 1 is accepted