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.
Related
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 I create a table using DevExtreme js with multilevel summaries values. For example:
You can have two levels of Master Detil dxDataGrid
$(function(){
$("#gridContainer").dxDataGrid({
dataSource: employees,
keyExpr: "ID",
showBorders: true,
columns: [{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "State",
width: 125
}, {
dataField: "BirthDate",
dataType: "date"
}
],
masterDetail: {
enabled: true,
template: function(container, options) {
var currentEmployeeData = options.data;
$("<div>")
.addClass("master-detail-caption")
.text(currentEmployeeData.FirstName + " " + currentEmployeeData.LastName + "'s Tasks:")
.appendTo(container);
$("<div>")
.dxDataGrid({
columnAutoWidth: true,
showBorders: true,
//Here your second level of Master Detail
columns: ["Subject", {
dataField: "StartDate",
dataType: "date"
}, {
dataField: "DueDate",
dataType: "date"
}, "Priority", {
caption: "Completed",
dataType: "boolean",
calculateCellValue: function(rowData) {
return rowData.Status == "Completed";
}
}],
dataSource: currentEmployeeData.Tasks
}).appendTo(container);
}
}
});
});
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 have a Kendo UI grid, that will only display values like [object object] even if the type is "string". I have the datasource for the grid working with a graph, so I know there is data, and that it should be showing other values.
I'm using MVVM
Datasource:
var dataSource = new kendo.data.DataSource({
type: "everlive",
autoSync: true,
serverFiltering: true,
filter: {
field: "DeviceID",
operator: "eq",
value: device.uuid
},
transport: {
// binding to the Order type in Everlive
typeName: "BreakPoint"
},
schema: {
model: {
id: "Id",
fields: {
// default Everlive fields
CreatedBy: {
type: "string"
},
CreatedAt: {
type: "date"
},
ModifiedAt: {
type: "date"
},
// type fields
Energi: {
type: "number"
},
Note: {
type: "string"
},
activity_green: {
type: "bool"
},
activity_yellow: {
type: "bool"
},
activity_red: {
type: "bool"
}
}
}
}
});
HTML:
<div data-role="grid"
data-theme="silver"
date-scrollable="true"
data-pageable="true"
data-columns="[
{ 'field': 'CreatedAt', template:'#= formatAddress(data) #'},
{ 'field': 'Note' },
{ field: 'Energi', format:'{0:c}'},
{ field: 'activity_green', title: 'Grøn Aktivitet', format:'{0:c}'},
{ field: 'activity_yellow', title: 'Gul Aktivitet', format:'{0:c}'},
{ field: 'activity_red', title: 'Rød Aktivitet', format:'{0:c}'}
]"
data-bind="source: ds"
style="height: 200px"></div>