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.

Display 0 for kendo.toString

I have a kendoGrid in my application. And my problem is:
I have a 0 in my database but when I use kendo.tostring in template for kendoGrid he don't display the 0. But when I have 0,2 the kendo.tostring display 0,2. So how can I succeed to display only 0 ??
This is mys javascript code:
$("#tab_intensite").kendoGrid({
dataSource:intensite_data,
scrollable: true,
sortable : true,
pageable : false,
detailInit: function(e){
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data:intensite,
filter: { field: "idDepart", operator: "eq", value: e.data.idDepart }
},
columns: [
{ field: "intituledep", title: "D&EacuteSIGNATION"}
]
});
},
editable: true,
height: 400,
change:function(){
console.log($this);
$this.attr("font-weight", "bold");
},
save: function() {
$("#tableau_saisie_intensite").data("kendoGrid").dataSource.update;
$("#tableau_saisie_intensite").data("kendoGrid").refresh();
$("#tableau_saisie_intensite").data("kendoGrid").dataSource.bind("change", function (e) {
setdatasourcessss();
});
},
columns: [
{ field: "cel", title: "DÉPART", width:50,headerAttributes: { style:"text-align: center;"} },
{ field: "date_releve", title: "Date Relevé", width:50, format: "{0:dd/MM/yyyy }" ,attributes: { style:"text-align: center;"},headerAttributes: { style:"text-align: center;"} ,
footerTemplate: "<div id='date_intensite_total' style='width:98%;position:relative;text-align: center;' ></div> "},
{ field: "n", title: "N", width:50, attributes: { style:"text-align: center;"},
footerTemplate: "#= kendo.toString(sum, 'n') # A", template:"#= (n) ? kendo.toString(n)+ ' A': ''# <span style='float: right;' class='k-icon k-edit'></span>", headerAttributes: { style:"text-align: center;"}},
{ field: "ph1", title: "PH1", width:50, attributes: { style:"text-align: center;"},
footerTemplate: "#= kendo.toString(sum, 'n') # A", template:"#= (ph1) ? kendo.toString(ph1, 'n')+ ' A': ''# <span style='float: right;' class='k-icon k-edit'></span>", headerAttributes: { style:"text-align: center;"}},
{ field: "ph2", title: "PH2", width:50, attributes: { style:"text-align: center;"},
footerTemplate: "#= kendo.toString(sum, 'n') # A", template:"#=(ph2) ?kendo.toString(ph2)+ ' A': ''# <span style='float: right;' class='k-icon k-edit'></span> ", headerAttributes: { style:"text-align: center;"}},
{ field: "ph3", title: "PH3", width:50, attributes: { style:"text-align: center;"},
footerTemplate: "#= kendo.toString(sum, 'n') # A", template:"#=(ph3) ?kendo.toString(ph3, 'n')+ ' A' : ''# <span style='float: right;' class='k-icon k-edit'></span>", headerAttributes: { style:"text-align: center;"}},
],
});
If someone can help me it will be great ! Thank in advance !!

