Develop Reference

NVC dxDataGrid buttons column causing compiler error

I am very new to NVC working on an existing solution. We are using a dxDataGrid, and I am trying to add a column with custom buttons. I am using the following documentation as reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/buttons/
and
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/jQuery/Light/
The existing implementation of the grid is as follows:
$(function () {
$("#branchDataGrid")
.dxDataGrid({
dataSource: {
store: dxMvcStore({
key: "ID",
})
},
showBorders: true,
noDataText: "No Branch Selected",
editing: {
mode: "batch",
allowAdding: false,
allowUpdating: true,
allowDeleting: true
},
paging: { enabled: true, pageSize: 10 },
showRowLines: true,
sorting: { mode: "none" },
columns: [
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
],
onInitialized: e => {
self.companiesNodeDataGrid = e.component as DevExpress.ui.dxDataGrid;
},
onRowExpanding: e => {
// Only show one detail view at a time.
self.companiesNodeDataGrid.collapseAll(-1);
},
onRowInserting: e => {
// self.saveCompanyResult(e, true);
},
onRowUpdating: e => {
// self.saveCompanyResult(e, false);
}
}).dxDataGrid("instance");
});
I am trying to add my column with the buttons as shown in the documentation. Here is a snippet:
columns: [
{
type: "buttons",
buttons: [{
name: "save",
cssClass: "my-class"
}]
},
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
]
The problem is that I am getting a compiler error in the line where it says "type: "buttons". Please see the below screenshot for reference:
I have done some searching but cannot seem to find any posts with similar issues. If anyone might have some advice for me where to look for a solution, or point out what I am doing wrong, I would be very grateful.

I have managed to continue using a different approach of adding custom markup to a column, as shown in the below link:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellCustomization/jQuery/Light/

Loop to read all rows in igHierarchicalGrid grid

