We Keep Coding

Kendo UI Grid - Custom command button disabled depending on boolean property

How can I set the class to disabled for a custom command on a Kendo grid depending on the boolean value of a property?
I want to use this approach to make the button disabled:
https://docs.telerik.com/kendo-ui/knowledge-base/disable-the-grid-command-buttons
Javascript:
{ command: { name: "custom", text: "Exclude", click: excludeCategorization }, title: " ", width: "60px" }
I want to add a condition like this using the property IsEnabled but if possible using the k-state-disabled class
#= IsEnabled ? disabled="disabled" : "" #

I don't believe you can assign classes conditionally through a template, however you can use the dataBound event to crawl through the rows and manipulate the classes. I would start with all of them disabled and then enable the ones that need to be active, but you can build your own logic. Here's an example:
<div id="grid"></div>
<script>
var grid;
$("#grid").kendoGrid({
dataBound:function(e){
var grid = $("#grid").data("kendoGrid");
var items = e.sender.items();
items.each(function (index) {
var dataItem = grid.dataItem(this);
$("tr[data-uid='" + dataItem.uid + "']").find(".excludeCategorization").each(function( index ) {
if(dataItem.isEnabled)
{
$(this).removeClass('k-state-disabled')
}
});
})
},
columns: [
{ field: "name" },
{ field: "enabled" },
{ command: [{ className: "k-state-disabled excludeCategorization", name: "destroy", text: "Remove" },{ className: "k-state-disabled", name: "edit", text: "Edit" }] }
],
editable: true,
dataSource: [ { name: "Jane Doe", isEnabled: false },{ name: "John Smith", isEnabled: true } ]
});
</script>
Here's a link to a Dojo: https://dojo.telerik.com/ubuneWOB

Kendo UI TreeView Drag and Drop get the destination (dropped) treeview object

I have two TreeViews structure with drag and drop functionality.
The nodes from both the Treeviews can be dragged and dropped on one another.
If I am dragging some content from source to destination i want updated list of destination in console
For reference you can check link here.
In this DEMO I can move something from one category to another but I want to capture the updated list of category containing all the subcategory.
Here is the snippet of my code
<div id="example">
<div class="demo-section k-content">
<h4>Treeview One</h4>
<div id="treeview-left"></div>
<h4 style="padding-top: 2em;">Treeview Two</h4>
<div id="treeview-right"></div>
</div>
<script>
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
$("#treeview-right").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "Storage", expanded: true, items: [
{ text: "Wall Shelving" },
{ text: "Floor Shelving" },
{ text: "Kids Storage" }
]
},
{ text: "Lights", items: [
{ text: "Ceiling" },
{ text: "Table" },
{ text: "Floor" }
]
}
]
});
</script>
how can I achieve this?
Thank you

I have created a JsFiddle DEMO here.
You will need to bind the dragend event of both of your Treeviews to a function and then you can get the destination Treeview list from there. Here is the snippet from the DEMO:
function tree_dragend(e) {
alert("See your console");
console.log("Drag end sourceNode = ", e.sourceNode, "dropPosition = ", e.dropPosition, "destinationNode = ", e.destinationNode);
var destinationTreeviewDOMElement = $( e.destinationNode ).closest( "div.k-treeview" );
console.log("destinationTreeviewDOMElement = ", destinationTreeviewDOMElement);
var destinationTreeview = $(destinationTreeviewDOMElement).data("kendoTreeView");
console.log("destinationTreeview = ", destinationTreeview);
console.log("destinationTreeviewData = ", destinationTreeview.dataSource.data());
}
var treeview_left = $("#treeview-left").data("kendoTreeView");
var treeview_right = $("#treeview-right").data("kendoTreeView");
treeview_left.bind("dragend", tree_dragend);
treeview_right.bind("dragend", tree_dragend);

How to give two indentical combo one on grid headr and one as grid column widget for store filter

I have one widget column header by which I am selecting the value and filtering the grid store. I want exact the same on grid header as well. There for I am giving one combo with same values.
Here is my code for column header
header: {
items: [{
xtype: 'combo',
displayField: "displayName",
fieldLabel: 'Some Label',
valueField: 'title',
displayField: 'title',
hidden : true,
queryMode: 'local',
value : 1,
autoSelect : true,
//dataindex:"MUTST",
store: {
fields: ["id", "displayName"],
data: [
{ "id": "1", "title": "Test1" },
{ "id": "2", "title": "Test2" },
{ "id": "3", "title": "Test3" }
]
},
listeners : {
select : function(combo , record , eOpts){
debugger;
var sg = this.up("MyGrid");
var col = sg.getColumns()[0]; // Getting Header column
var flit =sg.getColumns()[0].filter // Here I am getting object instead of constructor
//this.focus = sg.onComboFilterFocus(combo);
}
},
}]
},
I am creating widget type in column
MyColumn: function(headersXmlDoc) {
var me = this,
gridConfig = {};
gridConfig.columns = [];
Ext.each(headersXmlDoc.getElementsByTagName("HEADER"), function(header) {
var column = {
text: header.getAttribute("L"),
dataIndex: header.getAttribute("DATAINDEX"),
sortable: (header.getAttribute("ISSORTABLE").toLowerCase()=="true"),
widgetType: header.getAttribute("WIDGET"),
filterType: Ext.isEmpty(header.getAttribute("FILTER"))? undefined: header.getAttribute("FILTER"),
};
switch (header.getAttribute("WIDGET")) {
case 'textbox':
if(column.filterType){
if(column.filterType == 'TagData'){
column.filter = {
xtype: 'tagfield',
growMax : 10,
valueField: 'title',
displayField: 'title',
parentGrid : me,
dataIndex:header.getAttribute("DATAINDEX"),
queryMode: 'local',
multiSelect: true,
isFilterDataLoaded: false,
disabled: true,
listeners:{
focus: me.SomeMethod, //
}
};
}
}
break;
}
this.columns.push(column);
}, gridConfig);
return gridConfig.columns;
},
I want if I select in header combo, it will directly select in widget combo as well. Can anyone explain how to get this. Thanks in advance