There is no problem with the kendo.toString() statements in your code. the only problem you got is on the ternary operation on template, please take a look at your code at column n declaration, you can see there:
template: (n) ? kendo.toString(n)+ ' A': ''
so when the value is 0, the '' will be taken, because 0 is falsey. change '' into '0' then your problem will be gone.
you have to modify template of columns n, ph1, ph2, and ph3 little bit to be something like this.
columns: [
....
{
field: "n",
template: "#= (n) ? kendo.toString(n)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
...
},
{
field: "ph1",
template: "#= (ph1) ? kendo.toString(ph1, 'n')+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
...
},
{
field: "ph2",
template: "#=(ph2) ?kendo.toString(ph2)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span> ",
...
},
{
field: "ph3",
template: "#=(ph3) ?kendo.toString(ph3, 'n')+ ' A' : '0'# <span style='float: right;' class='k-icon k-edit'></span>",
...
},
],
Snipped below is the complete fix, you can run it to see the result.
var data = [{
"cel": "a",
"date_releve": "a",
"n": 0.2,
"ph1": 0,
"ph3": 0.2,
"ph2": 0.5
}]
$("#grid").kendoGrid({
dataSource: data,
scrollable: true,
sortable: true,
pageable: false,
detailInit: function(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: intensite,
filter: {
field: "idDepart",
operator: "eq",
value: e.data.idDepart
}
},
columns: [{
field: "intituledep",
title: "D&EacuteSIGNATION"
}
]
});
},
editable: true,
height: 400,
change: function() {
console.log($this);
$this.attr("font-weight", "bold");
},
save: function() {
$("#tableau_saisie_intensite").data("kendoGrid").dataSource.update;
$("#tableau_saisie_intensite").data("kendoGrid").refresh();
$("#tableau_saisie_intensite").data("kendoGrid").dataSource.bind("change", function(e) {
setdatasourcessss();
});
},
columns: [
{
field: "cel",
title: "DÉPART",
width: 50,
headerAttributes: {
style: "text-align: center;"
}
},
{
field: "date_releve",
title: "Date Relevé",
width: 50,
format: "{0:dd/MM/yyyy }",
attributes: {
style: "text-align: center;"
},
headerAttributes: {
style: "text-align: center;"
},
footerTemplate: "<div id='date_intensite_total' style='width:98%;position:relative;text-align: center;' ></div> "
},
{
field: "n",
title: "N",
width: 50,
attributes: {
style: "text-align: center;"
},
footerTemplate: "#= kendo.toString(sum, 'n') # A",
template: "#= (n) ? kendo.toString(n)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
headerAttributes: {
style: "text-align: center;"
}
},
{
field: "ph1",
title: "PH1",
width: 50,
attributes: {
style: "text-align: center;"
},
footerTemplate: "#= kendo.toString(sum, 'n') # A",
template: "#= (ph1) ? kendo.toString(ph1, 'n')+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
headerAttributes: {
style: "text-align: center;"
}
},
{
field: "ph2",
title: "PH2",
width: 50,
attributes: {
style: "text-align: center;"
},
footerTemplate: "#= kendo.toString(sum, 'n') # A",
template: "#=(ph2) ?kendo.toString(ph2)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span> ",
headerAttributes: {
style: "text-align: center;"
}
},
{
field: "ph3",
title: "PH3",
width: 50,
attributes: {
style: "text-align: center;"
},
footerTemplate: "#= kendo.toString(sum, 'n') # A",
template: "#=(ph3) ?kendo.toString(ph3, 'n')+ ' A' : '0'# <span style='float: right;' class='k-icon k-edit'></span>",
headerAttributes: {
style: "text-align: center;"
}
},
],
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>

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>

Jqgrid: disable some checkbox based on JSON values

I want to disable the row and checkbox if Total Value is Les then 500K or LTV ratio is less 45%. Additionally prevent selection of disabled rows to support select all checkbox in the header of the multiselect column
FIDDLE
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
width: 65,
formatter: "showlink",
formatoptions: {
baseLinkUrl: "http://www.cnn.com",
idName: "",
addParam: function(options) {
return {
bankid: options.rowData.Symbol,
timePeriod: options.rowData.ShareQuantity
};
}
}
}, {
name: 'Description',
width: 165
}, {
name: 'ShareQuantity',
align: 'right',
width: 85,
classes: "hidden-xs",
labelClasses: "hidden-xs",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
classes: "hidden-xs",
labelClasses: "hidden-xs",
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
classes: "hidden-xs",
labelClasses: "hidden-xs",
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
multiselect: true,
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoresizeOnLoad: true,
autoResizing: {
resetWidthOrg: true,
compact: true
},
autowidth: true,
height: 'auto',
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});

You can use rowattr to disable the rows:
rowattr: function (item) {
var ratio = parseInt(item.LTVRatio, 10);
if (item.TotalValue < 500000 || ratio < 45) {
return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
}
}
see the modified demo https://jsfiddle.net/OlegKi/615qovew/117/

Kendo Grid delete all column

