Kendo grid incell editing removes my dropdownlist when grid has editing option enabled
up vote
0
down vote
favorite
A couple days ago I had an issue with showing dropdownlists in my kendo grid, and I got them showing up now. The grid only has two columns, RoomName (which is editable) and Catalog (which has the dropdownlist).
I have the grid set up to edit in cell and I am able to edit the RooomName, but when I go over and select a value from the corresponding dropdownlist the dropdownlist dissappears and I am left with an empty text field and all the time I have that column set false for editing.
I do get an error though and it coming from the change event of the dropdownlist, and I suspect is why the dropdownlist dissappears and not sure why the error only happens when the grid can edit. The error is
Uncaught TypeError: Cannot read property 'set' of null
at init.onDDLChange (CatalogInGrid:134)
at init.trigger (kendo.all.js:124)
at init._change (kendo.all.js:29481)
at init._blur (kendo.all.js:29453)
at Object.<anonymous> (kendo.all.js:36066)
at fire (jquery-1.10.2.js:3062)
at Object.add [as done] (jquery-1.10.2.js:3108)
at init._click (kendo.all.js:36062)
at init.proxy (jquery-1.10.2.js:841)
at init.trigger (kendo.all.js:124)
and that is
dataItem.set("value", e.sender.value()); in the onDDLChange
Once I remove the editable from the grid then my dropdownlist's don't dissappear when I select a catalog, but then I can't edit the RoomName.
var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
var datasourceRooms = [{
"RoomID": 1,
"RoomName": "Master"
},
{
"RoomID": 2,
"RoomName": "Kitchen"
},
{
"RoomID": 3,
"RoomName": "Bathroom"
},
{
"RoomID": 4,
"RoomName": "Basement"
}
];
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#Grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
$(document).ready(function() {
$('#Grid').kendoGrid({
dataSource: datasourceRooms,
columns: [{
field: "RoomName",
title: "Room Name",
width: "100px"
},
{
field: "Catalog",
title: "Catalogs",
width: "125px",
template: columnTemplateFunction,
editable: false
}
],
selectable: "row",
//editable: {
// mode: "incell",
// confirmation: false
//},
editable: true,
dataBound: function(e) {
let grid = e.sender;
let items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: datasource,
dataTextField: "Catalog",
dataValueField: "CatalogID",
change: onDDLChange
});
});
}
});
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
//template: '#=Catalog#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function columnTemplateFunction(dataItem) {
var input = '<div class="dropDownTemplate"></div>'
return input
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>jquery kendo-ui kendo-grid
asked Nov 11 at 12:18
Chris
1,06952157
add a comment |
up vote
0
down vote
favorite
A couple days ago I had an issue with showing dropdownlists in my kendo grid, and I got them showing up now. The grid only has two columns, RoomName (which is editable) and Catalog (which has the dropdownlist).
I have the grid set up to edit in cell and I am able to edit the RooomName, but when I go over and select a value from the corresponding dropdownlist the dropdownlist dissappears and I am left with an empty text field and all the time I have that column set false for editing.
I do get an error though and it coming from the change event of the dropdownlist, and I suspect is why the dropdownlist dissappears and not sure why the error only happens when the grid can edit. The error is
Uncaught TypeError: Cannot read property 'set' of null
at init.onDDLChange (CatalogInGrid:134)
at init.trigger (kendo.all.js:124)
at init._change (kendo.all.js:29481)
at init._blur (kendo.all.js:29453)
at Object.<anonymous> (kendo.all.js:36066)
at fire (jquery-1.10.2.js:3062)
at Object.add [as done] (jquery-1.10.2.js:3108)
at init._click (kendo.all.js:36062)
at init.proxy (jquery-1.10.2.js:841)
at init.trigger (kendo.all.js:124)
and that is
dataItem.set("value", e.sender.value()); in the onDDLChange
Once I remove the editable from the grid then my dropdownlist's don't dissappear when I select a catalog, but then I can't edit the RoomName.
var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
var datasourceRooms = [{
"RoomID": 1,
"RoomName": "Master"
},
{
"RoomID": 2,
"RoomName": "Kitchen"
},
{
"RoomID": 3,
"RoomName": "Bathroom"
},
{
"RoomID": 4,
"RoomName": "Basement"
}
];
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#Grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
$(document).ready(function() {
$('#Grid').kendoGrid({
dataSource: datasourceRooms,
columns: [{
field: "RoomName",
title: "Room Name",
width: "100px"
},
{
field: "Catalog",
title: "Catalogs",
width: "125px",
template: columnTemplateFunction,
editable: false
}
],
selectable: "row",
//editable: {
// mode: "incell",
// confirmation: false
//},
editable: true,
dataBound: function(e) {
let grid = e.sender;
let items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: datasource,
dataTextField: "Catalog",
dataValueField: "CatalogID",
change: onDDLChange
});
});
}
});
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
//template: '#=Catalog#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function columnTemplateFunction(dataItem) {
var input = '<div class="dropDownTemplate"></div>'
return input
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>jquery kendo-ui kendo-grid
asked Nov 11 at 12:18
Chris
1,06952157
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
A couple days ago I had an issue with showing dropdownlists in my kendo grid, and I got them showing up now. The grid only has two columns, RoomName (which is editable) and Catalog (which has the dropdownlist).
I have the grid set up to edit in cell and I am able to edit the RooomName, but when I go over and select a value from the corresponding dropdownlist the dropdownlist dissappears and I am left with an empty text field and all the time I have that column set false for editing.
I do get an error though and it coming from the change event of the dropdownlist, and I suspect is why the dropdownlist dissappears and not sure why the error only happens when the grid can edit. The error is
Uncaught TypeError: Cannot read property 'set' of null
at init.onDDLChange (CatalogInGrid:134)
at init.trigger (kendo.all.js:124)
at init._change (kendo.all.js:29481)
at init._blur (kendo.all.js:29453)
at Object.<anonymous> (kendo.all.js:36066)
at fire (jquery-1.10.2.js:3062)
at Object.add [as done] (jquery-1.10.2.js:3108)
at init._click (kendo.all.js:36062)
at init.proxy (jquery-1.10.2.js:841)
at init.trigger (kendo.all.js:124)
and that is
dataItem.set("value", e.sender.value()); in the onDDLChange
Once I remove the editable from the grid then my dropdownlist's don't dissappear when I select a catalog, but then I can't edit the RoomName.
var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
var datasourceRooms = [{
"RoomID": 1,
"RoomName": "Master"
},
{
"RoomID": 2,
"RoomName": "Kitchen"
},
{
"RoomID": 3,
"RoomName": "Bathroom"
},
{
"RoomID": 4,
"RoomName": "Basement"
}
];
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#Grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
$(document).ready(function() {
$('#Grid').kendoGrid({
dataSource: datasourceRooms,
columns: [{
field: "RoomName",
title: "Room Name",
width: "100px"
},
{
field: "Catalog",
title: "Catalogs",
width: "125px",
template: columnTemplateFunction,
editable: false
}
],
selectable: "row",
//editable: {
// mode: "incell",
// confirmation: false
//},
editable: true,
dataBound: function(e) {
let grid = e.sender;
let items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: datasource,
dataTextField: "Catalog",
dataValueField: "CatalogID",
change: onDDLChange
});
});
}
});
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
//template: '#=Catalog#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function columnTemplateFunction(dataItem) {
var input = '<div class="dropDownTemplate"></div>'
return input
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>jquery kendo-ui kendo-grid
asked Nov 11 at 12:18
Chris
1,06952157
A couple days ago I had an issue with showing dropdownlists in my kendo grid, and I got them showing up now. The grid only has two columns, RoomName (which is editable) and Catalog (which has the dropdownlist).
I have the grid set up to edit in cell and I am able to edit the RooomName, but when I go over and select a value from the corresponding dropdownlist the dropdownlist dissappears and I am left with an empty text field and all the time I have that column set false for editing.
I do get an error though and it coming from the change event of the dropdownlist, and I suspect is why the dropdownlist dissappears and not sure why the error only happens when the grid can edit. The error is
Uncaught TypeError: Cannot read property 'set' of null
at init.onDDLChange (CatalogInGrid:134)
at init.trigger (kendo.all.js:124)
at init._change (kendo.all.js:29481)
at init._blur (kendo.all.js:29453)
at Object.<anonymous> (kendo.all.js:36066)
at fire (jquery-1.10.2.js:3062)
at Object.add [as done] (jquery-1.10.2.js:3108)
at init._click (kendo.all.js:36062)
at init.proxy (jquery-1.10.2.js:841)
at init.trigger (kendo.all.js:124)
and that is
dataItem.set("value", e.sender.value()); in the onDDLChange
Once I remove the editable from the grid then my dropdownlist's don't dissappear when I select a catalog, but then I can't edit the RoomName.
var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
var datasourceRooms = [{
"RoomID": 1,
"RoomName": "Master"
},
{
"RoomID": 2,
"RoomName": "Kitchen"
},
{
"RoomID": 3,
"RoomName": "Bathroom"
},
{
"RoomID": 4,
"RoomName": "Basement"
}
];
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#Grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
$(document).ready(function() {
$('#Grid').kendoGrid({
dataSource: datasourceRooms,
columns: [{
field: "RoomName",
title: "Room Name",
width: "100px"
},
{
field: "Catalog",
title: "Catalogs",
width: "125px",
template: columnTemplateFunction,
editable: false
}
],
selectable: "row",
//editable: {
// mode: "incell",
// confirmation: false
//},
editable: true,
dataBound: function(e) {
let grid = e.sender;
let items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: datasource,
dataTextField: "Catalog",
dataValueField: "CatalogID",
change: onDDLChange
});
});
}
});
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
//template: '#=Catalog#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function columnTemplateFunction(dataItem) {
var input = '<div class="dropDownTemplate"></div>'
return input
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
var datasourceRooms = [{
"RoomID": 1,
"RoomName": "Master"
},
{
"RoomID": 2,
"RoomName": "Kitchen"
},
{
"RoomID": 3,
"RoomName": "Bathroom"
},
{
"RoomID": 4,
"RoomName": "Basement"
}
];
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#Grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
$(document).ready(function() {
$('#Grid').kendoGrid({
dataSource: datasourceRooms,
columns: [{
field: "RoomName",
title: "Room Name",
width: "100px"
},
{
field: "Catalog",
title: "Catalogs",
width: "125px",
template: columnTemplateFunction,
editable: false
}
],
selectable: "row",
//editable: {
// mode: "incell",
// confirmation: false
//},
editable: true,
dataBound: function(e) {
let grid = e.sender;
let items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: datasource,
dataTextField: "Catalog",
dataValueField: "CatalogID",
change: onDDLChange
});
});
}
});
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
//template: '#=Catalog#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function columnTemplateFunction(dataItem) {
var input = '<div class="dropDownTemplate"></div>'
return input
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
var datasourceRooms = [{
"RoomID": 1,
"RoomName": "Master"
},
{
"RoomID": 2,
"RoomName": "Kitchen"
},
{
"RoomID": 3,
"RoomName": "Bathroom"
},
{
"RoomID": 4,
"RoomName": "Basement"
}
];
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#Grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
$(document).ready(function() {
$('#Grid').kendoGrid({
dataSource: datasourceRooms,
columns: [{
field: "RoomName",
title: "Room Name",
width: "100px"
},
{
field: "Catalog",
title: "Catalogs",
width: "125px",
template: columnTemplateFunction,
editable: false
}
],
selectable: "row",
//editable: {
// mode: "incell",
// confirmation: false
//},
editable: true,
dataBound: function(e) {
let grid = e.sender;
let items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: datasource,
dataTextField: "Catalog",
dataValueField: "CatalogID",
change: onDDLChange
});
});
}
});
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
//template: '#=Catalog#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: {
defaultValue: {
CatalogID: 1,
Catalog: "Free"
}
}
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function columnTemplateFunction(dataItem) {
var input = '<div class="dropDownTemplate"></div>'
return input
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>jquery kendo-ui kendo-grid
jquery kendo-ui kendo-grid
asked Nov 11 at 12:18
Chris
1,06952157
asked Nov 11 at 12:18
Chris
1,06952157
asked Nov 11 at 12:18
Chris
1,06952157
asked Nov 11 at 12:18
Chris
1,06952157
asked Nov 11 at 12:18
Chris
1,06952157
1,06952157
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248687%2fkendo-grid-incell-editing-removes-my-dropdownlist-when-grid-has-editing-option-e%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
