Skip checkbox in multi select in jqgrid conditional - javascript

I saw Oleg answer when clicking the multiselect checkbox in the jqgrid header it remove the check when the checkbox is disabled. (correct me if i'm wrong). But in my case I want to skip the rowdata or I don't want to check the checkbox if the row value Status is approved.
I tried this one
onSelectAll: function (aRowids, status) {
$.each(aRowids, function (i, val) {
var gridId = "#List";
var rowData = jQuery(gridId).jqGrid('getRowData', val);
var g = $("#List");
var cbs = $("tr.jqgrow > td > " + rowData.Status == "Approved", g[0]);
cbs.removeAttr("checked");
}
}
but nothing happen. It still checks the status approved.

Here you go with a solution http://jsfiddle.net/HJema/632/
var myData = [{
id: 1,
status: "Rejected"
}, {
id: 2,
status: "Approved"
}, {
id: 3,
status: "Rejected"
}, ];
$("#list").jqGrid({
datatype: "local",
colNames: ["Id", "Status"],
colModel: [{
name: "id",
index: "id",
sorttype: "int"
}, {
name: "status",
index: "status"
}],
caption: "Viz Test",
pager: '#pager',
search: true,
multiselect: true,
data: myData,
loadComplete: function(data) {
for (var i = 0; i < data.rows.length; i++) {
if(data.rows[i].status == "Approved"){
$('#jqg_list_' + (i+1)).attr('disabled', true);
}
}
}
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<table id="list"></table>
<div id="pager"></div>
There is some problem with the Stackoverflow snippet, please refer to the jsfiddle.
Hope this will help you

Related

Kendo grid loosing selected row

I'm using Kendo UI for my grid everything works find with that. I can select one or many rows using scroll and shift. The problem is that if I select row 3 and then some event refresh the grid and after that I want to select row 4 too Kendo is selecting all the above rows, in this case from row 1-4.
So my question is how can I solve this issue?
Desired result in the demo: Select Germany, refresh grid, then select until Belgium. The demo is going to select from row 1 to Belgium.
Here is a demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function () {
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() => {
$("#grid").getKendoGrid().dataSource.read();
})
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
e.sender.select(itemsToSelect);
}
});
});
</script>
</body>
</html>
This problem is so similar to the problem I had which I wrote about here, Kendo Grid Persist Row Example. In the example I wrote, I used persistSelection which is recommended.
This behaviour is happening because after the refresh event the grid no longer knows which row was focused previously. So on dataBound, we need to set that focus back. Here's a snippet that might help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function() {
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() => {
$("#grid").getKendoGrid().dataSource.read();
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
if (itemsToSelect.length > 0) {
var lastRow = itemsToSelect[itemsToSelect.length - 1];
grid.selectable._lastActive = lastRow;
grid.current($(lastRow).find("td:first"));
}
e.sender.select(itemsToSelect);
}
});
});
</script>
</body>
</html>
you can get and persist selected row on a specific page after edit or paging in change and databound events like this:
Grid_OnRowSelect = function (e) {
this.currentPageNum = grid.dataSource.page();
//Save index of selected row
this.selectedIndex = grid.select().index();
}
.Events(e => e.DataBound(
#<text>
function(e)
{
//جهت نمایش صحیح پیجینگ
var grid = $("#Grid").data("kendoGrid");
grid.pager.resize();
//در صورت تغییر صفحه، سطر را انتخاب نکند
if(this.currentPageNum == grid.dataSource.page())
{
//انتخاب مجدد سطر انتخاب شده قبل از ویرایش
var row = grid.table.find("tr:eq(" + this.selectedIndex + ")");
grid.select(row);
}
}
</text>)
)
in your case you can set rows in a list and use in databound

dropdown with add new item in a grid column

