We Keep Coding

In Kendo Master Detail Grid (jquery) is there a way to update a field in the parent row if no child records exist?

I have a Kendo Master/Detail grid (jquery) that expands all rows to reveal any child records upon page load to provide a grid with a set of default data. However, not all of the rows returned when expanded have child elements to display. I currently have a link provided in a column of the master row, the link is coded using a template:
{
template: `"<a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'>Edit Case Assignment</a>",`
width: "100px"
}
What I would like to know if I can change the text and what the link is pointing to on the master row if no child elements are returned? I have provided my code below, where I create the columns for the master first, then create the grid with a data-bound, lastly, I coded the detail:
function loadSearchGrid() {
searchOriginalColumnList = [
{
field: "CaseYear",
title: "Case Year",
type: "number",
width: "100px"
},
{
field: "CaseNumber",
title: "Case Number",
width: "100px"
},
{
field: "Full_Style",
title: "Style",
template: "<a href='/Cases/Views/CaseItems/ViewDocket?cy=#=CaseYear#&cn=#=CaseNumber#' target='_blank' style='color: blue; text-decoration:underline' ># if(Full_Style == null || Full_Style == '' ) {# N/A #} else{ # #:Full_Style# #} # </a>",
width: "250px"
},
{
field: "DispInfo",
title: "Disp Info",
width: "175px"
},
{
field: "Max_OA",
title: "OA Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
},
{
field: "Max_Conf",
title: "Conf Date",
format: "{0:MM/dd/yyyy}",
width: "120px"
},
{
field: "Evote_Info",
title: "Evote",
template: "<a href=" + apiUrl +"JISReports/JIS_eVOTE&P_CASEYEAR=#=CaseYear#&P_CASENUMBER=#=CaseNumber#&rs:Command=Render' target='_blank' style='color:blue; text-decoration:underline; cursor: pointer;' ># if(Evote_Info == 'TRUE') {# Evote Info #} else{ # #} # </a>",
width: "100px"
},
{
field: "Ap_T_Related",
title: "Related Case",
//format: "{0:MM/dd/yyyy}",
width: "120px"
},
{
field: "Lead",
title: "Lead",
//format: "{0:MM/dd/yyyy}",
width: "100px"
},
{
field: "Not_Lead",
title: "Not Lead",
//format: "{0:MM/dd/yyyy}",
width: "100px"
},
{
//field: "Ap_T_Related",
//title: "Related Case",
//format: "{0:MM/dd/yyyy}",
template: /*"# if( getDetailGrids() == null ) {# Case Not Assigned #} else{# <a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'>Edit Case Assignment</a>#}#",//*/"<a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'>Edit Case Assignment</a>",
width: "100px"
},
];
var searchGridSavedColumns = utils.getGridSavedColumns(searchOriginalColumnList, config.gridSettingsKeys.jisSearch);
grid = $("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: localRoutes.searchUrl,
dataType: "json",
method: "POST",
data: function () {
model = {
PanelType: viewModel.get("selectedPanelType"),
DispFinalInfo: viewModel.get("selectedFinalDisp"),
AssgnComp: viewModel.get("selectedAssignComp"),
ShowComm: viewModel.get("selectedShowComm"),
SortResult: viewModel.get("selectedSortResult"),
Assignment_Select: viewModel.get("selectedAssgnTypes"),
Assignment_For: viewModel.get("selectedSuiteMate"),
SearchCY: viewModel.get("caseYear"),
SearchCN: $('#caseNumber').val(),
Style: viewModel.get("style"),
};
return model;
}
}
},
error: function (e) {
$.unblockUI();
},
pageSize: 50,
schema: {
model: {
id: "CaseUaId",
fields: {
CaseUaId: { type: "string" },
PanelTypes: { type: "string" },
FinalDisp: { type: "string" },
AssignComp: { type: "string" },
ShowComm: { type: "string" },
SortResult: { type: "string" }
}
},
},
}),
pageable: {
refresh: true,
pageSizes: [20, 50, 100, 500]
},
toolbar: ["excel"],
editable: false,
groupable: true,
selectable: true,
filterable: true,
columnMenu: true,
scrollable: true,
reorderable: true,
resizable: true,//setting to allow column headers to be resizeable
autoBind: false,
sortable: {
mode: "multiple",
allowUnsort: true
},
toolbar: kendo.template($("#toolbar").html()),
excel: {
fileName: "JIS Search.xlsx",
allPages: true
},
//Second set of code for Master Detail
detailInit: detailInit,
dataBound: function (e) {
this.expandRow(this.tbody.find("tr.k-master-row"));//.first());
},
columns: (!!searchGridSavedColumns) ? searchGridSavedColumns : searchOriginalColumnList,
}).data("kendoGrid");
///Code to set the column headers as tooltips
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
$("#grid").on("click", "._kwJISSearch", function (e) {
e.preventDefault();
var ca = grid.dataItem($(e.currentTarget).closest("tr"));
var win = $("#_kwJISSearch").data("kendoWindow");
win.title();
win.content("");
win.refresh("/JIS/JISAssignment" +
"?cy=" + ca.CaseYear +
"&cn=" + ca.CaseNumber);
win.center().open().maximize();
});
searchGridSettingsViewModel = utils.createGridSettingsVM("Search Grid Settings", "grid", config.gridSettingsKeys.jisSearch, "gridSettingsTmpl", "gridSettingsDialog", true, true, true, true, 20);
kendo.bind($("#grid").find(".k-grid-toolbar"), searchGridSettingsViewModel);
searchGridLoaded = true;
}//end assignment grid creation
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
//type: "odata",
transport: {
read: {
url: localRoutes.searchAssgnUrl,
dataType: "json",
method: "POST",
data: {
cy: e.data.CaseYear,
cn: e.data.CaseNumber,
showHis: viewModel.get("selectedAssignComp"),
caseY: viewModel.get("caseYear"),
caseN: viewModel.get("caseNumber")
}
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "Case_Ua_Id", operator: "eq", value: e.data.CaseUaId }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
//{ field: "CaseUaId", width: "110px" },
{
field: "UserName", title: "User Name",
template: "# if(AssignEndDate == 'Incomplete' ) {# <span style='color:red; font-weight: bold'> #:UserName# </span> #} else{ # #:UserName# #} # ",
width: "70px"
},
{
field: "ReasonDesc", title: "Reason Desc",
template: "# if(ReasonDesc == 'EXPEDITED' || ReasonDesc == 'WALK' ) {# <span style='color:red; font-weight: bold'> #:ReasonDesc# </span> #} else{ # #:ReasonDesc# #} # ",
width: "70px"
},
{ field: "AssignBeginDate", title: "Begin Date", width: "70px" },
{
field: "AssignEndDate", title: "End Date",
template: "# if(Status_Code == 'PENDINGREVIEW' ) {# #:AssignEndDate# <span style='color:blue; font-style: italic'> (Pending Review) </span> #} else{ # #:AssignEndDate# #} # ",
width: "70px"
},
{ field: "DueDate", title: "Due Date", width: "70px" },
{ field: "AssignForLocID", title: "Assignment For", width: "100px" },
{ field: "AssignedByLocID", title: "Assigned By", width: "100px" },
{ field: "Comments", title: "Comments", width: "110px" },
]
});
}//end Case Assignment Detail Grid