I need for loop to read all the rows with there child to check the status of check box , in this igHierarchicalGrid i have 4 level , i cant find the best way to read all rows and child one by one
I have tried getInfo(), but this function only get me the Main level of igHierarchicalGrid
function getInfo() {
var $grid = $("#grid");
var RowSelected = $("#grid").igHierarchicalGrid("option", "dataSource");
for (var i = 0; i < RowSelected.length; i++) {
var cell = $grid.igGrid("cellAt", 1, i)
var $checkBox = $(cell.children[0]);
if ($checkBox.prop("checked")) {
updatetrue(RowSelected[i].FCU_SCREEN_NAME, RowSelected[0].FCU_TYPE, RowSelected[i].FCU_PARENT_NODE, RowSelected[i].FCU_CHAILD_NODE);
} else {
updatefalse(RowSelected[i].FCU_SCREEN_NAME, RowSelected[0].FCU_TYPE, RowSelected[i].FCU_PARENT_NODE, RowSelected[i].FCU_CHAILD_NODE);
}
}
alert("Updated Successfuly");
}
this is the grid :
$("#grid").igHierarchicalGrid({
width: "100%",
maxDataBindDepth: 4,
//initialExpandDepth: 4,
dataSource: Main, //Array of objects defined above
fixedHeaders: true,
primaryKey: "FCU_SNO",
autoGenerateColumns: true,
rowExpanding: function (e, args) {
var grid = args.owner, expandedRows, i;
expandedRows = $(args.parentrow).closest('tbody').find('tr[state=e]');
for (i = 0; i < expandedRows.length; i++) {
grid.collapse(expandedRows[i]);
}
},
width: '99%',
height: '480px',
columns: [
{ headerText: "<br/>Code", key: "FCU_SNO", dataType: "int", width: "5%", hidden: true },
{ headerText: "Status", key: "FCU_SCREEN_FLAG", dataType: "bool", width: "5%", template: mytemplate },
{ headerText: "Screen", key: "FCU_SCREEN_NAME", dataType: "string", width: "40%" },
{ headerText: "FCU_TYPE", key: "FCU_TYPE", dataType: "string", hidden: true },
{ headerText: "FCU_PARENT_NODE", key: "FCU_PARENT_NODE", dataType: "number", hidden: true},
{ headerText: "FCU_CHAILD_NODE", key: "FCU_CHAILD_NODE", dataType: "number", hidden: true},
],
autofitLastColumn: false,
autoGenerateColumns: false,
dataSource: Main,
responseDataKey: "results",
autoCommit: true,
primaryKey: "FCU_SNO",
dataRendered: function (evt, ui) {
ui.owner.element.find("tr td:nth-child(4)").css("text-align", "left");
},
features: featuresList,
//defaultChildrenDataProperty: "Details1",
columnLayouts: [{
name: "Level1",
features: featuresList,
childrenDataProperty: "Details1",
autoGenerateLayouts: true,
autoGenerateColumns: false,
fixedHeaders: true,
primaryKey: "FCU_PARENT_NODE",
columns: [
{ headerText: "<br/>Code", key: "FCU_SNO", dataType: "int", width: "5%", hidden: true },
{ headerText: "Status", key: "FCU_SCREEN_FLAG", dataType: "bool", width: "5%", template: mytemplate },
{ headerText: "Screen", key: "FCU_SCREEN_NAME", dataType: "string", width: "40%" },
{ headerText: "FCU_TYPE", key: "FCU_TYPE", dataType: "string", hidden: true },
{ headerText: "FCU_PARENT_NODE", key: "FCU_PARENT_NODE", dataType: "number", hidden: true },
{ headerText: "FCU_CHAILD_NODE", key: "FCU_CHAILD_NODE", dataType: "number", hidden: true },
],
columnLayouts: [
{
name: "Level2",
features: featuresList,
childrenDataProperty: "Details2",
autoGenerateLayouts: true,
autoGenerateColumns: false,
primaryKey: "FCU_PARENT_NODE",
columns: [
{ headerText: "<br/>Code", key: "FCU_SNO", dataType: "int", width: "5%", hidden: true },
{ headerText: "Status", key: "FCU_SCREEN_FLAG", dataType: "bool", width: "5%", template: mytemplate },
{ headerText: "Screen", key: "FCU_SCREEN_NAME", dataType: "string", width: "40%" },
{ headerText: "FCU_TYPE", key: "FCU_TYPE", dataType: "string", hidden: true },
{ headerText: "FCU_PARENT_NODE", key: "FCU_PARENT_NODE", dataType: "number", hidden: true },
{ headerText: "FCU_CHAILD_NODE", key: "FCU_CHAILD_NODE", dataType: "number", hidden: true },
],
columnLayouts: [
{
name: "Level3",
features: featuresList,
childrenDataProperty: "Details3",
autoGenerateLayouts: true,
autoGenerateColumns: false,
primaryKey: "FCU_PARENT_NODE",
columns: [
{ headerText: "<br/>Code", key: "FCU_SNO", dataType: "int", width: "5%", hidden: true },
{ headerText: "Status", key: "FCU_SCREEN_FLAG", dataType: "bool", width: "5%", template: mytemplate },
{ headerText: "Screen", key: "FCU_SCREEN_NAME", dataType: "string", width: "40%" },
{ headerText: "FCU_TYPE", key: "FCU_TYPE", dataType: "string", hidden: true },
{ headerText: "FCU_PARENT_NODE", key: "FCU_PARENT_NODE", dataType: "number", hidden: true },
{ headerText: "FCU_CHAILD_NODE", key: "FCU_CHAILD_NODE", dataType: "number", hidden: true },
],
}
]
}
]
}]
});

The igHierarchicalGrid API offers a method called allChildrenWidgets, which would give you an array of all the child widgets that have been created.
Note that the parent grid creates such instances dynamically when the user expands a given row, not for all the currently visible rows in the parent grid.
That means if you have expanded only a single row, calling allChildrenWidgets would return an array with a single widget instance.
Once you get this array, it would be possible to iterate over it and get the dataSource of every child grid. This dataSource object is a transformed copy of the original data that has been used when initializing the child grid, and once the user checks a checkbox, this dataSource would be updated. You may assign it to a variable, like this:
let currentChild = $("#hierarchicalGrid").igHierarchicalGrid('allChildrenWidgets')[0]
Note the ‘[0]’ at the end – that is because the allChildrenWidgets returns an array. If you use it in a for loop, you would replace it with some dynamic index.
Now that we have a reference to the current child grid, we could call its dataSource’s dataView method – that would give us the current data that is rendered in this child grid, and would allow us to check the records in order to see which ones have been checked:
let currentDataView = child.dataSource.dataView();
// ….
// some custom logic for checking the records….
Please note that allChildrenWidgets returns a flattened array of all child widgets, containing all the hierarchy levels – you would not have to call it on the current child widget recursively in order to get to its level 3 children grids.

How to get items to dropdown list in a field using jsGrid?