I've already implemented a dropdown in a grid column according to this demo: https://demos.telerik.com/kendo-ui/grid/editing-custom
I already did a test with this custom dropdown: https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem
I am wondering if it's possible to add this custom dropdown in a column of the grid to add a new category if the category is not found in the dropdown.
The column doesn't show in the column Comment.
I tried the following code without success, some tips of how to solve this?
EDIT 1: I tried the abinesh solution, and I think it is very close to solving this issue(http://dojo.telerik.com/OZIXOlUM). Still, the addNew function expects the widgetID. In the onclick of the add new button, the widgetID is passing nothing (see print screen). How did I get this ID? The script "noDataTemplate" is trying to get the id this way '#:instance.element[0].id#', but as I said, nothing returns.
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
</div>
<br/>
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
</script>
<script>
$(document).ready(function(){
var dataSource = new kendo.data.DataSource({
data: categories
});
var gridDataSource = new kendo.data.DataSource({
data : [ {
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "Some Comment",
"Confirmed": 1,
"Stat": 1
}]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "Stat",
title: "Status"
}, {
field: "Confirmed",
title: "Confirmed",
template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
}, {
field: "Commen",
title: "Comment",
editor: commentCategoryEditor,
template: "#=Commen#",
//template: "<input id='Commen'>",
width: 450,
nullable : true
}]
});
});
var categories = [{
"CategoryName": "-"
},{
"CategoryName": "Category 1"
}, {
"CategoryName": "Category 2"
}];
function commentCategoryEditor(container, options){
$('<input name="Commen">')
.kendoDropDownList({
filter: "startswith",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: dataSource,
noDataTemplate: $("#noDataTemplate").html()
});
}
function addNew(widgetId, value) {
var widget = $("#" + widgetId).getKendoDropDownList();
var dataSource = widget.dataSource;
if (confirm("Are you sure?")) {
dataSource.add({
CategoryID: 0,
CategoryName: value
});
dataSource.one("sync", function() {
widget.select(dataSource.view().length - 1);
});
dataSource.sync();
}
};
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vat Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="grid"></div>
</div>
</body>
</html>
Thanks in advance
I have created a sample demo project that will help you add the category drop down:
Dojo Telerik Link
Sample Output of drop down list with add new category:
Hope this helps you out!

Why does KendoUI grid add a row to the beginning of the grid and not give the User a choice using rowindex?

Im using KendoUi grids everywhere now and need some help ..
When my Kendo grid first loads I want the user to have the rows and an empty row at the BOTTOM not the top to indicate that they can add data . I dont want to use the in built "Add Row Button".
I have the following
Try1
$(document).ready(function ()
{
var grid = $("#grid").data("kendoGrid");
grid.addRow();
$(".k-grid-edit-row").appendTo("#grid tbody");
}
This is supposed to move the row to the bottom of the grid , but it doesnt, it remans on top ?
Try 2
I also tried to do something like
var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);
This did not work either.
Try 3
But with this try , im not sure if there is a 'load' with the Kendoui Grid, i know there is a keydown , etc
grid.tbody.on('load', function (e)
{
if ($(e.target).closest('tr').is(':last-child'))
{
setTimeout(function ()
{
var totalrows = grid.dataSource.total();
var data = grid.dataSource.data();
var lastItem = data[data.length - 1];
if (typeof lastItem !== 'undefined')
{
if (lastItem.FirstName.trim() != "")
grid.addRow();
}
})
}
}
any help would be great.
The full implementation details is below:
First i add the datasource, this is a simple implementation.
var data = $scope.userdetails;
var dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(data);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
FirstName: { type: "string" }
}
}
}
});
Then i define the grid
let grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
navigatable: true,
editable: {
createAt: "bottom"
},
dataBound: function (e) {
e.sender.tbody.find(".k-grid-Delete").each(function (idx,
element) {
$(element).removeClass("k-button");
});
},
columns: [
{
field: "FirstName", title: "First Name"
},
{
command: [{ name: "Delete", text: "", click: $scope.delete,
className: "far fa-trash-alt fa-fw" }],
title: " ",
width: "100px",
attributes: { class: "k-grid-column-text-centre" }
}
]
}).data("kendoGrid");
I do the below process to add a blank row only when the user clicks tab on the last cell of the last row, but also want to add a blank when the page first loads with the grid.
grid.tbody.on('keydown', function (e) {
i`enter code here`f (e.keyCode == 9) {
if ($(e.target).closest('tr').is(':last-child')) {
setTimeout(function () {
var totalrows = grid.dataSource.total();
var data = grid.dataSource.data();
var lastItem = data[data.length - 1];
if (typeof lastItem !== 'undefined') {
if (lastItem.FirstName.trim() == "")
return;
}
grid.addRow();
})
}
}
});
This code still adds the row at the top of the grid not the bottom.
$(document).ready(function () {
var newRow = { field: "FirstName", Value: "" };
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());
}
There is no other place that i add a row
You try #2 is the right way to go. It probably added a row at the bottom, right? So you just need to programatically edit it:
var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/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/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
let grid = $("#grid").kendoGrid({
toolbar: ["save"],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema:{
model: {
id: "id",
fields: {
age: { type: "number"}
}
}
}
},
editable: true
}).data('kendoGrid');
grid.dataSource.add({});
grid.editRow($("#grid tr").last());
</script>
</body>
</html>
Dojo
If someone is using the built-in method, just use editable.createAt parameter.

