I have added clickEvent in my code fo MDBDataTable. I have some columns in table, I have added clickEvent but it applying for all columns. I need click event for all columns except "addBtn" column. Becausse it is contains buttons - Edit and Delete.
const data = {
columns: [
{
label: "First Name",
field: "firstName",
sort: "asc",
width: 150,
},
{
label: "Last Name",
field: "lastName",
sort: "asc",
width: 150,
},
{
label: "Email",
field: "email",
sort: "asc",
width: 270,
},
{
label: "Role",
field: "authorities",
sort: "asc",
width: 200,
},
{
label: "Contact",
field: "phoneNumber",
sort: "asc",
width: 100,
},
{
label: "Type",
field: "userType",
sort: "asc",
width: 100,
},
{
label: "Action",
field: "addBtn",
sort: "asc",
width: 300,
},
],
rows:
userdData &&
userdData.length > 0 &&
userdData.map(rec => {
return {
firstName: rec?.firstName,
lastName: rec?.lastName,
email: rec?.email,
authorities: rec?.authorities[0],
phoneNumber: rec.phoneNumber !== null ? rec.phoneNumber !== null : "",
userType: rec?.userType,
addBtn: actionButtons(rec, rec?.id),
clickEvent: () => handleClick(rec)
}
}),
}
I have attached screen shot of the my page
I want to print a boolean value from JSON into a table, if I access directly to the status field, an empty value is displayed
here is an example of json file:
{
'name':'client'
'status':true,
'method':'masterCard',
'amount':'1700',
}
jsx file :
const columns = [
{
title: "name",
dataIndex: "name",
key: "name",
width: "20%"
},
{
title: "status",
dataIndex: "status",
key: "status",
width: "20%"
},
{title: "Method Paiment",
dataIndex: "method",
key: "method",
width: "20%",
}]
The solution i found is to do a condition (is true or false ):
const columns = [
{
title: "name",
dataIndex: "name",
key: "name",
width: "20%"
},
{
title: "status",
dataIndex: "status",
key: "status",
width: "20%",
render: statut => {
if (statut == true) {
return (
<Tag color="#1890ff" key={statut}>
Is True
</Tag>
);
}
return (
<Tag color="#d48806" key={statut}>
Is False
</Tag>
);
}
},
{title: "Method Paiment",
dataIndex: "method",
key: "method",
width: "20%",
}]
The following Kendo grid with a dropdown. The dropdown AccountCode item is in form of an object as below;
The following is used to display the details;
function loadGrid() {
$("#grdItems").kendoGrid({
dataSource: itemDS,
pageable: {
refresh: false,
pageSizes: false
},
aggregate: [{ field: "Amount", aggregate: "sum" }],
columns: [ {
field: "CostCenter",
title: "Cost Center",
editor: costCenterDropDownEditor,
template: "#:CostCenter.Description#"
}, {
field: "AccountCode",
title: "Account Code",
editor: accountDropDownEditor,
template: "#AccountCode.AccountDescription#"
}, {
field: "Description",
}, {
field: "BillNumber",
title: "Bill Number",
},
{
field: "Amount",
format: "{0:n}",
footerTemplate: "Sum: #= kendo.toString(sum, 'n')#"
},
{ command: [{ name: "edit", text: "MODIFY" }], title: " ", width: "120px" }],
editable: "popup"
});
}
and it looks like this when displayed;
How can I insert a placeholder when the dropdown object is empty as shown in the first image? Tried the usual placeholder tag, but it doesn't seem to work.
EDIT: Code added
I'm pretty sure those strings are just javascript code.
"#:CostCenter.Description.length > 0 ? CostCenter.Description : 'placeholder'#"
I want to sort Month-year(MMM-yyyy) in kendo ui grid. but sorting is in alphabet.
Example: current sorting is working as below:
Apr-2010
Apr-2012
Apr-2015
Feb-2010
Feb-2011
Jul-2015
Jul-2016
but i want below output:
Feb-2010
Apr-2010
Feb-2011
Apr-2012
Apr-2015
Jul-2015
Jul-2016
function loadevent(dataval){
$("#grid").kendoGrid({
dataSource: {
type: "json",
data: dataval,
schema:{
data :'sales',
model: {
fields: {
SBU: { type: "string" },
CLIENT : { type: "string" },
REGION : { type: "string" } ,
DELIVERY : { type: "string" } ,
PLAN : { type: "number" },
POTENTIAL : { type: "number" },
ESTIMATE : { type: "number" },
ACTUAL : { type: "number" },
ACTUALGAP : { type: "number" },
SALESMGN: { type: "string" },
MONTHYEAR: { type: "string" },
QUARTER: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
group: {
field: "QUARTER", aggregates: [
// { field: "CLIENT", aggregate: "count" },
{ field: "MONTHYEAR", aggregate: "sum" },
{ field: "PLAN", aggregate: "sum" },
{ field: "POTENTIAL", aggregate: "sum" },
{ field: "ESTIMATE", aggregate: "sum" },
{ field: "ACTUAL", aggregate: "sum" },
{ field: "ACTUALGAP", aggregate: "sum" },
{ field: "SALESMGN", aggregate: "count" }
]
},
aggregate: [
// { field: "CLIENT", aggregate: "count" },
{ field: "QUARTER", aggregate: "sum" },
{ field: "PLAN", aggregate: "sum" },
{ field: "POTENTIAL", aggregate: "sum" },
{ field: "ESTIMATE", aggregate: "sum" },
{ field: "ACTUAL", aggregate: "sum" },
{ field: "ACTUALGAP", aggregate: "sum" },
{ field: "SBU", aggregate: "count" }
// { field: "UnitsInStock", aggregate: "max" }
]
},
//height : '100%',
sortable: true,
//pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
scrollable: true,
height : gridheight,
columns: [
// { width: 300, field: "CLIENT", title: "Client", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ width: 100, field: "CLIENT", title: "Client" },
{ width: 100, field: "REGION", title: "Region"},
{ width: 100, field: "DELIVERY", title: "Delivery"},
//{ width: 300, field: "PLAN", title: "Plan" aggregates: ["sum"] },
//{ width: 300, field: "POTENTIAL", title: "Potential" aggregates: ["sum"] },
//{ width: 300, field: "ESTIMATE", title: "Estimate", aggregates: ["sum"] },
// { width: 300, field: "ACTUAL", title: "Actual", aggregates: ["sum"] },
// { width: 300, field: "ACTUALGAP", title: "Actual Vs Plan Gap", aggregates: ["sum"] },
{ width: 100, field: "QUARTER", title: "Quarterly" },
{ width: 100, field: "PLAN", title: "Plan" ,aggregates: ["sum"],template: '<div style="text-align:right;">#= kendo.format("{0:n0}",PLAN) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "POTENTIAL", title: "Potential" ,aggregates: ["sum"],template: '<div style="text-align:right;">#= kendo.format("{0:n0}",POTENTIAL) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "ESTIMATE", title: "Estimate", aggregates: ["sum"] ,template: '<div style="text-align:right;">#= kendo.format("{0:n0}",ESTIMATE) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "ACTUAL", title: "Actual", aggregates: ["sum"],template: '<div style="text-align:right;">#= kendo.format("{0:n0}",ACTUAL) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #' ,footerTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #'},
{ width: 100, field: "ACTUALGAP", title: "Actual Vs Plan Gap", aggregates: ["sum"] ,template: '<div style="text-align:right;">#= kendo.format("{0:n0}",ACTUALGAP) #</div>',groupFooterTemplate: '<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #',footerTemplate:'<div style="text-align:right;">#= kendo.format("{0:n0}",sum) #' },
{ width: 100, field: "MONTHYEAR", title: "Month-Year" }
// { width: 100, field: "ACTUALGAP", title: "Actual Vs Plan Gap", aggregates: ["sum"] ,footerTemplate: '#= kendo.toString(sum, "##,#") #'},
//{ width: 300, field: "SBU", title: "SBU", groupHeaderTemplate: "SBU: #= value # (Count: #= count#)" }
]
});
}
How can I create footer Template for a koGrid to display sum of a column?
gridOptions : {
displaySelectionCheckbox: false,
data: items,
// selectedItems: self.selectedItems,
multiSelect: false,
enableColumnResize: true,
columnDefs: [
{ field: 'fun_id', displayName: 'fun_id', visible: false },
{ field: 'test', displayName: 'Test' },
{ field: 'details', displayName: 'Details'},
{ field: 'qty', displayName: 'Qty' },
{ field: 'price', displayName: 'Price' },
{ field: 'discount', displayName: 'Discount' },
{ field: 'empno', displayName: 'EmpNo' },
{ field: 'promo', displayName: 'Promo' },
{ field: 'Delete', cellTemplate: myCellTemplate, width: 60 },
]
}
Here I want to print the sum of 'price' field as Total in Footer.How can I achieve this?
From looking at the Kendo aggregation demo all you need to do is define an aggregate property