You can use JavaScript code inside a template, e.g.:
template: "<a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'># if (data.childrenProperty && data.childrenProperty.length) { ##Edit Case Assignment## } else { ##No children text here ## } #</a>",
Assuming your master row has an array property for children.

Metronic Admin Panel Datatable Column Visibility

I'm using Metronic Datatable and I want to hide some ID columns. How can I do it?
Here is my datatable initialization script and I want to hide 'site_id', 'kazan_id', 'boyler_id' columns. I tried the columnDefs option but it didn't work.
$('#tbl-boiler').mDatatable({
data: {
type: 'remote',
source: {
read: {
url: '/Company/GetBoilers/' + siteId,
}
},
},
sortable: false,
pagination: false,
rows: { autoHide: true },
columnDefs:[
{
targets: 0,
visible: false
}
],
columns: [
{
field: 'site_id',
title: 'site_id',
width: 100
},
{
field: 'kazan_id',
title: 'kazan_id',
width: 100
},
{
field: 'boyler_id',
title: 'boyler_id',
width: 100
},
{
field: 'okuma_ucreti',
title: 'Okuma Ücreti',
width: 100
},
{
field: 'kazan_no',
title: 'Kazan Numarası',
width: 120
},
{
field: 'kazan_sayac_no',
title: 'Kazan Sayaç Numarası',
width: 165
},
{
field: 'boyler_no',
title: 'Boyler Numarası',
width: 120
},
{
field: 'boyler_sayac_no',
title: 'Boyler Sayaç Numarası',
width: 170
},
{
field: 'blok_sayisi',
title: 'Bloklar',
width: 250
},
{
field: 'daire_sayisi',
title: 'Daireler',
width: 250
},
{
field: 'sayac_sayisi',
title: 'Sayaclar',
width: 250
},
{
field: 'actions',
title: 'İşlemler',
sortable: !1,
overflow: 'visible',
template: function (t) {
return '<a data-toggle="modal" data-target="#siteform" onclick="getBoiler(' + t.kazan_id + ');" class="edit-site m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Kazan Bilgilerini Düzenle">' +
'<i class="la la-edit"></i>' +
'</a>' +
'<a onclick="deleteBoiler(' + t.kazan_id + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Kazanı Sil">' +
'<i class="la la-trash"></i>' +
'</a>';
},
width: 250
}
]
});