jQuery DataTables edit cell in place with drop down select

I have a DataTables table coming from a database. I want to have a dropdown enabled when I select rows from the dataset. The dropdown will be populated with every option from that column.
It has been suggested that this be done using rowCallback, but I haven't been able to figure out how to create the editable fields for the columns by row once the checkbox is enabled.
The function, on select would cause that row's Class and Category cells to become dropdown menus populated with all of the existing options in Class and Category to choose from.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script charset="utf8" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
</head>
</html>
<body>
<div class="container">
<table id="samples" class="display nowrap compact hover dt-left" width="100%"></table>
</table>
</form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>
Jquery
$(document).ready( function () {
var table = $('#samples').DataTable( {
"processing": true,
"serverSide": false,
"pageLength": -1,
"lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
ajax: "datatables.php",
columns: [
{data: '',
defaultContent: '0',
visible: false },
{data: '',
defaultContent: '',
orderable: false,
className: 'select-checkbox',
targets: 1
},
{title : 'Sample Name', 'className': 'dt-left', data: 1},
{title : 'Region/Program', 'className': 'dt-left', data: 2},
{title : 'Class', 'className': 'dt-left', data: 3},
{title : 'Category', 'className': 'dt-left', data: 4},
{title : 'QC Concerns', 'className': 'dt-left', data: 5}
],
select: {
style: 'multi',
},
order: ([[ 4, 'asc' ], [ 5, 'asc' ], [ 3, 'asc' ]]),
orderFixed: [0, 'desc'],
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: '<span class="fa fa-file-excel-o"></span> Download (ALL) or (SELECTED)',
exportOptions: {
columns: [ 2, 5 ],
modifier: {
search: 'applied',
order: 'applied'
}
}
},
{
text: 'Use Selected Library',
action: function ( e, dt, node, config) {
alert( 'This buton needs to pass the Sample Name and Category columns to php.' );
}
},
{
text: 'Upload Predefined Library',
action: function ( e, dt, node, conf ) {
alert( 'This button needs to allow a csv file to be uploaded and passed to php.' );
}
}
]
} );
table.on( 'select', function ( e, dt, type, indexes ) {
if ( type === 'row' ) {
var row = table.row( dt );
table.cell({ row: row.index(), column: 0 } ).data( '1' );
table.draw();
}
});
table.on( 'deselect', function ( e, dt, type, indexes ) {
if ( type === 'row' ) {
var row = table.row( dt );
table.cell({ row: row.index(), column: 0 } ).data( '0' );
table.draw();
}
});
} );
Data sample
const srcData = [
{Name: '752', Region: '7', Class : 'unknown', Category : 'unknown', QC_Concerns: 'yes'},
{Name: 'North 5th', Region: 'NWA', Class : 'unknown', Category : 'square', QC_Concerns: 'yes'},
{Name: 'Elmdale', Region: '6', Class : 'back', Category : 'circle', QC_Concerns: ''},
{Name: 'Rosebud', Region: '7', Class : 'back', Category : 'triangle', QC_Concerns: ''},
{Name: 'Letterkenny', Region: 'GO', Class : 'back', Category : 'square', QC_Concerns: ''},
{Name: '632nd', Region: 'GO', Class : 'front', Category : 'ball', QC_Concerns: ''},
{Name: 'Water', Region: '4', Class : 'front', Category : 'ball', QC_Concerns: ''},
{Name: 'Dirt', Region: '1', Class : 'front', Category : 'mermaid', QC_Concerns: ''},
];
I failed to comprehend your sample data structure, so I demonstrated the way of how it can be done, using my own:
//table source data
const srcData = [{
id: 1,
item: 'apple',
category: 'fruit'
}, {
id: 2,
item: 'banana',
category: 'fruit'
}, {
id: 3,
item: 'carrot',
category: 'vegie'
}, {
id: 4,
item: 'raspberry',
category: 'berry'
}, {
id: 5,
item: 'potato',
category: 'vegie'
}
];
//DataTable initialization
const dataTable = $('#mytable').DataTable({
dom: 't',
data: srcData,
select: 'multi',
columns: Object.keys(srcData[0]).map(key => {
return {
title: key,
data: key
}
})
});
//grab all the unique sorted data entries from the necessary row
const category = dataTable.column(2).data().unique().sort();
//Row click handler
dataTable.on('deselect', (event, row, type, index) => writeCell($(row.node()).find('select')));
dataTable.on('select', (event, row, type, index) => $(row.node()).find('td:eq(2)').html('<select>' + category.reduce((options, item) => options += `<option value="${item}" ${item == row.data().category ? 'selected' : ''}>${item}</option>`, '') + '</select>'));
//Drop down menu stop event propagation
$('#mytable').on('click', 'tbody td select', event => event.stopPropagation());
//Write dropdown value into table
var writeCell = dropdown => {
const currentRow = dataTable.row(dropdown.closest('tr'));
const rowData = currentRow.data();
rowData.category = dropdown.val();
currentRow.remove();
dataTable.row.add(rowData).draw();
};
tbody tr:hover {
background: lightgray !important;
cursor: pointer;
}
tbody tr.selected {
background: gray !important;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
This is going to add the ddl on your 3rd column for all the values in that column.
initComplete: function () { // After DataTable initialized
this.api().columns([2]).every(function () {
/* use of [2] for third column. Leave blank - columns() - for all.
Multiples? Use columns[0,1]) for first and second, e.g. */
var column = this;
var select = $('<select><option value=""/></select>')
.appendTo($('.datatable .dropdown .third').empty()) /* for multiples use .appendTo( $(column.header()).empty() ) or .appendTo( $(column.footer()).empty() ) */
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
}); // this.api function
} //initComplete function
});
});
$(window).resize(function () {
$('.datatable').removeAttr('style');
});