I am working on Kendo Grid (sorting enabled). Delete event is working fine but once i delete all rows in kendo grid and again press column header it starts showing all deleted data. Anyone have idea what i am doing wrong
function GetManagePlanData(_data) {
$.each(_data, function (key, value) {
if (value.Bonus == 'False')
$('#chkBonusHeader').attr('checked', false);
else if (value.MeritIncrease == 'False')
$('#chkMeritIncHeader').attr('checked', false);
});
var isAllBonusSelected = true, isAllMeritSelected = true, isAllStockSelected = true;
$("#tblEligibleEmployees").kendoGrid({
dataSource: {
data:_data,
group: [{ field: "ManagerName" }],// Add manager name here
schema: {
model: {
fields: {
ManagerRelationRefID: { type: "string" },
EmployeeRelationRefID: { type: "string" },
ManagerName: { type: "string" },
EmployeeCode: { type: "string" },
FullName1: { type: "string" },
JoiningDate: { type: "string" },
BusinessUnitName: { type: "string" },
FTE: { type: "string" },
Salary: { type: "string" },
HourlyRate:{ type: "string" },
EmpStatus: { type: "string" },
MeritIncrease: { type: "bool" },
Bonus: { type: "bool" },
BonusTarget: { type: "double" },
Stock: { type: "bool" },
BonusBase: { type: "decimal" },
Delete : { type: "string" }
}
}
},
//pageSize: 20
},
scrollable: false,
sortable: true,
filterable: false,
groupable:false,
//pageable: {
// input: false,
// numeric: false
//},
columns: [
{ field: "ManagerName", hidden: true, title: "Manager Name" },//resource required manager name
{ field: "ManagerRelationRefID", hidden: true, template: "<input id=hdnManagerID#=EmployeeRelationRefID# value=#=ManagerRelationRefID# />" },
{ field: "EmployeeRelationRefID", hidden: true, template: "<input id=hdnEmployeeID#=EmployeeRelationRefID# value=#=EmployeeRelationRefID# />" },
{ field: "EmployeeCode", title: key_EmployeeId, width: "90px" },
{ field: "FullName1", title: key_fullname, width: "140px" },
{ field: "JoiningDate", title: key_hiredt, width: "110px" },
{ field: "BusinessUnitName", title: Key_Location, width: "90px" },
{
field: "Salary", title: key_Salary, width: "90px", template: FormatSalary
},
{
field: "HourlyRate", title: 'Hourly Rate', width: "90px", template: FormatHourlySalary
},
{ field: "FTE", title: Key_FTE, width: "80px" },
{ field: "EmpStatus", title: key_status, width: "70px" },
{
field: "MeritIncrease", title: key_MeritIncrease, template: ApplyMeritChecks, width: "100px",
hidden: (isMeritIncrease == 0 ? true : false),
headerTemplate: '<input type="checkbox" id="chkMeritIncHeader" >' + key_MeritIncrease + ' </input>',
sortable:false
},
{
field: "Bonus", title: key_Bonus, template: ApplyBonusChecks, width: "100px",
hidden : (isBonus==0 ? true:false),
headerTemplate: '<input type="checkbox" id="chkBonusHeader">' + key_Bonus + ' </input>',
sortable: false
},
{ field: "BonusTarget", title: key_BonusTarget, template: FormatBonusTarget, width: "70px", hidden : (isBonus==0 ? true:false) },
{
field: "Stock", title: key_Stock, template: ApplyStockChecks, width: "60px",
hidden: (isStock == 0 ? true : false),
headerTemplate: '<input type="checkbox" id="chkStockHeader" /><label>' + key_Stock + '</label>'
},
{
field:"BonusBase",title:"Bonus Base" ,width:"80px",
template:ApplyBonusBase,
sortable:false
},
{
field:"Delete",title:"",width :"80px",template:ApplyDelete,sortable:false
}
]
}).data("kendoGrid");
$('.k-grid-header .k-header').css('font-weight', 'bold');
$('.k-header[data-field="Delete"]').css('text-indent', '-9999px');
}
function deleteRow(ID) {
jConfirm2(key_Yes, key_No, key_PlanDeleteMsg, "", function (r) {
if (r == true) {
var nxtRow = $('#btndelete-' + ID).parent().parent().next('tr').hasClass("k-grouping-row");
var prvRow = $('#btndelete-' + ID).parent().parent().prev('tr').hasClass("k-grouping-row");
var nxtRowlength = $('#btndelete-' + ID).parent().parent().next('tr').length
// if ((nxtRow || nxtRowlength == 0) && prvRow) {
//var rowToDelete = $('#btndelete-' + ID).parent().parent().prev('tr');
var nextRow = $('#btndelete-' + ID).parent().parent().closest('tr');
var grid = $("#tblEligibleEmployees").data("kendoGrid");
// grid.removeRow(rowToDelete);
grid.removeRow(nextRow);
}
});
}
Do let me know what i am doing wrong my?

Please try refreshing the kendo grid after deleting the record. Following is the code.
$('#GridName').data('kendoGrid').refresh();

We are removing data from Kendo datasource not from database. Our working Code is
if ($('#tblEligibleEmployees').data('kendoGrid').dataSource._data.length == 0) {
$('#tblEligibleEmployees').data().kendoGrid.destroy();
return false;
}
On getting length 0 from kendo datasource destroying kendo grid.