Download kendo ui trial and in exmaple i just try following code
place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."
parent.html is as below
<html lang="en">
<head>
<title>Parent Frame</title>
<script>
___data = [
{ CityID: 1, CityName: "Lisboa" },
{ CityID: 2, CityName: "Moscow" },
{ CityID: 3, CityName: "Napoli" },
{ CityID: 4, CityName: "Tokyo" },
{ CityID: 5, CityName: "Oslo" },
{ CityID: 6, CityName: "PŠ°ris" },
{ CityID: 7, CityName: "Porto" },
{ CityID: 8, CityName: "Rome" },
{ CityID: 9, CityName: "Berlin" },
{ CityID: 10, CityName: "Nice" },
{ CityID: 11, CityName: "New York" },
{ CityID: 12, CityName: "Sao Paulo" },
{ CityID: 13, CityName: "Rio De Janeiro" },
{ CityID: 14, CityName: "Venice" },
{ CityID: 15, CityName: "Los Angeles" },
{ CityID: 16, CityName: "Madrid" },
{ CityID: 17, CityName: "Barcelona" },
{ CityID: 18, CityName: "Prague" },
{ CityID: 19, CityName: "Mexico City" },
{ CityID: 20, CityName: "Buenos Aires" }
]
</script>
</head>
<body>
<iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>
</html>
and child.html is as below
<!DOCTYPE html>
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.
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
});
}