We Keep Coding

mdbreact (MDBDataTable) add clickEvent for specific columns expect all

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

Metronic Admin Panel Datatable Column Visibility

I'm using Metronic Datatable and I want to hide some ID columns. How can I do it?
Here is my datatable initialization script and I want to hide 'site_id', 'kazan_id', 'boyler_id' columns. I tried the columnDefs option but it didn't work.
$('#tbl-boiler').mDatatable({
data: {
type: 'remote',
source: {
read: {
url: '/Company/GetBoilers/' + siteId,
}
},
},
sortable: false,
pagination: false,
rows: { autoHide: true },
columnDefs:[
{
targets: 0,
visible: false
}
],
columns: [
{
field: 'site_id',
title: 'site_id',
width: 100
},
{
field: 'kazan_id',
title: 'kazan_id',
width: 100
},
{
field: 'boyler_id',
title: 'boyler_id',
width: 100
},
{
field: 'okuma_ucreti',
title: 'Okuma Ücreti',
width: 100
},
{
field: 'kazan_no',
title: 'Kazan Numarası',
width: 120
},
{
field: 'kazan_sayac_no',
title: 'Kazan Sayaç Numarası',
width: 165
},
{
field: 'boyler_no',
title: 'Boyler Numarası',
width: 120
},
{
field: 'boyler_sayac_no',
title: 'Boyler Sayaç Numarası',
width: 170
},
{
field: 'blok_sayisi',
title: 'Bloklar',
width: 250
},
{
field: 'daire_sayisi',
title: 'Daireler',
width: 250
},
{
field: 'sayac_sayisi',
title: 'Sayaclar',
width: 250
},
{
field: 'actions',
title: 'İşlemler',
sortable: !1,
overflow: 'visible',
template: function (t) {
return '<a data-toggle="modal" data-target="#siteform" onclick="getBoiler(' + t.kazan_id + ');" class="edit-site m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Kazan Bilgilerini Düzenle">' +
'<i class="la la-edit"></i>' +
'</a>' +
'<a onclick="deleteBoiler(' + t.kazan_id + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Kazanı Sil">' +
'<i class="la la-trash"></i>' +
'</a>';
},
width: 250
}
]
});

Metronic uses jquery datatables plugin which can be found here.
Just changing the columns you want to hide to the following code should work.
I have just added visible: false to columns. You can remove columnDefs after making this change.
$('#tbl-boiler').mDatatable({
data: {
type: 'remote',
source: {
read: {
url: '/Company/GetBoilers/' + siteId,
}
},
},
sortable: false,
pagination: false,
rows: { autoHide: true },
columns: [
{
field: 'site_id',
title: 'site_id',
visible: false
},
{
field: 'kazan_id',
title: 'kazan_id',
visible: false
},
{
field: 'boyler_id',
title: 'boyler_id',
visible: false
},
{
field: 'okuma_ucreti',
title: 'Okuma Ücreti',
width: 100
},
{
field: 'kazan_no',
title: 'Kazan Numarası',
width: 120
},
{
field: 'kazan_sayac_no',
title: 'Kazan Sayaç Numarası',
width: 165
},
{
field: 'boyler_no',
title: 'Boyler Numarası',
width: 120
},
{
field: 'boyler_sayac_no',
title: 'Boyler Sayaç Numarası',
width: 170
},
{
field: 'blok_sayisi',
title: 'Bloklar',
width: 250
},
{
field: 'daire_sayisi',
title: 'Daireler',
width: 250
},
{
field: 'sayac_sayisi',
title: 'Sayaclar',
width: 250
},
{
field: 'actions',
title: 'İşlemler',
sortable: !1,
overflow: 'visible',
template: function (t) {
return '<a data-toggle="modal" data-target="#siteform" onclick="getBoiler(' + t.kazan_id + ');" class="edit-site m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Kazan Bilgilerini Düzenle">' +
'<i class="la la-edit"></i>' +
'</a>' +
'<a onclick="deleteBoiler(' + t.kazan_id + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Kazanı Sil">' +
'<i class="la la-trash"></i>' +
'</a>';
},
width: 250
}
]
});

Aggregate sum doesn't work in Kendo grid

I got a problem to sum the budget and the balances. This is the code to make a kendo grid with the datasource.
$("#grid").kendoGrid({
dataSource: vm.dataSource,
schema: {
model: {
fields: {
description: { type: "string" },
budget: { type: "number" },
balance1: { type: "number" },
balance2: { type: "number" },
balance3: { type: "number" },
balance4: { type: "number" },
balance5: { type: "number" },
balance6: { type: "number" },
balance7: { type: "number" }
}
}
},
height: 430,
group: {
field: "description", aggregates: [
{ field: "budget", aggregate: "sum" },
{ field: "balance1", aggregate: "sum" },
{ field: "balance2", aggregate: "sum" },
{ field: "balance3", aggregate: "sum" },
{ field: "balance4", aggregate: "sum" },
{ field: "balance5", aggregate: "sum" },
{ field: "balance6", aggregate: "sum" },
{ field: "balance7", aggregate: "sum" }
],
aggregate: [{ field: "description", aggregate: "sum" },
{ field: "balance1", aggregate: "sum" },
{ field: "balance2", aggregate: "sum" },
{ field: "balance3", aggregate: "sum" },
{ field: "balance4", aggregate: "sum" },
{ field: "balance5", aggregate: "sum" },
{ field: "balance6", aggregate: "sum" },
{ field: "balance7", aggregate: "sum" }]
},
filterable: {
mode: "row"
},
pageable: false,
columns: [
{
field: "description",
width: 150,
title: "descriptions",
footerTemplate: "Total (excl. BTW)",
filterable: {
cell: {
operator: "contains"
}
},
}, {
field: "balance1",
width: 130,
title: "balance1",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #=sum#",
filterable: {
cell: {
operator: "gte"
}
}
}, {
field: "budget",
width: 130,
title: "Budget",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #=sum#",
filterable: {
cell: {
operator: "gte"
}
}
}]
})
For this example I use two columns to sum up. When I use the groupFootertemplate tag it doesn't show the total of the budget or balance.
I used this source to sum up:
link