So you basically need a combo box in your header, that changes record values - the fact that you have a widget column displaying a combo within the grid cells doesn't really matter here.
I think you were fairly close - but you were trying to define a "header" config and add the combo to its items - instead you just define items directly on the column:
columns: [{
text: 'Combo Test',
dataIndex: 'title',
items: [{
xtype: 'combobox',
width: '100%',
editable: false,
valueField: 'title',
displayField: 'title',
queryMode: 'local',
autoSelect: true,
store: {
data: [{
"id": "1",
"title": "Test1"
}, {
"id": "2",
"title": "Test2"
}, {
"id": "3",
"title": "Test3"
}]
},
listeners: {
select: function (combo, selectedRecord) {
//we could just get the value from the combo
var value = combo.getValue();
//or we could use the selectedRecord
//var value = selectedRecord.get('id');
//find the grid and get its store
var store = combo.up('grid').getStore();
//we are going to change many records, we dont want to fire off events for each one
store.beginUpdate();
store.each(function (rec) {
rec.set('title', value);
});
//finish "mass update" - this will now trigger any listeners for saving etc.
store.endUpdate();
//reset the combobox
combo.setValue('');
}
}
}],
},
The actual setting of values happens in the select listener as you were trying - the key is to loop through the records and call set on each one:
//find the grid and get its store
var store = combo.up('grid').getStore();
//we are going to change many records, we dont want to fire off events for each one
store.beginUpdate();
store.each(function (rec) {
rec.set('title', value);
});
//finish "mass update" - this will now trigger any listeners for saving etc.
store.endUpdate();
I have created a fiddle to show this working:
https://fiddle.sencha.com/#view/editor&fiddle/1r01

jquery DataTables Editor: "select" field displays option value instead of label

I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode

See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}

"render": function ( data, type, full ) { return label;}

Kendo Grid: Group by first element in a list

So I'm working with a Kendo Grid and how it's headers are grouped. One option that I have working currently is for the Grid to grab my list and sort group by checking every element in that list. So I get something like:
->Roles:
->Roles: Tester, Manager, Team Lead
->Roles: Tester
->Roles: CEO, Tester
->Roles: Team Lead, CEO
(you get the idea). This is because "Roles" in my database model are in a list (since a person can have many roles) and the Kendo Grid is comparing every element in that list. However, I want it to group by just the first element in each person's list so I instead get something like:
->Roles: Tester
->Roles: Manager
->Roles: Team Lead
->Roles:
->Roles: CEO
etc. Does anyone know how to do this? Currently I am doing
group: {
field: "RoleName",
aggregates: [
{ field: "ResourceName", aggregate: "count" },
{ field: "OrganizationName", aggregate: "count" }
]
},
And I assume that I want to be doing something more along the lines of:
group: {
field: "RoleName.get(0)",
aggregates: [
{ field: "ResourceName", aggregate: "count" },
{ field: "OrganizationName", aggregate: "count" }
]
},
However, I'm not familiar enough with Kendo Grid to know the syntax to do this correctly. Thanks in advance for all help!
Edit: I should add that because many of the people that will be using this still need IE8 support, I am using Kendo Grid imports from /2012.2.710 instead of the latest update

*Edit My Answer assumes the user loads the data outside the function and doesn't hard code in the data.
Try using the parse function in schema,
I'll just add to what you should have in your project already, for example:
$('.grid').kendoGrid({
dataSource: {
schema: {
parse: function(data) {
for (var i = 0; i < data.length; i++) {
data[i].firstWord = data[i].name.split(' ')[0];
}
return data;
}
}
group: {
field: "firstWord"
}
},
columns: [{
field: "name"
}, {
field: "firstWord",
hidden: true,
groupHeaderTemplate: "#=value#"
}]
});

This is just a fix over Ryan Hoyle answer's example:
var grid = $('#grid').kendoGrid({
dataSource: {
data: [{
name: 'Hello world'
}, {
name: 'Hello John Doe'
}, {
name: 'Hello Jane Doe'
}, {
name: 'Bye Jane Doe'
}, {
name: 'Bye World'
}],
schema: {
parse: function(data) {
data.forEach(d => d.firstWord = d.name.split(' ')[0]);
return data;
}
},
group: {
field: "firstWord"
}
},
columns: [{
field: "name"
}, {
field: "firstWord",
hidden: true,
groupHeaderTemplate: "#=value#"
}]
}).data().kendoGrid;
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="grid"></div>