We Keep Coding

what is the properway to open an dialog in mui datagrid

I want to have an button in every row which opens an Dialog.
I already could do that but the perfomance was very very poor. So I think it was wrong.
Can anybody make a suggestion? that would be great.
The button should be in Column "EDIT"
const columns = [
{ title: "ID", field: "id" },
{ title: "TIMESTAMP", field: "TIMESTAMP", minWidth: 150 },
{ title: "POS_NR", field: "POS_NR", minWidth: 150 },
{
title: "EDIT",
field: "EDIT",
minWidth: 400,
},
];

kendo ui grid popup populating dropddown list

I am looking for a solution on how to get the selected data in a pop-up window using kendo ui grid.
For example, I have a movie and want to change its genre. When I hit the edit button, the window opens up but the already assigned value is not displayed and I have to manually select it.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: remoteDataSource,
height: 500,
toolbar: ["create"],
editable: "inline",
columns: [{
field: "Title",
title: "Title"
}, {
field: "ReleaseDate",
title: "Release Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "Price",
title: "Price",
format: "{0:c}",
width: "130px"
}, {
field: "Genre.Title",
title: "Genre",
editor: genresDropDownEditor
}, {
field: "Rating.Title",
title: "Rating",
editor: ratingsDropDownEditor
}, {
command: ["edit", "destroy"]
}]
});
Below is the function that populates the dropdown list
function genresDropDownEditor(container, options) {
console.log('genre options', options.model.Genre.Title, options);
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "Title",
dataValueField: "Id",
dataSource: {
transport: {
read: "http://localhost:62954/api/genres"
}
},
value: options.model.Genre.Title
});
}
Before editing
During editing
Thanks

kendo grid maximum call stack exceeded error

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?

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.

Kendo UI Grid: how to make cell read only on condition

in Kendo UI Grid (with Angularjs) i have the following grid:
<div kendo-grid k-data-source="Table" k-options="thingsOptions" style="height: 365px">
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
toolbar: [{ name: "create", text: "Aggiungi Prodotto" }],
columns: [
{ field: "Name", title: "Name", width: "50px" },
{ field: "Description", title: "Description", width: "50px" },
{ field: "Price", title: "Price", width: "50px" },
{ field: "Active", title: "Active", template: '<input type="checkbox" disabled="disabled" #= Active ? checked="checked":"" # class="chkbx" />', width: "20px" },
{ command: [{ name: "edit", text: "Modifica" }], title: "", width: "172px" }
],
editable: "inline"
};
How can i make the "Price" field readonly on some condition? I must test a variable and if it is true i want the Price field readonly otherwise writable.
I have tried to add in the "thingsOptions" function:
edit: function (e) {
if(myvar == true)
e.container.find("input[name=Price]").enable(false);
}
But id doesn't work (undefined reference).

Try to use:
edit: function (e) {
if(myvar == true)
$("input[name=Price]").attr("readonly", true);
} else {
$("input[name=Price]").attr("readonly", false);
}
}

Inside the edit function of the grid just manipulate the condition the way you want to use. For closing the cell you can use this.closeCell();
edit: function (e) {
//Size will be editable only when the Area is not empty
if(e.container.find(“input”).attr(“name”) == ‘Price’) {
//Below statement will close the cell and stops the editing.
if(myvar == true){
this.closeCell();
}
}
}
For more info have a look here

columns: [{
editable: false,
field: "Id",
title: "Id",
width: 50,
editor: idEditor,
}, {
title: "Name",
field: "Name",
width: 100
}, {
command: ["edit", "destroy"],
title: " ",
width: "250px"
}]
function idEditor(container, options) {
container.append(options.model.Id);
}