I'm new to Kendo UI/Telerik, but have been a web developer for over 15 years.
Please forgive my title as well, as I could be doing it completely wrong by doing this:
dataBound:function(){
$('.toolbar').kendoToolBar({
items: [ {
type: "splitButton",
text: "Edit",
click:function(e){
var grid = $('#grid').data('kendoGrid');
grid.editRow(e.target.parents('tr'))
},
menuButtons: [
{ id: "foo", text: "Print", click:function(){alert('print')} },
{ id: "bar", text: "Delete", click:function(e){
var grid = $('#grid').data('kendoGrid');
grid.removeRow(e.target.parents('tr'))
} },
]
} ]
});
}
But that's what the demo shows. I’m a bit confused as to why this works with a hardcoded data source:
https://dojo.telerik.com/eMUwAqUH
I've been piecing together quite a bit on my own, but one thing has me stumped -- this seems like such a common requirement for Grid usage, and yet my searches don't seem give me anything for jQuery UI.
But as soon as I swap in my real data source (API call), when I hit Edit, then hit Edit again to save the change, the entire box disappears.
I took a short video:
https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4
This is a pretty big deal for me because all of my data tables are going to be API driven, and I want to use a dropdown for the action columns NOT individual buttons. A lot of the time I’m going to have more than just “Edit and Delete” so a dropdown makes more sense.
Any help would be appreciated, I'm sure you can literally swap out the dataSource and columns with a sample one, and you should get the exact same error. I'm running on the latest version of Edge, but same thing happens in Chrome.
Hi
How I can make cascade drop downlist inside a grid like in this example :
https://demos.telerik.com/kendo-ui/grid/editing-custom
Dears,
I have issue that offline feature not update grid column with dropdownlist
non-dropdownlist is working but I have e.g category and product in my grid when update it shows old value
after update when click edit again it shows the update value
please help
Thanks
I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:
1. A dropdownlist is clicked on in the initial grid,
2. The modal is opened afterward (each row has its own button)
3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens
Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid,
this error is thrown:
Uncaught TypeError: m is not a function
at init.editor (kendo.all.min.js:54)
at init.refresh (kendo.all.min.js:54)
at new init (kendo.all.min.js:54)
at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js:2)
at R.fn.init.each (jquery.min.js:2)
at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
at init.editCell (kendo.all.min.js:59)
at init.tap (kendo.all.min.js:59)
at init.trigger (kendo.all.min.js:25)
This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.
Any ideas on where this console error comes from?
Here is a snippet of the grid being generated in the modal:
$("#account-tracking-grid").kendoGrid({
columns: [
{
field: "accountName",
title: "Account Name",
editable: function () { return false },
width: "200px",
},
{
field: "accountNumber",
title: "Account Number",
editable: function () { return false },
width: "200px"
},
{
field: "Balance",
title: "Balance",
width: "40px",
template: "<span>#=getIcon(Balance)#</span>",
editor: dropdownlist,
headerTemplate: "<span class='verticalText'>Balance</span>"
}
],
editable: "incell",
edit: function (e) {
var container = e.container;
var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
if (dropDownList) dropDownList.open();
},
dataSource: {
transport: {
read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
}
}
});
}
function dropdownlist(container, options) {
$('<input id="account-dropdownlist"/>')
.appendTo(container)
$("#account-dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
change: onChange,
open: onOpen
});
}
Hello,
I'm running into a problem when trying to use the same dataSource in two different grids on my SPA page.
The following construction in used in the different grids:
{
field: "_company_id",
title: "Bedrijf",
editor: companyComboBox,
dataSource: dataSourceCompany,
dataTextField: "name",
dataValueField: "id"
}
When I leave out the dataSource at one grid, both grids show up, but one grid only shows the _company_id value.
When I use the same code in both grids the second grid will not show, also no errors show up.
Please advice, I've added more info below, more info added.