Metronic uses jquery datatables plugin which can be found here.
Just changing the columns you want to hide to the following code should work.
I have just added visible: false to columns. You can remove columnDefs after making this change.
$('#tbl-boiler').mDatatable({
data: {
type: 'remote',
source: {
read: {
url: '/Company/GetBoilers/' + siteId,
}
},
},
sortable: false,
pagination: false,
rows: { autoHide: true },
columns: [
{
field: 'site_id',
title: 'site_id',
visible: false
},
{
field: 'kazan_id',
title: 'kazan_id',
visible: false
},
{
field: 'boyler_id',
title: 'boyler_id',
visible: false
},
{
field: 'okuma_ucreti',
title: 'Okuma Ücreti',
width: 100
},
{
field: 'kazan_no',
title: 'Kazan Numarası',
width: 120
},
{
field: 'kazan_sayac_no',
title: 'Kazan Sayaç Numarası',
width: 165
},
{
field: 'boyler_no',
title: 'Boyler Numarası',
width: 120
},
{
field: 'boyler_sayac_no',
title: 'Boyler Sayaç Numarası',
width: 170
},
{
field: 'blok_sayisi',
title: 'Bloklar',
width: 250
},
{
field: 'daire_sayisi',
title: 'Daireler',
width: 250
},
{
field: 'sayac_sayisi',
title: 'Sayaclar',
width: 250
},
{
field: 'actions',
title: 'İşlemler',
sortable: !1,
overflow: 'visible',
template: function (t) {
return '<a data-toggle="modal" data-target="#siteform" onclick="getBoiler(' + t.kazan_id + ');" class="edit-site m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Kazan Bilgilerini Düzenle">' +
'<i class="la la-edit"></i>' +
'</a>' +
'<a onclick="deleteBoiler(' + t.kazan_id + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Kazanı Sil">' +
'<i class="la la-trash"></i>' +
'</a>';
},
width: 250
}
]
});

get Kendo column text value