Fix it!
aggregate: [{ field: "description", aggregate: "sum" },
{ field: "balance1", aggregate: "sum" },
{ field: "balance2", aggregate: "sum" },
{ field: "balance3", aggregate: "sum" },
{ field: "balance4", aggregate: "sum" },
{ field: "balance5", aggregate: "sum" },
{ field: "balance6", aggregate: "sum" },
{ field: "balance7", aggregate: "sum" }]
},
This code must be inside the Datasource like this:
dataSource: { aggregate: [{ field: "description", aggregate: "sum" },
{ field: "balance1", aggregate: "sum" },
{ field: "balance2", aggregate: "sum" },
{ field: "balance3", aggregate: "sum" },
{ field: "balance4", aggregate: "sum" },
{ field: "balance5", aggregate: "sum" },
{ field: "balance6", aggregate: "sum" },
{ field: "balance7", aggregate: "sum" }]
},
}

Kendo UI Gantt chart task lable change

I am trying to change Kendo UI Gantt title. i found one demo code, but it was not working
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}],
messages: {
views: {
editor: {
editorTitle:"Edit Task"
}
}
}
});
</script>
Is it possible to change the label on Gantt bars ?
I want some info on left side tree and other info on bars is it possible ?
parent child relation is not retaining if i add gantt columns other than title.
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
descr : { from : "DESCR", type: "string"},
orderId: { from: "ORDERID", type: "number", validation: { required: true } },
parentId: { from: "PARENTID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "START", type: "date" },
end: { from: "END", type: "date" },
Title: { from: "TITLE", defaultValue: "", type: "string" },
percentComplete: { from: "PERCENTCOMPLETE", type: "number" },
summary: { from: "SUMMARY", type: "boolean" },
expanded: { from: "EXPANDED", type: "boolean", defaultValue: true }
}
}
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "descr", title: "Descr", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
var gantt1 = $("#gantt1").kendoGantt({
dataSource: tasksDataSource1,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "title", title: " ", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");

Try starting uppercase:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00")
}],
EDIT:
Answering to your comment:
Define columns definition:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00"),
Description: "Some longer description"
}],
columns: [
{ field: "ID", title: "ID", width: 60 },
{ field: "Title", title: "Title", editable: true, sortable: true },
{ field: "Description", title: "Description", width: 100, editable: true, sortable: true }
],

Saving column with custom editor gives nested column array

I am trying to use a dropdown select as an editor for one of my columns, defined as:
function phoneTypeEditor(container, options) {
$('<input required name="' + options.field + '" data-text-field="typeName" data-value-field="typeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"typeName": "Work",
"typeId": 1
},
{
"typeName": "Branch",
"typeId": 2
},
{
"typeName": "Home",
"typeId": 3
},
{
"typeName": "Mobile",
"typeId": 4
}
],
close: function()
{
}
});
}
In my model I have:
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
type: {
type: 'string',
editable: true,
defaultValue: {
typeId: 1,
typeName: "Work"
},
},
tel: {
type: 'string',
editable: true
}
}
}
And finally my column:
{
field: 'typeId',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
template: '#=typeName#'
},
But when I try to create a row in my grid my post data looks like this:
phoneId:0
type[typeId]:1
type[typeName]:Work
tel:
typeName:
contactId:97558
When it should be:
phoneId:0
typeId:1
typeName:Work
tel:
typeName:
contactId:97558
And I get a new row in my grid that is thin and empty.
How can I get this to work properly?
PS If I don't have:
typeName: {
type: 'string'
}
In my model I get an error saying typeName is not defined.
I now have:
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
typeId: {
type: 'number',
defaultValue: 1
},
tel: {
type: 'string',
editable: true
},
typeName: {
type: 'string',
defaultValue: 'Work',
}
}
}
And...
columns: [
{
field: 'phoneId',
headerTemplate: '<b>Phone Id</b>',
filterable: false,
width: '50px',
hidden: true
},
{
field: 'typeId',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
template: '#=typeName#'
},
{
field: 'tel',
headerTemplate: '<b>Number</b>',
filterable: false,
}
],
But now when I change the option in the dropdown, it appears that you haven't changed it but the actualy number id of the item has changed, just not the text. How do I make it so both the typeId and typeName change?