I have locked command column in the Grid (see image below).
I would like to replace default buttons with custom icons (or with set of icons supplied with Kendo).
How can I easily do it?
I tried to find something in documentation but without luck.
Thanks for any advice.
EDIT: added button code
command:
[
{
name: "destroy",
text: $translate.instant('REMOVE'),
className: "btn-destroy"
},
{
name: "detail",
text: $translate.instant('DETAIL'),
click: function(e) {
var clickedRow = this.dataItem($(e.currentTarget).closest("tr"));
var id = clickedRow.id;
GlobalHelperService.redirectTo("/milestone-sequences/detail/"+id);
return false;
}
}
],
You can also use imageClass or iconClass within the command. I'm not sure what the difference is, but either one seems to work.
Thanks OnaBai, for the working example that I could fork.
Note, I added the FontAwesome stylesheet to easily swap out the icon via a class.
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
imageClass: "fa fa-trash",
//iconClass: "fa fa-trash",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>
If you don't want to manipulate the HTML generated by KendoUI you can simply play with the definition and CSS.
If your command definition is something like:
columns: [
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
},
...
]
},
...
You can define the following CSS for changing the button to only your custom icon:
.k-grid-onabai, .k-grid-onabai:hover {
background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
background-position: 192px -248px;
min-width: 32px !important;
min-height: 32px !important;
}
i.e. set text to an empty space ( ) and if the name of the command is onabai you need to define there the styles k-grid-onabai and k-grid-onabai:hover.
A running example following:
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>
<style>
.k-grid-onabai, .k-grid-onabai:hover {
background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
background-position: 192px -248px;
min-width: 32px !important;
min-height: 32px !important;
}
</style>
The easy way : Just add the bootstrap icons on text property and override imageClass and iconClass with ""
command: [{
name: "destroy",
text: "<span class='glyphicon glyphicon-remove'></span>",
imageClass: "",
iconClass: "",
}]
Related
I have a Kendo TreeList where I search for the row where myDataItem is (with help of the uid or value).
When I execute:
$("#treeList tbody").on("click", "tr", function (e) {
var rSelectedRow = $(this);
var getSelect = treeList.select();
console.log("'real' selected row: "+rSelectedRow);
console.log("selected row: "+getSelect);
});
and in another function, where I want to get a row (not the selected one, just a row where myDataItem is):
var grid = treeList.element.find(".k-grid-content");
var myRow = grid.find("tr[data-uid='" + myDataItem.uid + "']"));
//or
// myRow = treeList.content.find("tr").eq(myDataItem.val);
console.log("my row:" + myRow)
I get:
'real' selected row: Object [ tr.k-alt ... ]
selected row: Object { length: 0 ... }
my row: Object { length: 0 ... }
I need the same structure of rSelectedRow for myRow. So how can I get the ,real' tr-element?
UPDATE: I wrote this method to find the row of my new added item:
//I have an id of the item and put it in an invisible row in the treelist.
getRowWhereItem: function (itemId) {
treeList.dataSource.read();
$("#menuItemTree .k-grid-content tr").each(function (i) {
var rowId = $(this).find('td:eq(1)').text();
console.log(itemId);
console.log(rowId);
if (rowId == itemId) {
console.log("found");
console.log(itemId + " " + rowId);
var row = this;
console.log(row);
return row;
}
});
},
The each-iteration reaches all tr's until/except the new added one. Why?
Use the change event instead of binding a click event to the widget's DOM. Note that for change to work, you need to set selectable to true:
<!-- Orginal demo at https://demos.telerik.com/kendo-ui/treelist/index -->
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script id="photo-template" type="text/x-kendo-template">
<div class='employee-photo'
style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
<div class='employee-name'>#: FirstName #</div>
</script>
<script>
$(document).ready(function() {
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
filterable: true,
sortable: true,
columns: [
{ field: "FirstName", title: "First Name", width: 280,
template: $("#photo-template").html() },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" },
{ field: "Phone", width: 200 },
{ field: "Extension", width: 140 },
{ field: "Address" }
],
pageable: {
pageSize: 15,
pageSizes: true
},
/* See here */
selectable: true,
change: function() {
let $selectedItem = this.select(),
dataItem1 = this.dataItem($selectedItem),
uid1 = $selectedItem.data("uid"),
uid2 = dataItem1.uid,
dataItem2 = this.dataSource.getByUid(uid1);
console.log("selected item", $selectedItem);
console.log("dataItem", dataItem1);
console.log("dataItem(alternative way)", dataItem2);
console.log("uid", uid1);
console.log("uid(alternative way)", uid2);
}
});
});
</script>
<style>
.employee-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.employee-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</div>
</body>
</html>
The part that really matters:
selectable: true,
change: function() {
let $selectedItem = this.select(),
dataItem1 = this.dataItem($selectedItem),
uid1 = $selectedItem.data("uid"),
uid2 = dataItem1.uid,
dataItem2 = this.dataSource.getByUid(uid1);
console.log("selected item", $selectedItem);
console.log("dataItem", dataItem1);
console.log("dataItem(alternative way)", dataItem2);
console.log("uid", uid1);
console.log("uid(alternative way)", uid2);
}
Demo
I didn't find a solution where I can get the tr by datauid.
But in my case, I took the id of the item and put it in an invisible row in the treelist.
Therefore, the method getRowWhereItem(itemId) in the question works well when making it execute after a successfull Ajax Call. With the callback from my ajax call, I load the new item and then the method can find the row. So the issue was that I had to have the uptodate data from my database.
Another issue was with contexts. The method getRowWhereItem(itemId) was a method of a namespace. I tried to call that method outside the namespace and couldn't get its return. Now, I moved the method into the same context where I call it.
(note: My development follows the MVC pattern, Administration is a Controller-class)
$.ajax({
url: General.createMethodUrl("Administration", "Admin", "Add_New"),
data: { parentItemId: parentOfNewId },
type: "POST",
dataType: "json",
success: function (response) {
if (response) {
var addedItem = $.parseJSON(response);
//waiting for callback because otherwise the window opens a few milliseconds before the properties are loaded and newRow cannot be find
tManag.ajaxCallSelectedEntry(addedItem.Id, treeList, function () {
newRow = tManag.getRowWhereItem(addedItem.Id);
});
jQuery(newRow).addClass("k-state-selected")
} else {
tManag.alertDialog(dialog, "Adding New Item Notification", response.responseText);
}
},
error: function (response) {
tManag.alertDialog(dialog, "Adding New Item Error", "Error");
}
});
I have already created a diagram and a custom node following this example.
The problem is, when I try to get the JSON from the diagram, the attributes I've added to the custom node are not shown, although they appear on the lateral panel.
Here's an example:
<html>
<head>
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.diagram-node-custom .diagram-node-content {
background: url(http://www.saltlakemailing.com/wp-content/uploads/2012/03/process_icon.png) no-repeat scroll center transparent;
}
</style>
<script>
var Y = YUI().use('aui-diagram-builder',
function(Y) {
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
Y.diagramBuilder = new Y.DiagramBuilder(
{
boundingBox: '#myDiagramContainer',
fields: [
{
name: 'name1',
type: 'custom',
customAttr: 'VALUECUSTOM',
xy: [100, 100]
}
],
srcNode: '#myDiagramBuilder'
}
).render();
}
);
</script>
</head>
<body>
<div id="myDiagramContainer">
<div id="myDiagramBuilder"></div>
</div>
<button onClick="console.log('JSON: '+JSON.stringify(Y.diagramBuilder.toJSON()));">GET JSON</button>
</body>
</html>
And this is the JSON I get when I do Y.diagramBuilder.toJSON():
{"nodes":[{
"transitions":[],
"description":"",
"name":"name1",
"required":false,
"type":"custom",
"width":70,
"height":70,
"zIndex":100,
"xy":[100,100]
}]}
The new attribute needs to be added to the SERIALIZABLE_ATTRS array.
Something like that:
this.SERIALIZABLE_ATTRS.push('customAttr');
I created a JSFiddle example: http://jsfiddle.net/aetevpfn/
It's a little bit complicated to explain. I would like to save the position on which the tree has been repositioned, and then when the user opens the page again it will appear the way the user left it (I do not want to make it only for one user but for all, because only the admin is going to have access to it anyway). it sounds ununderstandable, that's why I made an example right below:
Simplifying: 1 - Get the order of the tree's elements that the user left
2 - Send it to my server as a text file (Probably Ajax)
Thus, when I reload the page or/and clean up the cache, it will still be in that position that I left. I want the "position" to be sent as a text file using ajax to my server. Is there a way to do it?
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./tree.jquery.js"></script>
<link rel="stylesheet" href="./jqtree.css">
<script src="./jquery-cookie/src/jquery.cookie.js"></script>
<style>
body{overflow-x:hidden}
#navdata{width:auto; height:auto; flex:1; padding-bottom:1px;}
#navgrid{width:50%; height:200px; overflow-x:hidden; overflow-y:scroll; border:solid 1px #79B7E7; background-color:white;}
#header{background-color: #79B7E7; width:100%; text-align: center;border: 1px solid white;}
.jqtree-element{background-color:#DDEBF7;border: 1px solid white;height:23px;color:red;}
.jqtree-tree .jqtree-title {color: black;}
ul.jqtree-tree ul.jqtree_common {margin-left: 0px;}
ul.jqtree-tree .jqtree-toggler {color: #325D8A;}
ul.jqtree-tree .jqtree-toggler:hover {color: #3966df;text-decoration: none;}
.jqtree-tree .jqtree-title.jqtree-title-folder {margin-left: 0;}
span.jqtree-dragging {background: #79B7E7;}
ul.jqtree-tree li.jqtree-selected > .jqtree-element,ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));}
</style>
</head>
<body>
<div id="navgrid">
<div id="header">Header</div>
<div id="tree1"></div>
</div>
</body>
<script type="text/javascript">
var ExampleData = {};
ExampleData.data = [
{
label: 'node1', id: 1,
children: [
{ label: 'child1', id: 2 },
{ label: 'child2', id: 3 }
]
},
{
label: 'node2', id: 4,
children: [
{ label: 'child3', id: 5 }
]
}
];
ExampleData.getFirstLevelData = function(nodes) {
if (! nodes) {
nodes = ExampleData.example_data;
}
var data = [];
$.each(nodes, function() {
var node = {
label: this.label,
id: this.id
};
if (this.children) {
node.load_on_demand = true;
}
data.push(node);
});
return data;
}
ExampleData.getChildrenOfNode = function(node_id) {
var result = null;
function iterate(nodes) {
$.each(nodes, function() {
if (result) {
return;
}
else {
if (this.id == node_id) {
result = this;
}
if (this.children) {
iterate(this.children);
}
}
});
}
iterate(ExampleData.example_data);
return ExampleData.getFirstLevelData(result.children);
}
$('#tree1').tree({
data: ExampleData.data,
autoOpen: false,
dragAndDrop: true
});
</script>
</html>
I think earlier i got your question wrong. This will be your answer.
$(document).ready(function(){
//var data is a dynamic json file that should be created in the backend.
var data = [
{
label: 'node1', id: 1,
children: [
{ label: 'child1', id: 2 },
{ label: 'child2', id: 3 }
]
},
{
label: 'node2', id: 4,
children: [
{ label: 'child3', id: 5 }
]
}
];
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
console.log($('#tree1').tree('toJson')); //This will give you the loading jqtree structure.
$('#tree1').bind(
'tree.move',
function(event) {
event.preventDefault();
// do the move first, and _then_ POST back.
event.move_info.do_move();
console.log($(this).tree('toJson')); //this will give you the latest tree.
// $.post('your_url', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
}
);
});
Updating the Code with HTML/JS/PHP with
Folder Structure
Root Folder
stackoverflow-2.html
libs/jquery/jquery.js
libs/jqtree/tree.jquery.js
libs/jqtree/jqtree.css
scripts/stackoverflow-2.js //custom script created by me
json/stackoverflow-2.json //json file output to create the nodes and children.
php/stackoverflow-2.php //php commands to write.
stackoverflow-2.html //same as your reference. Changed only mapping of the library files.
<head>
<script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
<script src="libs/jqtree/tree.jquery.js"></script>
<link rel="stylesheet" href="libs/jqtree/jqtree.css">
<script src="scripts/stackoverflow-2.js"></script>
<style>
body{overflow-x:hidden}
#navdata{width:auto; height:auto; flex:1; padding-bottom:1px;}
#navgrid{width:50%; height:200px; overflow-x:hidden; overflow-y:scroll; border:solid 1px #79B7E7; background-color:white;}
#header{background-color: #79B7E7; width:100%; text-align: center;border: 1px solid white;}
.jqtree-element{background-color:#DDEBF7;border: 1px solid white;height:23px;color:red;}
.jqtree-tree .jqtree-title {color: black;}
ul.jqtree-tree ul.jqtree_common {margin-left: 0px;}
ul.jqtree-tree .jqtree-toggler {color: #325D8A;}
ul.jqtree-tree .jqtree-toggler:hover {color: #3966df;text-decoration: none;}
.jqtree-tree .jqtree-title.jqtree-title-folder {margin-left: 0;}
span.jqtree-dragging {background: #79B7E7;}
ul.jqtree-tree li.jqtree-selected > .jqtree-element,ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));}
</style>
</head>
<body>
<div id="navgrid">
<div id="header">Header</div>
<div id="tree1"></div>
</div>
</body>
stackoverflow-2.js
$(document).ready(function(){
$.ajax({ /*Makes a ajax call and gets the contents from the json file*/
method:"get",
url:"json/stackoverflow-2.json"
}).success(function(data){
$('#tree1').tree({
data: jQuery.parseJSON(data.tree),
autoOpen: true,
dragAndDrop: true
});
});
$('#tree1').bind(
'tree.move',
function(event) {
event.preventDefault();
// do the move first, and _then_ POST back.
event.move_info.do_move();
$.post('php/stackoverflow-2.php', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
}
);
});
Initial stackoverflow-2.json
{
"tree": [
{
"label": "node1",
"id": 1,
"children": [
{
"label": "child1",
"id": 2
},
{
"label": "child2",
"id": 3
}
]
},
{
"label": "node2",
"id": 4,
"children": [
{
"label": "child3",
"id": 5
}
]
}
]
}
stackoverflow-2.php
<?php
file_put_contents("../json/stackoverflow-2.json", json_encode($_POST)); //calls the file and enters the new tree structure.
Code tested in my localhost.
Referring to the jqtree documentation you can have your code like this.
var lastOpenedByAUser = 0; // make a ajax call to get this value. This value is also stored in database or any file in your server end if the last user clicked another node.
$('#tree1').tree({
data: data,
autoOpen: lastOpenedByAUser //shall be 0 for node-1, 1 for node-2
});
Make sure, you run this $('#tree') code only after the code your ajax code is completed.
I've got some code here where I am trying to set a background color of a cell based on the value of the data item: http://dojo.telerik.com/#solidus-flux/eHaMu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: function(e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
//attributes: {
//"class": "table-cell",
//style: "text-align: right; font-size: 14px"
//}
} ],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
</body>
</html>
I realize I could do this with a template, but that would require an extra html element, since you can't change the markup of the td itself. I'd like to use a function to return attributes if that is supported.
You said you don't want to use templates, but I think you were talking about column templates.
You can change the markup of the td itself by using a row template:
<script id="template" type="text/x-kendo-template">
<tr data-uid="#= uid #">
# this.columns.forEach(function(col) {
var val = data[col.field],
css,
style = ''
cClasses = '';
if (typeof col.attributes === 'function') {
css = col.attributes(data);
cClasses = css["class"];
style = css.style
}
#
<td class='#= cClasses #' style='#= style #'>
#= data[col.field] #
</td>
# }) #
</tr>
</script>
For the loop to work, you need to bind your template to the grid though:
var grid = $("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ?
"background-color: red" : "background-color: green"
};
}
}, {
field: "title",
title: "Title"
}],
dataSource: [{name: "Jane Doe", title: "Dr. Dr."},
{name: "John Doe", title: "Senior Citizen"}]
}).data("kendoGrid");
var template = kendo.template($("#template").html()).bind(grid);
grid.setOptions({
rowTemplate: template
});
(demo)
As an alternative, you could also create attributes like this:
{
field: "name",
title: "Name",
attributes: {
"class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #"
}
},
This would have the advantage of not using the row template, but you'd have to use the template syntax for the logic.
(demo)
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
.greenBG {
background-color:green;
}
.redBG {
background-color:red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
}],
dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].name === "Jane Doe") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
}
else {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
}
}
}
});
</script>
</body>
</html>
In angular kendo callback e not work
Use this
attributes: {
"ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' : \'Are you sure active ?\'}}",
"confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
}
For Kendo-JQuery.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: right; font-size: 14px"
}
}]
});
</script>
And this Kendo-MVC
.Columns(columns =>
{
columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { #class = "table-header-cell" });
})
Some years later but ... the attributes function is not working at all for me, is not even hit, seems pretty but not working (Why is needed a manual class toggle if a functions is provided to do the work? something seems weird).
I make editable cells based on other fields values but also I needed to change the styles
1) Add the validation on field that you want to inject the css class,
//Your other fields configuration
field:"dependentField",
attributes:
{
"class": "# if(data.ImportantField!==true) { # nonEditableCellStyle # } else { # editableCellStyle # }# ",
}
//Your other fields configuration
2) Bind the grid change event and check if some important field has changes, if is the field that controls the style of other cells just call the refresh method
var _kendoGrid = $('#myGrid').data("kendoGrid");
_kendoGrid.dataSource.bind("change", function (e) {
if (e.action === "itemchange") {
if (e.field === "ImportantField") {
_kendoGrid.refresh();
}
}
});
The refresh method will render your grid again, that means your functions weather is a template or an attribute function ( and again, that does not work at all for me) will run and apply the correct sytles, or classes in this case.
Could someone provide the proper implementation method for utilizing the jqxDropDownList with checkboxes enabled as a grid column?
The following code is modified from the jqwidgets grid demo code ‘cellediting.htm’.
I've implemented an independent dropdownlist with checkboxes with no problems.
I've implemented a grid with dropdownlist (with out checkboxes) with no problems.
however, as soon as i put checkboxes: true in the initeditor i get the following error:
Uncaught TypeError: Cannot read property ‘instance’ of undefined jqxlistbox.js:7
In certain ‘more complicated’ scenarios, the checkboxes property will succeed with ‘createeditor’, but fail with initeditor.
This leads me to believe there is probably some asynchronous loading going on and im building the editor too quickly.
The following code fails because of the ‘checkboxes: true’ property. remove that and it works great.
<head>
<title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You
can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data =
[
{ firstname: 'joe', lastname: 'smith', sex: 'm' },
{ firstname: 'john', lastname: 'doe', sex: 'm' },
{ firstname: 'jane', lastname: 'doe', sex: 'f' }
];
var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'sex', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 685,
source: dataAdapter,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
{ text: 'Last Name', columntype: 'textbox', datafield: 'lastname', width: 80 },
{ text: 'Sex', columntype: 'dropdownlist', datafield: 'sex', width: 195,
createeditor: function(row, cellvalue, editor)
{
var mydata =
[
{ value: "m", label: "Male" },
{ value: "f", label: "Female" }
];
var mysource =
{
datatype: "array",
datafields:
[
{ name: 'label', type: 'string' },
{ name: 'value', type: 'string' }
],
localdata: mydata
};
var myadapter = new $.jqx.dataAdapter(mysource, { autoBind: true });
editor.jqxDropDownList({ checkboxes: true, source: myadapter, displayMember: 'label', valueMember: 'value' });
}
}
]
});
// events
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid"></div>
<div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
<div id="cellbegineditevent"></div>
<div style="margin-top: 10px;" id="cellendeditevent"></div>
</div>
</div>
</body>
</html>
Can anyone offer assistance?
Extra help!!
Additionally, it seems like once i select a value in the dropdown, the actual ‘value’ gets changed to the display ‘label’. i.e., (“Male” or “Female”), but in this example, the only valid data for the sex field would be ‘m’ or ‘f’.
I've asked the same question on the jqwidgets official forums (here: http://www.jqwidgets.com/community/topic/dropdownlist-with-checkboxes-as-grid-column-editor/), and will post any answer they send here if they beat the community to it.
As far as I know, there is no DropDownList with Checkboxes Editor in the jQwidgets Grid. If there was such, I think that jQWidgets would at least have a sample about it so I suppose that you cannot use the DropDownList in such way in the jqxGrid widget.
I know that this is a rather old post, but still...
I'm surprised to see the response from the JQWidgets team, since they themselves have such an example on their website, using a dropdownlist with checkboxes as a grid editor.
It is available at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellcustomediting.htm
where the editor is used in the Products column.
Mihai