im trying to get the Text value of the metric_nme column and if this was equal to 'Accounts Audit' hiding the Update button...
does anyone knows how can i get the value of the column in kendo grid?
here if me code...
$("#assessmentGrid").kendoGrid({
dataSource: gridDS,
navigatable: true,
noRecords: {
template: "No assessments were found"
},
filterable: true,
sortable: {
mode: 'single',
allowUnsort: false
},
columns: [
{ field: 'assessment_pk', hidden: true },
{ field: 'role_fk', hidden: true },
{ field: 'role_nme', title: 'Role', width: 120 },
{ field: 'metric_fk', hidden: true },
{ field: 'assess_dte', hidden: true },
{
field: 'metric_nme', title: 'Metric', width: 150,
validation: {
metric_nme_validation: function (input) {
if (dataItem[metric_nme] = 'Accounts Audit') {
// attributes: { 'class': 'k-grid-update' }.
$("#k-grid-update").data("kendoGrid").visible = false;
}
}
}
},
{ field: 'assess_val', title: 'Score', width: 80, template: "#= (returnUnitMetricID(metric_fk) == 2) ? parseInteger(assess_val, 10) : assess_val #", attributes: { 'style': 'text-align: right' } },
{ field: 'adjust_val', title: 'Manager Score', width: 100, template: "#= (returnUnitMetricID(metric_fk) == 2) ? parseInteger(adjust_val, 10) : adjust_val #", attributes: { 'style': 'text-align: right' } },
{ field: 'adjust_by', title: 'Adjusted By', width: 120 },
{ field: 'comment_txt', title: 'Comment', hidden: true },
{ field: 'rating_cde', title: 'Rating', width: 95 },
{ field: 'adjusted_fk', hidden: true },
{ field: 'pct_to_goal', title: '% to Goal', width: 100, template: '#=kendo.format("{0:p}", pct_to_goal / 100)#', attributes: { 'style': 'text-align: right' } },
{ field: 'lastupdate_by', title: 'Last Update By', width: 100 },
{ field: 'lastupdate_on', title: 'Last Update On', width: 130, template: "#= (lastupdate_on == null) ? '' : kendo.toString(kendo.parseDate(lastupdate_on, 'yyyy-MM-dd'), 'MM/dd/yyyy H:mm:ss') #" },
{
command: {
text: "Update",
click: updateScore,
}, title: " ", width: "60",
attributes: { 'class': 'k-grid-update' }
}
],
}).find("table").on("keydown", onGridKeydown);
function updateScore(e) {
e.preventDefault(e);
clearWindowPopUpFields();
$(".k-window").css('height', '420px');
$(".alert").hide();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var assestmentDate = new Date(dataItem.assess_dte);
$("#lbAssessmentDateRO").text($("#txtPeriod").val());
$('#lblMetric').text(dataItem.metric_nme);
$('#lblRole').text(dataItem.role_nme);
metricFk = dataItem.metric_fk;
$('#txtAssociate').text($('#cbAssociate').data("kendoComboBox").text());
switchScoreTypeControl(returnUnitMetricID(dataItem.metric_fk));
if (dataItem.assessment_pk == null) {
addScorePopUp(dataItem);
} else {
updateScorePopUp(dataItem);
}
}

You can use visible parameter:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.visible
Here is an example:
http://dojo.telerik.com/ACopA
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/custom-command">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<div id="details"></div>
<script>
var wnd,
detailsTemplate;
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [{
field: "FirstName",
title: "First Name",
width: "140px"
},
{
field: "LastName",
title: "Last Name",
width: "140px"
},
{
field: "Title"
},
{
command: [{
text: "View Details",
click: showDetails,
visible: function(dataItem) {
return dataItem.LastName.charAt(0) !== "D"
}
}]
}
]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
<style type="text/css">
#details-container {
padding: 10px;
}
#details-container h2 {
margin: 0;
}
#details-container em {
color: #8c8c8c;
}
#details-container dt {
margin: 0;
display: inline;
}
</style>
</div>
</body>
</html>

How to sort Month-year in Kendo UI Grid

