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.

How to clone a row on button click in essential js 1.X ejgrid widget

I am attempting to clone a row in ejgrid widget within essential JS 1.X Syncfusion.
I have tried various methods from old school low level JS, jQuery, and have referred to the official JS API documentation to no avail. Hoping someone out there has used this technology before...
//grid population
$('#lstSelected').ejGrid({
dataSource: [],
enableRowHover: true,
allowTextWrap: true,
allowSorting: true,
allowFiltering: false,
allowSelection: false,
allowResizing: true,
allowScrolling: true,
scrollSettings: { height: $(window).height() - 250, width: "100%" },
columns: [
{ headerText: "", template: true, templateID: "#savechktmp", width: 50, textAlign: "center", type: "string" },
{ field: "BP_ID", visible: false, isPrimaryKey: true, defaultValue: 0 },
{ field: "Package_Type", headerText: "Type", type: "string", width: 100, foreignKeyField: "value", foreignKeyValue: "text", dataSource: pkgtypes },
{ field: "Package_Description", headerText: "Description", type: "string", width: 200 },
{ field: "Customer_ID", headerText: "Customer", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: customerList },
{ field: "Subdivision_ID", headerText: "Subdivision", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: subdivisionList },
{ field: "HoursWithChildren", headerText: "Hours (*)", type: "numeric", format: "{0:N0}", width: 100 },
{ field: "Floor", headerText: "Location", width: 150, template: true, templateID: "#floortmp" },
{ field: "Location", headerText: "Room", width: 150, template: true, templateID: "#locationtmp" },
{ field: "Qty", headerText: "Qty", width: 100, template: true, templateID: "#qtytmp" },
{
headerText: "", textAlign: "center",
commands: [
{ type: "Add", buttonOptions: { width: "80%", text: "+", click: "cloneRow" } }
],
width: 130
}
],
//this is my function attempts
function cloneRow() {
//JS attempt
var tableDiv = document.getElementById('lstSelected');
var tableClass = tableDiv.getElementsByClassName('e-table')[1];
console.log(tableClass);
tableDiv.appendChild(tableClass);
resizeGrids();
}
//jQuery attempt
function cloneRow() {
var $tableBody = $('#Grid').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
var $lastRow = $("[id$=blah] tr:not('.ui-widget-header'):last");
//grab row before the last row
var $newRow = $lastRow.clone();
//clone it
$newRow.find(":text").val("");
//clear out textbox values
$lastRow.after($newRow);
//add in the new row at the end
}
}
I would like the row cloned, with full functionality of the row, not a stripped out version. I also have a demo/attempt here: http://jsplayground.syncfusion.com/dexgxk03

Query: I would like the row cloned, with full functionality of the row, not a stripped out version.
From the shared demo, we would see that you added the cloned row under the current row. Since cloned row is not updated in the dataSource, we are unable to perform the grid functions like sorting, editing, filtering etc., for the cloned row.
And also we need some additional detail regarding your requirement. So, please get back to us with the following details.
Please confirm whether you want to perform grid actions for the cloned row (i.e. sorting, filtering etc.,)
If not please explain your requirement in detail.
And also we would like to know the reason for cloning the grid row.
The requested details will help us to achieve your requirement as early as possible.

Kendo Grid - pass over edited values in button click

Im relatively new to javascript/jquery so forgive me if this sounds like a silly question.
I have a Kendo UI grid which is bound to a url from a controller method. This all works fine, but I want the user to be able to change the value on some of the fields. I have enabled the 'editable' flag on the table itself to allow these values to be changed, but when the button is clicked, it passes over the original value instead of the updated ones. Am i missing something simple?
<div id="productlist-grid"></div>
<script>
$(function() {
$("#productlist-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "#Html.Raw(dataUrl)", type: "POST", dataType: "json", data: additionalData }
},
schema: { data: "Data", total: "Total", errors: "Errors" },
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(gridPageSizes)]
},
editable: true,
scrollable: false,
columns:
[
{ field: "ProductPictureUrl", title: "Picture", template: '<img src="#=ProductPictureUrl#" />', width: 100, editable: false },
{ field: "ProductName", title: "Product Name", editable: false },
{ field: "ProductSku", title: "Sku", editable: false},
{ field: "Quantity", title: "Quantity", type: "number"},
{ field: 'SplitPack', title: 'Split Pack', template: kendo.template($("#template").html())},
{ field: "AddToCart", title: "", template: 'Add To Cart', editable: false}
]
});
});
</script>
Many Thanks in advance!!

Why does BootstrapTable work just once?

I'm making a webApp and in one screen there are two tables, the first one for the categories I store on a DB and the second for the elements that belong to those categories. Both are BootstrapTable. What I'm trying to do is that when the user clicks on a row of the first table, the items of that category will load in the second table, and I managed to do so but it just works once. If I click on the first table then the second fills up, but if i click again over any other element of the first table nothing happens. I even used console.log to see if the event works and it does, before and after the table "reload".
function getProductos(Categoria) {
var id_cat=Categoria||iSeldCat;
$('div#tableProds').bootstrapTable({
url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
console.log(id_cat + " Print");
}
When running that code, I get in my console 1 Print, 3 Print and son on, but the table just doesn't do anything.
This is the first table, including the event which as I said before, works everytime:
function getCategorias(){
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
}
Any idea what it could be?

This approach of bootstrapping the table again should be avoided. Handle this in the following way.
On document ready
$(document.ready(function() {
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
$('div#tableProds').bootstrapTable({
data: [],
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
}
On selection of item
function getProductos(iSeldCat) {
$('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}
I have not tested this code functionality. But this should be the approach. You may refer Bootstrap Table documentation for property and method call details.

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