I'm looking a solution how to disable checkbox to be checked if checked='yes' in my dataSource.
Full Demo in Dojo
$("#grid").kendoGrid({
columns: [
{ selectable: true, headerTemplate:'<b>Some title</b>' },
{ field: "name" }
],
dataSource: [ { name: "Jane Doe", checked:"yes" },
{ name: "John Doe", checked:"no" },
{ name: "Doe John", checked:"yes" },
{ name: "John", checked:"no" } ],
dataBound:function(e){
var grid = this;
var rows = grid.items();
$(rows).each(function(e) {
var row = this;
var dataItem = grid.dataItem(row);
if (dataItem.checked == 'yes' ){
grid.select(row);
//grid.select('disable',true);
//grid.addClass(".k-state-selected");
}
});
}
});
You were almost there. Just add class for disabling mouse events on that row.
.disabled{
opacity:0.5;
pointer-events:none;
}
dataBound:function(e){
var grid = this;
var rows = grid.items();
$(rows).each(function(e) {
var row = this;
var dataItem = grid.dataItem(row);
if (dataItem.checked == 'yes' ){
grid.select(row);
console.log(row);
$(row).addClass("disabled");
}
}
Note: this will disable entire row from any events, if you want you can disable only checkbox by finding inner checkbox element:
$(row).find(".k-checkbox-label").addClass("disabled");
Your modified example: Disable checked
Related
I have an editable multi selectable kendo Treelist. I would like to be able to select part of the grid and copy paste its data in the same grid (other columns and rows) or to a text file. It is important to paste it with the same structure in the new table.
The copy feature is not supported for kendo Treelist.
Is there a way to do that with use of JavaScript and jQuery?
Kendo demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ field: "age" }
],
selectable: "multiple, cell",
editable:"incell",
dataSource: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22 },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
});
</script>
</body>
</html>
I have used two buttons, one for copying and one for pasting. The events functions are as below. This solved my problem and I can also paste the copied text in excel.
<button onClick="copying()" >Copy</button>
<button onClick="pasting()" >Paste</button>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ field: "age" }
],
selectable: "multiple, cell",
editable:"incell",
dataSource: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22 },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
});
</script>
var copiedText="";
function copying(){
if(copiedText !== ""){
return;
}
var grid = $("#treeList").data("kendoTreeList");
var selected = grid.select();
var previousRowID = selected.eq(0).parent().index();
var isNewLine = true;
selected.each(function() {
var row = $(this).closest("tr");
var dataItem = grid.dataItem(this);
if (previousRowID !== $(this).parent().index()) {
copiedText += "\r\n";
isNewLine = true;
}
previousRowID = $(this).parent().index();
var colIndx = $("td", row).index(this);
var column = grid.columns[colIndx];
var data = dataItem;
var value = dataItem[column.field];
if (!isNewLine) {
copiedText += "\t";
}
copiedText += value;
isNewLine = false;
});
var textarea = $("<textarea>");
var offset = $(this).offset();
// Position the textarea on top of the Treelist and make it transparent.
textarea.css({
position: 'absolute',
opacity:0,
border: 'none',
width: $(this).find("table").width(),
height: $(this).find(".k-grid-content").height()
});
textarea.val(copiedText)
.appendTo('body')
.focus()
.select();
document.execCommand('copy');
setTimeout(function(){
textarea.remove();
});
}
function pasting() {
var pasteVal = copiedText;
var grid = $("#treeList").data("kendoTreeList");
if (pasteVal) {
var selectedArr= Object.values($(".k-grid td.k-selected"));
var pasteArray = pasteVal.split("\r\n").filter(r => r !== "").map(r => r.split("\t"));
pasteArray.forEach(function( item, index) {
selectedArr[index].innerHTML = item;
});
grid.refresh();
}
copiedText= "";
}
I am trying to show a popup as explained and i am not able to add one. Here is the code HTML followed by JS.
I have added a button and on click of the button i am trying to show popup. I was able to show a popup without the webix.ready() function, but when i try to add that my code breaks. Any help regarding this would be of real help.
HTML CODE:
<body>
<div class="loader-holder" id="loader-holder">
<div class="loader-container">
<p>Loading......</p>
</div>
</div>
</body>
JS CODE:
var form = {
view:"form",
borderless:true,
elements: [
{ view:"text", label:'Login', name:"login" },
{ view:"text", label:'Email', name:"email" },
{ view:"button", value: "Submit", click:function(){
if (this.getParentView().validate()){ //validate form
webix.message("All is correct");
this.getTopParentView().hide(); //hide window
}
else
webix.message({ type:"error", text:"Form data is invalid" });
}}
],
rules:{
"email":webix.rules.isEmail,
"login":webix.rules.isNotEmpty
},
elementsConfig:{
labelPosition:"top",
}
};
function showForm(winId, node){
console.log(node);
$$(winId).getBody().clear();
$$(winId).show(node);
$$(winId).getBody().focus();
}
var popup = {view:"popup",id:"win1",width:300,head:false,body:webix.copy(form)};
function Start(){
var tbl = {
}
var cfg = {
container:"listC",
width:1500,
height:600,
rows:[
{
height: 35,
view:"toolbar",
elements:[
{view:"text", id:"grouplist_input",label:"Filter",css:"fltr", labelWidth:170}
]
},
{ view:"button",value: 'Click to show a popup with a form',click:function(){ showForm("win1", popup)}},
]
}
/////////////////////////////////
var bodycontent =
{
id:"tb", autoheight:true,autowidth:true,
view:"tabview",
cells:[
{
header:"LIVE",
body: tbl
},
{
header:"REMOTE WATCH",
body: { id:"remote_watch", template:"some_text"}
},
{
header:"CONFIG",
body:cfg//{ id:"config", template:"CONFIG is In developement........"}
} ]
}
var label = { view:"label", label:'some_text ',height:25, align:"left",css:"my_style"}
webix.ready(function ()
{
var el = document.getElementById('loader-holder');
el.parentNode.removeChild(el);
webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
webix.ui(
{
view: "layout",
id: "dashboard",
rows:
[
label,
bodycontent
]
})
});
}
You can use popup functionality from
Bootstrap. It has good documentation.
You need to initialize popup before using it. You can do it wherever you want to (ex. webix.ready(), "showForm" function)
var form = {
view:"form",
borderless:true,
elements: [
{ view:"text", label:'Login', name:"login" },
{ view:"text", label:'Email', name:"email" },
{ view:"button", value: "Submit", click:function(){
if (this.getParentView().validate()){ //validate form
webix.message("All is correct");
this.getTopParentView().hide(); //hide window
}
else
webix.message({ type:"error", text:"Form data is invalid" });
}}
],
rules:{
"email":webix.rules.isEmail,
"login":webix.rules.isNotEmpty
},
elementsConfig:{
labelPosition:"top",
}
};
function showForm(winId, node){
webix.ui(popup);
$$(winId).getBody().clear();
$$(winId).show(node);
$$(winId).getBody().focus();
}
var popup = {view:"popup",id:"win1",width:300,head:false,body:webix.copy(form)};
function Start(){
var tbl = {
}
var cfg = {
container:"listC",
width:1500,
height:600,
rows:[
{
height: 35,
view:"toolbar",
elements:[
{view:"text", id:"grouplist_input",label:"Filter",css:"fltr", labelWidth:170}
]
},
{ view:"button",value: 'Click to show a popup with a form',click:function(){ showForm("win1", this.$view)}},
]
}
/////////////////////////////////
var bodycontent =
{
id:"tb", autoheight:true,autowidth:true,
view:"tabview",
cells:[
{
header:"LIVE",
body: tbl
},
{
header:"REMOTE WATCH",
body: { id:"remote_watch", template:"some_text"}
},
{
header:"CONFIG",
body:cfg//{ id:"config", template:"CONFIG is In developement........"}
} ]
}
var label = { view:"label", label:'some_text ',height:25, align:"left",css:"my_style"}
webix.ready(function ()
{
var el = document.getElementById('loader-holder');
el.parentNode.removeChild(el);
webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
webix.ui(
{
view: "layout",
id: "dashboard",
rows:
[
label,
bodycontent
]
})
});
}
Start();
https://webix.com/snippet/459c4dd6
I have a kendo grid which is acting weirdly. I'm trying to select a row and update value in the data source. The grid has 2 rows: one template i.e. check box and one value in data source which is Boolean.
All I'm trying to do is:
When clicked on checkbox - Update the value of IsChecked in the data
source and mark the row as selected
The code below works fine but only after each check box is clicked at least once.
To replicate: Click on any checkbox, you'll see the value in the row gets updated, but check box is not checked. Click on it again and you'll see the check box gets checked and row gets selected. But never on first time. Same happens with all the rows. After 2nd run they work fine, but not at first.
Here is the Telerik fiddle link to play around
$("#grid").kendoGrid({
columns: [
{
title: "Check",
template: '<input class="checkbox" type="checkbox" />'
},
{ field: "IsChecked" }
],
dataSource: [
{ IsChecked:false},
{ IsChecked:false },
{ IsChecked:false },
{ IsChecked:false }
],
dataBound: function () {
$(".checkbox").bind("change", function (e) {
var row = $(e.target).closest("tr");
row.toggleClass("k-state-selected");
var grid = $("#grid").data("kendoGrid");
var index = $("tr", grid.tbody).index(row);
var data = grid.dataSource.at(index);
data.set("IsChecked", true);
});
}
});
Thank you
Try below code. Working fiddle http://dojo.telerik.com/UNIpU/3
$("#grid").kendoGrid({
columns: [{
title: "Check",
template: '<input class="checkbox" #= IsChecked ? \'checked="checked"\' : "" # type="checkbox" />'
},
{
field: "IsChecked"
}
],
dataSource: [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
dataBound: function(e) {
var grid = e.sender;
var data = grid._data;
data.forEach(function(entry) {
if (entry.IsChecked) {
$('tr[data-uid="' + entry.uid + '"]').addClass("k-state-selected");
} else {
$('tr[data-uid="' + entry.uid + '"]').removeClass("k-state-selected");
}
})
}
});
$("#grid .k-grid-content").on("change", "input.checkbox", function(e) {
var grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("IsChecked", this.checked);
});
I'm fairly new to kendo UI but some how I managed to render a kendo grid with drag and drop feature Where users can drag and place rows.In my case I have three columns id,name,sequence
So I need to keep sequence column data unchanged while id and name data changed when a drag and drop of a row.
Ex id=1 Name=David Sequnce=0
id=2 Name=Mark Sequnce=1
Now I'm going to drag row 1 to 2 while data of the sequence column remain unchanged new data like this,
Ex id=2 Name=Mark Sequnce=0
id=1 Name=David Sequnce=1
In my case every row is getting changed. I need to implement this solution.
Can somebody help me out on this.
Cheers,
Chinthaka
Try this,
Script
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark ", Sequnce: 1 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
Sequnce: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "Sequnce"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id"));
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("Sequnce");
target.set("Sequnce", dest.get("Sequnce"));
dest.set("Sequnce", tmp);
dataSource.sort({ field: "Sequnce", dir: "asc" });
}
}
});
});
</script>
View
<div id="grid">
</div>
Demo: http://jsfiddle.net/nmB69/710/
I'm going to implement drag and drop behaviour with kendo grid which is populated using template. How can I achieve draggable rows and reordering with kendo grid.
.Orderable()
Works a treat. Maybe try ".Dragable()" I'm a bit unsure about that though.
Take a look at following my demo code and try it to implement.
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});
put .Dragable()
but make sure that you sit it in the right place, the ordering is required. Some times you may not get the expected result and that may happen due to not paying attention to the order.