This is a jQuery code of my sample project to get details from application side to display in front in a grid which is build by jsGrid.
$("#part_table").jsGrid({
height: "auto",
width: "100%",
autoload: true,
editing: true,
sorting: true,
paging: true,
pageSize: 10,
inserting: true,
loadIndication: false,
filtering: true,
headerRowClass: 'table-green-header',
controller: {
loadData: function (filter) {
function.....
},
updateItem: function (item) {
function.....
}
},
fields: [
{ name: "Id", type: "number", visible: false },
{
name: "CatalogueId", type: "select", **items**: catalouges, valueField: "Id", textField: "CatalougeName", selectedIndex : -1 , title: "Catalouge Name", align: "center"
},
{ name: "DistributorPrice", type: "number", title: "Distributor Price", align: "center", filtering: false, sorting: false },
{ name: "IsActive", type: "checkbox", filtering: false, sorting: false },
{ type: "control" }
],
rowClick: function (args) {
return false;
},
});
Can anyone say how to get a list of items to field by calling to application side via AJAX call ?
Thanks

Load items in advance and then use result in the grid field config, e.g.:
$.ajax({
type: "GET",
url: "/countries/"
}).done(function(countries) {
countries.unshift({ id: "0", name: "" });
$("#jsGrid").jsGrid({
...,
fields: [
...
{ name: "country_id", title: "Country", type: "select", width: 100, items: countries, valueField: "id", textField: "name" }
]
});
});
You can find an example in the jsgrid sample project

You can do multiple simultaneous requests before the grid launches
$.when(
$.get("/api/v1/clients", function(clients) {
db.clients = clients;
}),
$.get("/api/v1/owners", function(owners) {
db.owners = owners;
})
).then(function() {
$("#jsGrid").jsGrid({
...,
fields: [
{ name: "client", title: "Client", type: "select", items: db.clients, valueField: "name", textField: "name" },
{ name: "owner", title: "Owner", type: "select", items: db.owners, valueField: "short_name", textField: "short_name" },
]
});
});

you write the ajax call in loadData of the controller.. something like:
controller: {
loadData: function(filter) {
return $.ajax({
type: "GET",
url: "/api/data",
data: filter,
dataType: "json"
});
}
}
further reference https://github.com/tabalinas/jsgrid-webapi

Kendo UI grid not triggering transport create URL

Ive a kendoUI grid doing CRUD from a web service. For some reason, read command works perfectly and populates my grid.
But when I try to create a new record, despite that it shows the new record in the grid and i can edit its fields, button save does not trigger the web service.
Checking out http logs, I see no hit on the service. Only on "read".
This is the grid's code:
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "libyMsg.php?way=getUsrMsgList"
},
create: {
url: "libyMsg.php?way=createMsg",
type: "PUT"
},
update: {
url: "libyMsg.php?way=updateeMsg",
type: "PUT"
},destroy: {
url: "libyMsg.php?way=destroyMsg",
type: "PUT"
},
batch: true,
pageSize: 10,
schema: {
data: "data",
model: {
id: "msg_id",
fields: {
msg_id: { editable: false, nullable: true },
msg_title: { validation: { required: true } },
msg_content: { validation: { required: true } },
msg_type: { type: "number", validation: { min: 0, required: true }},
msg_date: { type: "date", validation: { required: true } },
msg_status: { type: "number", validation: { min: 0, required: true } }
}
}
},
},
columns: [{ field: "msg_id", width: 40,title: "ID" },
{ field: "msg_title",width: 300, title: "Title" },
{ field: "msg_content", width: 300,title: "Content" },
{ field: "msg_type", width: 40,title: "Type" },
{ field: "msg_date", width: 300,title: "Date" },
{ field: "msg_status", width: 40,title: "Status" }],
scrollable: true,
sortable: true,
editable:true,
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create", "save", "cancel"],
});
});
This is driving me crazy. Anyone?
Ty/M

Your transport is wrong. Try this instead:
transport:{
read :"libyMsg.php?way=getUsrMsgList",
create :{
url :"libyMsg.php?way=createMsg",
type:"PUT"
},
update :{
url :"libyMsg.php?way=updateeMsg",
type:"PUT"
},
destroy:{
url :"libyMsg.php?way=destroyMsg",
type:"PUT"
}
},
create, update and destroy should be part of transport.

Is it possible to have full CRUD functions in kendo grid with local data

I'm currently implementing a kendo grid and i'm populating it with local data.
That is; I have generated a JSON string from my action and supplying that string on the view page.
In the end i would like to know if it is possible to implement full CRUD functions with local data?
here's a sample of the code written so far;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.

Yes you can Here is JSFiddle Hope this will help you.
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});

When binding local data, the Grid widget utilizes an abstraction that represents a local transport. Therefore, it does not require a custom transport; modifications made in the grid are reflected to the bound data source. This includes rollbacks through a cancellation.

There is fully functional example of this in telerik documentation
What you need is define transport block in dataSource object with custom CRUD funtions which update local source.
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}