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);
}
}
});
});
Related
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/
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 have a Kendo UI Grid created in javascript. I have a defalut grouping, then the user can select other groupings. Ineed help with a couple things:
1.I would like to make a custom group header so it includes a count of the children rows.
On mouseover of the Group Header I need to change the related marker on a Google Maps instance. (The group contains the lat and long of the client.
function loadGrid(dataItem) {
$("#grid").kendoGrid({
dataSource: {
dataType: "json",
transport: {
read: {
url: serviceUrl",
dataType: "json",
},
},
schema: {
data: "result.results",
},
group: {
field: "siteName", field: "siteName",
},
},
dataBound: onDataBound,
pageSize: 20,
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
collapse: true,
columns: [
{
field: "dirId",
title: "Dir Id",
hidden: true
},
{
field: "dirName",
Title: "Dir Name",
hidden: true
},
{
field: "siteId",
title: "Site Id",
hidden: true
},
{
field: "siteName",
title: "Site Name",
//hidden: true
},
{
field: "appTypeRefId",
title: "App Type Ref Id",
hidden: true
},
{
field: "appInstName",
title: "App Instance Name",
},
{
field: "appTypeName",
title: "App Type",
},
{
field: "unitId",
title: "Unit Id",
hidden: true
},
{
field: "unitName",
title: "Unit Name"
},
{
field: "controlSystemId",
title: "Control System Id",
hidden: true
},
{
field: "controlSystemName",
title: "Control System Name"
},
{
field: "longitude",
title: "Longitude",
hidden: true
},
{
field: "latitude",
title: "Latitude",
hidden: true
},
],
})
}
Thanks a ton!
Ron
I am working on JQWidget grid. In each row I have record ID along with other fields
there is two things I want to do, (I have done first part, code been updated... is anyone know about part 2 of this question????)
1- make name column in row hyperlink
2- when column cell with hyperlink click, script read the ID of record which in my case 'dataField =StudentDBID' and alert these information.
function BindStudentListToGrid(data)
{
var DataSource =
{
datatype: "json",
datafields: [
{ name : 'StudentDBID'},
{ name: 'RelationshipID' },
{ name: 'Studentid' },
{ name: 'Unite_id'},
{ name: 'Date_start' },
{ name: 'Date_end' },
{ name: 'FullName' },
{ name: 'Locality' }
],
id: 'ID',
localdata: data,
async: false,
};
var dataAdapter = new $.jqx.dataAdapter(DataSource);
$("#StudentListInRelationToStaffGrid").jqxGrid(
{
source: dataAdapter,
theme: 'classic',
width: '100%',
sortable: true,
pagesize: 2,
pageable: true,
autoheight: true,
columns: [
{ text: 'StudentDB ID', datafield: 'StudentDBID', hidden: true },
{ text: 'Relationship ID', datafield: 'RelationshipID', hidden: true },
{ text: 'Student ID', datafield: 'Studentid', hidden: true },
{ text: 'Unite ID', datafield: 'Unite_id', hidden: true },
{ text: 'From', datafield: 'Date_start', width: 200 },
{ text: 'To', datafield: 'Date_end', width: 200 },
{ text: 'Name', datafield: 'FullName', cellsrenderer: linkrenderer },
{ text: 'Locality', datafield: 'Locality' }
]
});
}
var linkrenderer = function (row, column, value) {
return "<a href=#>" + value + "</a>";
}
$('#StudentListInRelationToStaffGrid').on('cellclick', function (event) {
if (event.args.datafield == "FullName")
{
alert("A cell has been clicked:" + event.args.rowindex + ":" + event.args.datafield + event.args.value );
}
});
my data is coming in json format
In order word, how can read column field by row index as I can get that using click event???
here is complete answer
$("#StudentListInRelationToStaffGrid").jqxGrid(
{
source: dataAdapter,
theme: 'classic',
width: '100%',
sortable: true,
pagesize: 2,
pageable: true,
autoheight: true,
columns: [
{ text: 'StudentDB ID', datafield: 'StudentDBID', hidden: true },
{ text: 'Relationship ID', datafield: 'RelationshipID', hidden: true },
{ text: 'Student ID', datafield: 'Studentid', hidden: true },
{ text: 'Unite ID', datafield: 'Unite_id', hidden: true },
{ text: 'From', datafield: 'Date_start', width: 200 },
{ text: 'To', datafield: 'Date_end', width: 200 },
{ text: 'Name', datafield: 'FullName', cellsrenderer: linkrenderer },
{ text: 'Locality', datafield: 'Locality' }
]
});
}
var linkrenderer = function (row, column, value) {
return "<a href=#>" + value + "</a>";
}
$('#StudentListInRelationToStaffGrid').on('cellclick', function (event) {
if (event.args.datafield == "FullName")
{
alert("A cell has been clicked:" + event.args.rowindex + ":" + event.args.datafield + event.args.value);
var datarow = $('#StudentListInRelationToStaffGrid').jqxGrid('getrowdata', event.args.rowindex);
alert(datarow.StudentDBID);
}
});
I have a grid where each row has a select drop down box in with values.
When an item is selected, how can I make the grid reload to reflect the change?
The reason I want to do this is because the item selected from the drop down effects an amount in another column.
Here is the code for my dropdown:
function shippingModelSelect(container, options)
{
$('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"modelName": "Individual shipping cost",
"modelId": 1
},
{
"modelName": "Based on weight",
"modelId": 2
},
{
"modelName": "Based on value",
"modelId": 3
}
],
close: function()
{
handleChange();
}
});
}
My handle change function:
var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
if(input && value)
{
detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
gridAlert.fadeIn('slow', function(){
setTimeout(function(){
gridAlert.fadeOut();
}, 2000)
});
}
dataSource.sync();
}
And finally my grid setup:
dataSource = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
transport: {
read: {
url: ROOT+'products/manage'
},
update: {
url: ROOT+'products/set-product',
type: "POST",
data: function(data)
{
data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
return data;
}
}
},
pageSize: 20,
sort: {
field: 'id',
dir: 'desc'
},
error: function(e) {
alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
},
schema: {
data: "data",
total: "rowcount",
model: {
id: "id",
fields: {
id: {
type: 'number',
editable: false
},
SKU: {
type: "string"
},
name: {
type: "string"
},
dateAdded: {
type: "date",
format: "{0:yyyy/MM/dd hh:mm}",
editable: false
},
shippingModel: {
type: "string"
},
shippingModelId: {
type: "number"
},
price: {
type: "number"
}
}
}
}
})
$('#productGrid').kendoGrid({
dataSource: dataSource,
autoBind: true,
columns: [
{
field: "image",
title: "Image",
width: 30,
template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
},
{
field: "SKU",
title: "SKU",
width: 50,
headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
},
{
field: "stockQuantity",
title: "Quantity",
width: 30
},
{
field: "name",
title: "Name",
width: 200
},
{
field: "dateAdded",
title: "Date Added",
width: 80,
template: "#= niceDate #"
},
{
field: "shippingModelId",
title: "Shipping Model",
width: 50,
editor: shippingModelSelect,
template: "#= shippingModel #"
},
{
field: "price",
title: "Price",
width: 80,
//format: "{0:c}",
template: "#= '£'+price.toFixed(2)+'<br /><span class=\"grey\">+£'+shipping+' shipping</span>' #"
}
],
sortable: true,
editable: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50]
},
scrollable: false,
reorderable: true,
edit: function(e) {
var value;
var numericInput = e.container.find("[data-type='number']");
// Handle numeric
if (numericInput.length > 0)
{
var numeric = numericInput.data("kendoNumericTextBox");
numeric.bind("change", function(e) {
value = this.value();
handleChange(numericInput, value);
});
return;
}
var input = e.container.find(":input");
// Handle checkbox
if (input.is(":checkbox"))
{
value = input.is(":checked");
input.change(function(){
value = input.is(":checked");
handleChange(input, value);
});
}
else
{
// Handle text
value = input.val();
input.keyup(function(){
value = input.val();
});
input.change(function(){
value = input.val();
});
input.blur(function(){
handleChange(input, value);
});
}
}
}
)
You will need to do two things.
Wait for changes to finish syncing
Tell the grid to re-read the datasource
This should do both for you
dataSource.bind("sync", function(e) {
$('#productGrid').data("kendoGrid").dataSource.read();
});
For more info see the datasource sync event and datasource read method on their docs site.