Kendo Grid Acting Weird on Update - javascript

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);
});

Related

How to insert kendo drop down list into kendo grid, but with a different data source?

I've created a kendo grid, and need to insert kendo drop down into one of the columns. I need to get the data for the drop down from another data source. It kind of works, however, the problem is when I have chosen a value from the drop down and the drop down closes, instead of displaying that value it goes into editable mode. Only when I click outside of the dropdown, it displays the correct value. Here is a gif of the issue:
https://media2.giphy.com/media/KyMGB7FmFQMVTChFA7/giphy.gif
How could this issue be solved?
I have successfully created a kendo grid with a drop down list already. The only difference seems to be that there only one data source is used, but here two are used. Here is some of the code for the drop down:
title: "Type",
field: "productType.name", //this property is from the data source used for grid
template: "<kendo-drop-down-list k-value=\"dataItem.productType.id\"
k-options=\"productTypeOptions\" ng-change=\"productTypeChanged(dataItem, 'productType')\"
ng-model=\"dataItem.productType.id\"></kendo-drop-down-list>"
}...];
$scope.productTypes = {
data: [{ name: "Value 1", id: "1" }, { name: "Value 2", id: "2" }]
}
$scope.productTypeDataSource = new kendo.data.DataSource({
schema: {
data: "data",
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
},
data: $scope.productTypes,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
$scope.productTypeOptions = {
dataSource: $scope.productTypeDataSource,
dataTextField: "name",
dataValueField: "id"
};
$scope.productTChanged = function (dataItem, field, productArray, dataSource) {
var index = dataSource.indexOf(dataItem);
var c = productArray.data[index];
if (c == null) return;
c[field] = dataItem[field];
return c;
};
$scope.productTypeChanged = function (dataItem, field) {
$scope.productTChanged(dataItem, field, $scope.products, $scope.productDataSource);
};```

Kendo Grid checkbox disable to edit

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

Populate BootstrapTable x-editable select box based on another column

I have a BootstrapTable select box. I know you can use a function to populate the values in the select box. I'd like that function to change which array it provides based on the value of a second column (called Text_example).
So in my example, if Text_example for that row is 1, the select box should have the following data: [{1:1}]. if Text_example for that row is 2, the select box should have the following data: [{2:2}]
I think my problem is that I don't know how to pass just the row's data to the function get_values as my method seems not to be working.
Full Fiddle: http://jsfiddle.net/goxe6ehg/
var data = [{"Text_example": 1},{"Text_example": 2}];
function get_values(data) {
if (data['Text_Example'] === 1) {
return [{1:1}];
}
else {
return [{2: 2}]
}
}
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select',
source: get_values($('#table').bootstrapTable('getData'))
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
EDIT: I over-simplified my example. Rather than having a static field for text_example I need it to be a select box, where the value for select_example changes based on what the user has selected in text_example.
Updated JSFiddle: http://jsfiddle.net/4wwv18Lq/4/
You can use the oninit handler on the bootstraptable library.And add the editables by iterating through the data object.
var data = [{"Text_example": 1},{"Text_example": 2}];
$('#table').on('editable-init.bs.table', function(e){
var $els = $('#table').find('.editable');
$els.each(function(index,value){
$(this).editable('option', 'source', data[index])
});
});
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select'
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
JSfiddle link
http://jsfiddle.net/km10z2xe/

Change button color on page load based on field value

I'm using Datatables with X-editable and have some bootstrap buttons in a table. Basically if the user updates the editable 'Status' column to 'Resolved' I want the 'Not Validated' button in the previous row to turn yellow. If the status is switched back to any other status it should turn back to red.
I'm using Datatables grouping function to add the 'Not Validated' button and the color changing is working however, how do I check the value of the status field on page load and set the correct color?
I have a JSFiddle setup: http://jsfiddle.net/n74zo0ms/19/
JQuery:
//initialize the datatable
$(document).ready(function() {
var table = $('#dataTables').DataTable({
"columnDefs": [{
"visible": false,
"targets": 0
}],
"info": false,
"searching": false,
"drawCallback": function(settings) {
setupXedit();
var api = this.api();
var rows = api.rows({
page: 'current'
}).nodes();
var last = null;
api.column(0, {
page: 'current'
}).data().each(function(group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><th colspan="2"></i><i class="fa fa-arrow-circle-o-right"></i> Cluster: ' + group + '</th><th colspan="1"><i class="fa fa-exclamation-triangle fa-switch"></i> Not Validated</th></tr>'
);
last = group;
}
});
}
});
});
function setupXedit() {
//initialize the editable column
$('.status').editable({
url: '/post',
pk: 1,
source: [{
value: 'New',
text: 'New'
}, {
value: 'In Progress',
text: 'In Progress'
}, {
value: 'Resolved',
text: 'Resolved'
}],
title: 'Example Select',
validate: function(value) {
var cell = $(this).parent().parent().prev().find(".btn-switch");
var cell2 = $(this).parent().parent().prev().find(".fa-switch");
if (value == 'Resolved') {
cell.removeClass('btn-danger');
cell2.removeClass('fa-exclamation-triangle');
cell.addClass('btn-warning');
cell2.addClass('fa-thumbs-o-down');
} else {
cell.removeClass('btn-warning');
cell2.removeClass('fa-thumbs-o-down');
cell.addClass('btn-danger');
cell2.addClass('fa-exclamation-triangle');
};
}
});
}
Put this code above your other functions, right after your $(document).ready(function() {
$(".status").each(function(){
if($(this).text() === "Resolved"){
...do stuff....
..set color
..set text
}
});

One Column Value remain unchanged in kendo grid drag and drop

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/

Categories