I want to sort Month-year(MMM-yyyy) in kendo ui grid. but sorting is in alphabet.
Example: current sorting is working as below:
Apr-2010
Apr-2012
Apr-2015
Feb-2010
Feb-2011
Jul-2015
Jul-2016
but i want below output:
Feb-2010
Apr-2010
Feb-2011
Apr-2012
Apr-2015
Jul-2015
Jul-2016
function loadevent(dataval){
$("#grid").kendoGrid({
dataSource: {
type: "json",
data: dataval,
schema:{
data :'sales',
model: {
fields: {
SBU: { type: "string" },
CLIENT : { type: "string" },
REGION : { type: "string" } ,
DELIVERY : { type: "string" } ,
PLAN : { type: "number" },
POTENTIAL : { type: "number" },
ESTIMATE : { type: "number" },
ACTUAL : { type: "number" },
ACTUALGAP : { type: "number" },
SALESMGN: { type: "string" },
MONTHYEAR: { type: "string" },
QUARTER: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
group: {
field: "QUARTER", aggregates: [
// { field: "CLIENT", aggregate: "count" },
{ field: "MONTHYEAR", aggregate: "sum" },
{ field: "PLAN", aggregate: "sum" },
{ field: "POTENTIAL", aggregate: "sum" },
{ field: "ESTIMATE", aggregate: "sum" },
{ field: "ACTUAL", aggregate: "sum" },
{ field: "ACTUALGAP", aggregate: "sum" },
{ field: "SALESMGN", aggregate: "count" }
]
},
aggregate: [
// { field: "CLIENT", aggregate: "count" },
{ field: "QUARTER", aggregate: "sum" },
{ field: "PLAN", aggregate: "sum" },
{ field: "POTENTIAL", aggregate: "sum" },
{ field: "ESTIMATE", aggregate: "sum" },
{ field: "ACTUAL", aggregate: "sum" },
{ field: "ACTUALGAP", aggregate: "sum" },
{ field: "SBU", aggregate: "count" }
// { field: "UnitsInStock", aggregate: "max" }
]
},
//height : '100%',
sortable: true,
//pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
scrollable: true,
height : gridheight,
columns: [
// { width: 300, field: "CLIENT", title: "Client", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ width: 100, field: "CLIENT", title: "Client" },
{ width: 100, field: "REGION", title: "Region"},
{ width: 100, field: "DELIVERY", title: "Delivery"},
//{ width: 300, field: "PLAN", title: "Plan" aggregates: ["sum"] },
//{ width: 300, field: "POTENTIAL", title: "Potential" aggregates: ["sum"] },
//{ width: 300, field: "ESTIMATE", title: "Estimate", aggregates: ["sum"] },
// { width: 300, field: "ACTUAL", title: "Actual", aggregates: ["sum"] },
// { width: 300, field: "ACTUALGAP", title: "Actual Vs Plan Gap", aggregates: ["sum"] },
{ width: 100, field: "QUARTER", title: "Quarterly" },
{ width: 100, field: "PLAN", title: "Plan" ,aggregates: ["sum"],template: '<div style="text-align:right;">#= kendo.format("{0:n0}",PLAN) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "POTENTIAL", title: "Potential" ,aggregates: ["sum"],template: '<div style="text-align:right;">#= kendo.format("{0:n0}",POTENTIAL) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "ESTIMATE", title: "Estimate", aggregates: ["sum"] ,template: '<div style="text-align:right;">#= kendo.format("{0:n0}",ESTIMATE) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "ACTUAL", title: "Actual", aggregates: ["sum"],template: '<div style="text-align:right;">#= kendo.format("{0:n0}",ACTUAL) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #' ,footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "ACTUALGAP", title: "Actual Vs Plan Gap", aggregates: ["sum"] ,template: '<div style="text-align:right;">#= kendo.format("{0:n0}",ACTUALGAP) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate:'<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #' },
{ width: 100, field: "MONTHYEAR", title: "Month-Year" }
// { width: 100, field: "ACTUALGAP", title: "Actual Vs Plan Gap", aggregates: ["sum"] ,footerTemplate: '#= kendo.toString(sum, "##,#") #'},
//{ width: 300, field: "SBU", title: "SBU", groupHeaderTemplate: "SBU: #= value # (Count: #= count#)" }
]
});
}

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);
}