Related
I have an EJ2 grid that is grouped. Before the grid is rendered, the data from the business class is sorted by sequence number which is the requirement. When the grid renders the data, the grouping is changing the initial sort order to alphabetical. I have not been able to change the order back to by Sequence number. Any help would be greatly appreciated. Below is the grid definition.
var grid = new ej.grids.Grid({
dataSource: gridDS,
allowExcelExport: true,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport', "Search"],
allowGrouping: true,
dataBound: bound,
allowSorting: true,
allowMultiSorting: true,
groupSettings: { captionTemplate: '#captiontemplate', showDropArea: false, columns: ['DistrictTypeName', 'DistrictName'] },
sortSettings: {
columns:
[{ field: 'DistrictTypeSequence', direction: 'Ascending' },
{ field: 'DistrictSequence', direction: 'Ascending' },
{ field: 'RaceSequence', direction: 'Ascending' }]
},
columns: [
{ field: "DistrictTypeId", visible: false },
{ field: "DistrictId", visible: false},
{ field: "RaceId", visible: false },
{ field: "DistrictTypeName", headerText: "District Type", width: 90},
{ field: "DistrictName", headerText: "District", width: 90},
{ field: "RaceName", headerText: "", width: 90 },
{ field: "DistrictTypeSequence", visible: false },
{ field: "DistrictSequence", visible: false },
{ field: "RaceSequence", visible: false },
{
headerText: "",
template: "#viewTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#editTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#deleteTemplate",
textAlign: "center",
width: 15
},
],
});
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/
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.
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
I am building grid using JSGrid (js-grid.com). I want call back methods to implement validations before adding new record or updating record. Documentation provided on website is not clearly mentioned how to implement one. Please refer http://js-grid.com/docs/#callbacks.
I need help how can i implement callback method cause i am new to JSGrid & Scripting. Following is my sample code. Please guide me where to put callback methods.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
Thanks in advanced.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
// added for demo
onItemInserting: function(args) {}, // before controller.insertItem
onItemInserted: function(args) {}, // on done of controller.insertItem
onItemUpdating: function(args) {}, // before controller.updateItem
onItemUpdated: function(args) {}, // on done of controller.updateItem
onItemDeleting: function(args) {}, // before controller.deleteItem
onItemDeleted: function(args) {}, // on done of controller.deleteItem
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});