Kendo UI Grid : Drag and Drop Hierarchy not working

I want to drag and drop in different Grid with hierarchical data.
The Drag and drop is working fine but the row is not dropping in Detail item in destination grid.
I have created the sample here. here is the sample for the same..
The following code shows how i built this, but getting some issues in the same. Please help me out what mistake i am doing in this?
function convert(array) {
var map = {};
for (var i = 0; i < array.length; i++) {
var obj = array[i];
obj.items = [];
map[obj.DemographicId] = obj;
var parent = obj.ParentId || '-';
if (!map[parent]) {
map[parent] = {
items: []
};
}
map[parent].items.push(obj);
}
return map['-'].items;
}
var arr = [{"Level":1,"DemographicId":13,"ParentId":null,"Name":"Bewitched General","Description":0.335336528},{"Level":2,"DemographicId":349,"ParentId":13,"Name":"Unacceptable Experience","Description":0.335336528},{"Level":1,"DemographicId":14,"ParentId":null,"Name":"Trained Trust","Description":29.17427794},{"Level":2,"DemographicId":329,"ParentId":14,"Name":"Concerned Rest","Description":0.335336528},{"Level":2,"DemographicId":331,"ParentId":14,"Name":"Tough Sleep","Description":2.012019168},{"Level":3,"DemographicId":346,"ParentId":331,"Name":"Icy Coffee","Description":0.335336528},{"Level":3,"DemographicId":347,"ParentId":331,"Name":"Big Fix","Description":0.335336528},{"Level":3,"DemographicId":348,"ParentId":331,"Name":"Total Worry","Description":0.335336528},{"Level":3,"DemographicId":431,"ParentId":331,"Name":"Fast Discipline","Description":0.335336528},{"Level":3,"DemographicId":586,"ParentId":331,"Name":"Intrepid Sister","Description":0.335336528},{"Level":2,"DemographicId":376,"ParentId":14,"Name":"Hasty Ordinary","Description":0.335336528},{"Level":2,"DemographicId":428,"ParentId":14,"Name":"Unnatural Native","Description":1.006009584},{"Level":3,"DemographicId":442,"ParentId":428,"Name":"Tan Celebration","Description":0.335336528},{"Level":3,"DemographicId":492,"ParentId":428,"Name":"Wise Repair","Description":0.335336528},{"Level":2,"DemographicId":443,"ParentId":14,"Name":"Frightening Historian","Description":3.018028753},{"Level":3,"DemographicId":328,"ParentId":443,"Name":"Improbable Stage","Description":0.335336528},{"Level":3,"DemographicId":517,"ParentId":443,"Name":"Heavenly Debt","Description":0.335336528},{"Level":3,"DemographicId":526,"ParentId":443,"Name":"That Art","Description":2.012019168},{"Level":4,"DemographicId":524,"ParentId":526,"Name":"Vivacious Competition","Description":0.670673056},{"Level":5,"DemographicId":445,"ParentId":524,"Name":"Dependable Potato","Description":0.335336528},{"Level":4,"DemographicId":525,"ParentId":526,"Name":"Watchful Tough","Description":1.006009584},{"Level":5,"DemographicId":432,"ParentId":525,"Name":"Lovable Sing","Description":0.670673056},{"Level":6,"DemographicId":435,"ParentId":432,"Name":"Vengeful Cigarette","Description":0.335336528},{"Level":2,"DemographicId":522,"ParentId":14,"Name":"Insistent Offer","Description":0.335336528},{"Level":2,"DemographicId":590,"ParentId":14,"Name":"Oddball Airline","Description":0.335336528},{"Level":2,"DemographicId":591,"ParentId":14,"Name":"Back Outcome","Description":20.79086474},{"Level":3,"DemographicId":330,"ParentId":591,"Name":"Mushy Active","Description":0.335336528},{"Level":3,"DemographicId":427,"ParentId":591,"Name":"Immaterial Safety","Description":1.341346112},{"Level":4,"DemographicId":437,"ParentId":427,"Name":"Same Restaurant","Description":0.335336528},{"Level":4,"DemographicId":438,"ParentId":427,"Name":"Imaginary Brother","Description":0.335336528},{"Level":4,"DemographicId":613,"ParentId":427,"Name":"Bubbly Hole","Description":0.335336528},{"Level":3,"DemographicId":433,"ParentId":591,"Name":"Several Weird","Description":2.682692225},{"Level":4,"DemographicId":426,"ParentId":433,"Name":"Deadly Potato","Description":0.335336528},{"Level":4,"DemographicId":436,"ParentId":433,"Name":"Ornery Race","Description":0.335336528},{"Level":4,"DemographicId":440,"ParentId":433,"Name":"Trusting Native","Description":0.335336528},{"Level":4,"DemographicId":441,"ParentId":433,"Name":"Flowery Tower","Description":0.335336528},{"Level":4,"DemographicId":479,"ParentId":433,"Name":"Downright Fall","Description":0.335336528},{"Level":4,"DemographicId":480,"ParentId":433,"Name":"Unique Career","Description":0.335336528},{"Level":4,"DemographicId":614,"ParentId":433,"Name":"Unknown Thomas","Description":0.335336528},{"Level":3,"DemographicId":592,"ParentId":591,"Name":"Judicious Analyst","Description":0.335336528},{"Level":3,"DemographicId":593,"ParentId":591,"Name":"Hard Major","Description":0.335336528},{"Level":3,"DemographicId":595,"ParentId":591,"Name":"Naughty Temporary","Description":0.335336528},{"Level":3,"DemographicId":596,"ParentId":591,"Name":"Crisp Commission","Description":0.335336528},{"Level":3,"DemographicId":597,"ParentId":591,"Name":"Valid Funny","Description":0.335336528},{"Level":3,"DemographicId":598,"ParentId":591,"Name":"Luminous Log","Description":0.335336528},{"Level":3,"DemographicId":599,"ParentId":591,"Name":"Sour Introduction","Description":0.335336528},{"Level":3,"DemographicId":600,"ParentId":591,"Name":"Elegant Player","Description":0.335336528},{"Level":3,"DemographicId":601,"ParentId":591,"Name":"Wilted Scheme","Description":1.006009584},{"Level":4,"DemographicId":444,"ParentId":601,"Name":"That Research","Description":0.335336528},{"Level":4,"DemographicId":609,"ParentId":601,"Name":"Overcooked Message","Description":0.335336528},{"Level":3,"DemographicId":602,"ParentId":591,"Name":"Good-natured Responsibility","Description":3.688701809},{"Level":4,"DemographicId":478,"ParentId":602,"Name":"Cumbersome Battle","Description":0.335336528},{"Level":4,"DemographicId":515,"ParentId":602,"Name":"Unsightly Contest","Description":2.682692225},{"Level":5,"DemographicId":439,"ParentId":515,"Name":"Mushy Explanation","Description":0.335336528},{"Level":5,"DemographicId":508,"ParentId":515,"Name":"Obvious Pride","Description":0.670673056},{"Level":6,"DemographicId":509,"ParentId":508,"Name":"Negligible Ask","Description":0.335336528},{"Level":5,"DemographicId":514,"ParentId":515,"Name":"Concerned Classic","Description":1.341346112},{"Level":6,"DemographicId":510,"ParentId":514,"Name":"Greedy Double","Description":0.335336528},{"Level":6,"DemographicId":511,"ParentId":514,"Name":"Reflecting Poem","Description":0.335336528},{"Level":6,"DemographicId":512,"ParentId":514,"Name":"Every Finish","Description":0.335336528},{"Level":4,"DemographicId":610,"ParentId":602,"Name":"Zigzag Meet","Description":0.335336528},{"Level":3,"DemographicId":603,"ParentId":591,"Name":"Esteemed Satisfaction","Description":0.335336528},{"Level":3,"DemographicId":604,"ParentId":591,"Name":"Normal Trouble","Description":1.341346112},{"Level":4,"DemographicId":485,"ParentId":604,"Name":"Hot Fish","Description":0.335336528},{"Level":4,"DemographicId":611,"ParentId":604,"Name":"Eager Perception","Description":0.335336528},{"Level":4,"DemographicId":612,"ParentId":604,"Name":"Shocking Aside","Description":0.335336528},{"Level":3,"DemographicId":605,"ParentId":591,"Name":"Terrific King","Description":0.335336528},{"Level":3,"DemographicId":606,"ParentId":591,"Name":"Humiliating Suit","Description":0.335336528},{"Level":3,"DemographicId":607,"ParentId":591,"Name":"Serious Smile","Description":0.335336528},{"Level":3,"DemographicId":608,"ParentId":591,"Name":"Memorable Ship","Description":3.353365281},{"Level":4,"DemographicId":430,"ParentId":608,"Name":"Wan Science","Description":0.335336528},{"Level":4,"DemographicId":434,"ParentId":608,"Name":"Hard Rule","Description":0.335336528},{"Level":4,"DemographicId":473,"ParentId":608,"Name":"Marvelous Radio","Description":0.335336528},{"Level":4,"DemographicId":477,"ParentId":608,"Name":"Visible Personality","Description":0.335336528},{"Level":4,"DemographicId":481,"ParentId":608,"Name":"Scrawny Shine","Description":0.335336528},{"Level":4,"DemographicId":507,"ParentId":608,"Name":"Descriptive Pride","Description":0.335336528},{"Level":4,"DemographicId":516,"ParentId":608,"Name":"Pleased Private","Description":0.335336528},{"Level":4,"DemographicId":548,"ParentId":608,"Name":"Frizzy District","Description":0.335336528},{"Level":4,"DemographicId":615,"ParentId":608,"Name":"Juicy Organization","Description":0.335336528},{"Level":3,"DemographicId":616,"ParentId":591,"Name":"Sweaty Equal","Description":0.335336528},{"Level":3,"DemographicId":621,"ParentId":591,"Name":"Sweltering Cigarette","Description":0.335336528},{"Level":3,"DemographicId":623,"ParentId":591,"Name":"Buoyant Rule","Description":0.335336528},{"Level":3,"DemographicId":625,"ParentId":591,"Name":"Whimsical Remote","Description":0.335336528},{"Level":3,"DemographicId":633,"ParentId":591,"Name":"Notable Feed","Description":0.335336528},{"Level":3,"DemographicId":635,"ParentId":591,"Name":"Puzzled Pin","Description":1.006009584},{"Level":4,"DemographicId":594,"ParentId":635,"Name":"Plump Member","Description":0.335336528},{"Level":4,"DemographicId":636,"ParentId":635,"Name":"Colorless Service","Description":0.335336528},{"Level":2,"DemographicId":618,"ParentId":14,"Name":"Extroverted Excuse","Description":0.335336528},{"Level":2,"DemographicId":622,"ParentId":14,"Name":"Definite Sector","Description":0.335336528},{"Level":2,"DemographicId":631,"ParentId":14,"Name":"Dear Blue","Description":0.335336528},{"Level":1,"DemographicId":15,"ParentId":null,"Name":"Weird Rush","Description":3.688701809},{"Level":2,"DemographicId":461,"ParentId":15,"Name":"Vigilant Mine","Description":0.335336528},{"Level":2,"DemographicId":527,"ParentId":15,"Name":"Darling Cousin","Description":2.682692225},{"Level":3,"DemographicId":504,"ParentId":527,"Name":"Courteous Knife","Description":0.335336528},{"Level":3,"DemographicId":528,"ParentId":527,"Name":"Constant Window","Description":2.012019168},{"Level":4,"DemographicId":6,"ParentId":528,"Name":"Serene Personal","Description":0.335336528},{"Level":4,"DemographicId":518,"ParentId":528,"Name":"Cooperative Marketing","Description":0.335336528},{"Level":4,"DemographicId":530,"ParentId":528,"Name":"Likely Car","Description":0.335336528},{"Level":4,"DemographicId":531,"ParentId":528,"Name":"Worst Lip","Description":0.335336528},{"Level":4,"DemographicId":550,"ParentId":528,"Name":"Quintessential Evening","Description":0.335336528},{"Level":2,"DemographicId":529,"ParentId":15,"Name":"Knowing Debt","Description":0.335336528},{"Level":2,"DemographicId":587,"ParentId":15,"Name":"Harmless Weight","Description":0.335336528},{"Level":1,"DemographicId":16,"ParentId":null,"Name":"Tidy Mouse","Description":2.012019168},{"Level":2,"DemographicId":5,"ParentId":16,"Name":"Useless Chemistry","Description":0.335336528},{"Level":2,"DemographicId":254,"ParentId":16,"Name":"Several Expert","Description":0.335336528},{"Level":2,"DemographicId":486,"ParentId":16,"Name":"Young String","Description":0.335336528},{"Level":2,"DemographicId":519,"ParentId":16,"Name":"Ideal Army","Description":1.006009584},{"Level":3,"DemographicId":520,"ParentId":519,"Name":"Tart Text","Description":0.335336528},{"Level":3,"DemographicId":521,"ParentId":519,"Name":"Tiny Church","Description":0.335336528}]
var myData = convert(arr)
var dataSource1 = new kendo.data.DataSource({
data: myData
});
$(document).ready(function () {
var originalGrid = $("#originalGrid").kendoGrid({
dataSource: dataSource1,
sortable: false,
pageable: false,
detailInit: detailInit1,
dataBound: function () {
//this.expandRow(this.tbody.find("tr.k-master-row").last());
},
columns: [
{
field: "Name",
title: "Name",
width: "80px"
},
{
field: "Description",
title: "Amount",
width: "30px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
});
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items //data is the current position item, items is its child items
},
scrollable: false,
sortable: false,
pageable: false,
detailInit: detailInit1,
columns: [
{
field: "Name",
title: "Name",
width: "80px"
},
{
field: "Description",
title: "Amount",
width: "30px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
}
$(document).ready(function () {
var dataSource2 = new kendo.data.DataSource({
data: []
});
var grid2 = $("#grid2").kendoGrid({
dataSource: dataSource2,
width: 400,
sortable: false,
pageable: false,
detailInit: detailInit11,
schema: {
model: {
id: "DemographicId"
}
},
columns: [
{
field: "Name",
title: "Name",
width: "40px"
},
{
field: "Description",
title: "Amount",
width: "110px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
function detailInit11(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items
},
scrollable: false,
sortable: false,
pageable: false,
detailInit: detailInit11,
columns: [
{
field: "Name",
title: "Name",
width: "110px"
},
{
field: "Description",
title: "Amount",
width: "110px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
}
$(originalGrid).kendoDraggable({
filter: "tr",
hint: function (e) {
var item = $('<div class="k-grid k-widget" style="background-color: DarkOrange; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
return item;
},
group: "gridGroup1",
});
var currentDataItem = null;
function getItemByUid(uid, currentUid, data) {
for (let index = 0; index < data.length; index++) {
const element = data[index];
if (element.uid == currentUid) {
currentDataItem = element;
return false;
} else {
if (element.items) {
getItemByUid(element.uid, currentUid, element.items);
}
}
}
}
grid2.kendoDropTarget({
drop: function (e) {
var uid = e.draggable.currentTarget.data("uid");
var dataItem = getItemByUid(uid, uid, dataSource1.data());
dataSource2.add(currentDataItem);
},
group: "gridGroup1",
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div>
<div style="width:50%;float:left" class="dragGrid">
<div id="originalGrid"></div>
</div>
<div style="width:50%;float:right" >
<div id="grid2"></div>
</div>
</div>
</body>
</html>
You need to handle the drop target for the detail grids as well. Use the - almost - same code for kendoDropTarget to your detail grid:
gridDetail.kendoDropTarget({
drop: function (e) {
var uid = e.draggable.currentTarget.data("uid");
var dataItem = getItemByUid(uid, uid, dataSource1.data());
$(e.dropTarget).data("kendoGrid").dataSource.add(currentDataItem);
},
group: "gridGroup1",
});
Demo

Categories

Resources