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.
Related
Currently making a Table in Tabulator works fine, however when I add "groupToggleElement: "header" " it breaks the layout option of the Tabulator.
I'm unsure if I'm doing something wrong or if it's a bug.
table = new Tabulator("#myTable", {
pagination: "local",
paginationSize: 30,
movableColumns: true,
resizableRows: true,
initialSort: [
{ column: "FullName", dir: "asc" },
],
groupBy: "FullName",
groupStartOpen: false,
groupToggleElement: "header",
layout: "fitDataFill",
layoutColumnsOnNewData: true,
columns: [
{ title: "Name", field: "FullName", sorter: "string", align: "center" },
{ title: "Activation Key", field: "ActivationKey", sorter: "string", align: "center" },
{
title: "Expiry Date", field: "SubscriptionExpiryDate", sorter: "string", align: "center", formatter: "datetime", formatterParams: {
inputFormat: "YYYY-MM-DDT hh:mm:ss",
outputFormat: "DD/MMM/YYYY",
invalidPlaceholder: "No Expiry Date",
}
},
{ title: "Device Points", field: "Seats", sorter: "number", align: "center" }
]
});
$.ajax({
url: "../API/Analytics/GetCustomerData",
type: "get",
async: true,
success: function (data) {
table.setData(data.dataObject);
},
error: function () {
// error thing here
},
timeout: 10000
});
Call
table.redraw(true) to redraw the table on changes
http://tabulator.info/docs/4.3/layout#redraw
I've searched for an example but have not been able to find one. My goal is to reuse the CreateGrid method by passing in different variables. My problem is that I am not able to dynamically set the columns in the grid. I cannot figure out how to pass the columns variable. If anyone knows please submit an example or direct me to an example. Any help is appreciated.
Thanks...
Example:
$(document).ready(function () {
var blnAuto = false;
var dogs = #Html.Raw(Json.Encode(Model.DogList));
var gridA = "#gridDog";
var dogColumns = '{ key: "Type", headerText: "Type", dataType: "string", width: "50%"},{ key: "Name", headerText: "Name", dataType: "string", width: "50%" }'
CreateGrid(dogs, gridA, blnAuto, dogColumns);
var cars = #Html.Raw(Json.Encode(Model.CarList));
var gridB = "#gridCar";
var carColumns = '{ key: "Make", headerText: "Make", dataType: "string", width: "34%"},{ key: "Model", headerText: "Model", dataType: "string", width: "33%" }, { key: "Year", headerText: "Year", dataType: "string", width: "33%"}'
CreateGrid(cars, gridB, blnAuto, carColumns)
})
function CreateGrid(data, grid, autoGen, columnVariable)
{
var bln = false;
$(grid).igGrid({
width: "100%",
dataSource: data,
dataSourceType: "json",
autoGenerateColumns: bln,
columns: [ columnVariable ],
features: [
{
name: "Sorting",
type: "local",
applySortedColumnCss: false,
sortedColumnTooltip: "",
unsortedColumnTooltip: ""
}
]
});
}
</script>
I'm embarrassed that I did not notice the columns is an array.
Set the columns such as:
var carColumns = [
{ key: "Make", headerText: "Make", dataType: "string", width: "34%" },
{ key: "Model", headerText: "Model", dataType: "string", width: "33%" },
{ key: "Year", headerText: "Year", dataType: "string", width: "33%"}
]
var dogColumns = [
{ key: "Type", headerText: "Type", dataType: "string", width: "50%" },
{ key: "Name", headerText: "Name", dataType: "string", width: "50%" }
]
Hope it helps someone out there.
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" }
]
});
});
I am new to kendo and javascript so excuse any lapses in knowledge... Below I have a basic kendo hierarchical grid. When I try to add a new record to the child grid, the record gets added via a post method in my controller but the parent reference ID doesn't get passed correctly and instead 0 gets passed as the foreign key reference to the child table.
Here is my Parent Grid
//-----------------KENDO GRID DATA-----------------
var datasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
//url: sBaseUrl,
url: baseUrl + "StationLogPaperTicketOdata",
type: "get",
dataType: "json",
contentType: "application/json"
},
update: {
type: "PUT",
url: function (data) {
return baseUrl + "StationLogPaperTicketOdata(" + data.log_id + ")";
},
dataType: "json",
},
//parameterMap: function(options, operation) {
// if (operation !== "read" && options.models) {
// return {models: kendo.stringify(options.models)};
// }
//}
},
schema: {
data: "value",
total: function (data) {
return data['odata.count'];
},
model: {
id: "log_id",
fields: {
log_id: { type: "number" },
log_station: { type: "string" },
log_sourceCode: { type: "string", nullable: true },
log_carrierName: { type: "string", nullable: true },
log_ticketNumber: { type: "string", nullable: true },
log_deliveryTS: { type: "date" },
log_leaseNumber: { type: "string", nullable: true },
log_leaseName: { type: "string", nullable: true },
log_type: { type: "string" },
log_rackNumber: { type: "number", nullable: true },
log_logNumber: { type: "number", nullable: true },
log_driverFirstName: { type: "string", nullable: true },
log_driverLastName: { type: "string", nullable: true },
log_linkedTicketNumber: { type: "string", nullable: true },
log_volumeGross: { type: "number" },
log_volumeNet: { type: "number", nullable: true },
log_originalDestination: { type: "string", nullable: true },
log_lastModifiedTS: { type: "date", editable: false },
log_lastModifiedBy: { type: "string", editable: false },
log_meterReadOpen: { type: "number", nullable: true },
log_volumeNetCalculated: { type: "number", nullable: true },
log_isDeleted: { type: "string", nullable: true },
log_detailIsDeleted: { type: "string", nullable: true },
log_paperTicketIsApproved: { type: "string", nullable: true, editable: false },
log_accountingDate: { type: "date", nullable: true },
log_stationNumber: { type: "string", nullable: true },
log_isPickup: { type: "string", nullable: true },
log_operatorNumber: { type: "string", nullable: true },
log_controlNumber: { type: "string", nullable: true },
log_dispatchConfirmationNumber: { type: "string", nullable: true },
log_groupId: { type: "number", nullable: true },
log_groupSource: { type: "string", nullable: true },
log_isTank: { type: "string", nullable: true },
log_meterReadClose: { type: "number", nullable: true },
log_obsTemperature: { type: "number", nullable: true },
log_tankTemperature: { type: "number", nullable: true },
log_obsGravity: { type: "number", nullable: true },
log_bswPercent: { type: "number", nullable: true },
log_gaugeBeforeUnloadFeet: { type: "number", nullable: true },
log_gaugeBeforeUnloadInches: { type: "number", nullable: true },
log_gaugeBeforeUnloadQuarter: { type: "number", nullable: true },
log_comments: { type: "string", nullable: true }
}
}
},
pageSize: 50,
serverPaging: true,
serverfilering: true,
serverSorting: true,
sort: { field: "log_id", dir: "asc" },
});
//-----------------KENDO GRID-----------------
$("#grid").kendoGrid({
dataSource: datasource,
pageable:
{
refresh: true,
pageSizes: [10,25,50,100],
buttonCount: 5
},
height: 600,
width: 500,
sortable: true,
scrollable: true,
reorderable: true,
toolbar: ["save", "cancel"],
editable: true,
filterable: {
mode: "row"
},
selectable: "row",
resizable: true,
detailInit: detailInit,
dataBound: onDataBound,
columns: [
//{ field: "log_id", title: "ID", width: 130 }, //THIS IS FOR TESTING PURPOSES
{
field: "log_paperTicketIsApproved",
title: "Approved",
width: 130,
template:
"# if(log_paperTicketIsApproved == 'Y') { #" +
"# approved = true #" +
"# } else { #" +
"# approved = false #" +
"# } #" +
"<input name='paperTicketIsApproved' class='check_row' type='checkbox' data-bind='checked: approved' #= approved ? checked='checked' : '' #/>"
},
{ field: "log_type", title: "Source", width: 130 },
{ field: "log_rackNumber", title: "Connect Point (LACT)", width: 150 },
{ field: "log_sourceCode", title: "Carrier Source Code", width: 140 },
{ field: "log_carrierName", title: "Carrier Name", width: 130 },
{ field: "log_ticketNumber", title: "Ticket Number", width: 130 },
{ field: "log_deliveryTS", title: "Date", width: 160, format: "{0:MM-dd-yyyy}" },
{ field: "log_deliveryTS", title: "Time", width: 140, format: "{0:hh:mm tt}" },
{ field: "log_volumeGross", title: "Gross BBLs", width: 140 },
{ field: "log_volumeNet", title: "Net BBLs", width: 140 },
{ field: "log_leaseName", title: "Lease Name", width: 200 },
{ field: "log_driverFirstName", title: "Driver First Name", width: 160 }, // template: "#= log_driverFirstName # #=log_driverLastName #" },
{ field: "log_driverLastName", title: "Driver Last Name", width: 160 },
{ field: "log_bswPercent", title: "Obs. BS&W %", width: 140 },
{ field: "log_obsGravity", title: "Obs. Gravity", width: 130 },
{ field: "log_obsTemperature", title: "Obs. Temperature", width: 150 },
{ field: "log_linkedTicketNumber", title: "Linked Ticket Number", width: 150 },
{ field: "log_originalDestination", title: "Original Destination", width: 150 },
{ field: "log_lastModifiedBy", title: "Last Modified By", width: 170 },
{ field: "log_lastModifiedTS", title: "Last Modified Date", width: 170, format: "{0:MM-dd-yyyy hh:mm tt}" },
//{ field: "log_station", title: "Station", width: 140 } //THIS IS FOR TESTING PURPOSES ONLY
]
});
var grid = $("#grid").data("kendoGrid");
//grid.bind("dataBound", onDataBound);
grid.table.on("click", ".check_row", selectRow)
}
and here is the Child Grid
//-----------------KENDO CHILD-GRID DATA-----------------
function detailInit(e) {
var datasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: baseUrl + "StationLogComments",
type: "get",
dataType: "json"
},
update: {
type: "put",
url: function (data) {
return baseUrl + "StationLogComments(" + data.log_commentID + ")";
},
dataType: "json",
contentType: "application/json"
},
create: {
url: baseUrl + "StationLogComments",
type: "post",
dataType: "json"
},
},
schema: {
data: "value",
total: function (data) {
return data['odata.count'];
},
model: {
id: "log_commentID",
fields: {
log_commentID: { type: "number" },
log_id: { type: "number" },
log_comment: { type: "string" },
log_commentCreatedBy: { type: "string" },
log_commentCreatedDate: { type: "date", editable: false }
}
}
},
serverPaging: true,
serverSorting: true,
sort: { field: "log_commentCreatedDate", dir: "asc" },
serverFiltering: true,
width: 100,
pageSize: 10,
filter: { field: "log_id", operator: "eq", value: e.data.log_id }
});
//-----------------KENDO CHILD-GRID-----------------
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: datasource,
scrollable: false,
toolbar: ["create", "save", "cancel"],
saveChanges: function (e) {
debugger;
},
editable: true,
resizable: true,
width: 600,
//sortable: true,
//pageable: true,
columns: [
{ field: "log_id", title: "log_id", width: "100px" },
{ field: "log_comment", title: "Comment", width: "500px" },
{ field: "log_commentCreatedBy", title: "Created By", width: "100px" },
{ field: "log_commentCreatedDate", title: "Created Date", format: "{0:MM-dd-yyyy hh:mm tt}" }
]
});
}
What can I put in saveChanges: to get my desired result? Thanks
RESOLVED!!
I found my own answer and am posting it here in the hopes that it may help someone else..
In the model of my Child Grid I add this line of code to the foreign key reference:
defaultValue: e.data.log_id
so now my child grid model looks like this
model: {
id: "log_commentID",
fields: {
log_commentID: { type: "number" },
log_id: { type: "number", defaultValue: e.data.log_id },
log_comment: { type: "string" },
log_commentCreatedBy: { type: "string" },
log_commentCreatedDate: { type: "date", editable: false }
}