I have a Kendo MultiColumnDropDown, that has 2 columns in it, one column is checkboxes, the other is just data.
Everytime I check a checkbox then the dropdown closes, I don't want that to happen until I close it myself and can't figure out how to stop the select event or to stop the dropdown from closing until I close it.
$(document).ready(function() {
LoadMCDD(MCDDData());
});
function LoadMCDD(ds) {
let a = ds[0].DropData;
let arr = a.split('|');
let obj = [];
for (let i = 0; i < arr.length; i++) {
obj.push({
DropData: arr[i]
});
}
$('#MCDDForPrompt').empty();
$('#MCDDForPrompt').kendoMultiColumnComboBox({
placeholder: "Select...",
dataTextField: "DropData",
dataValueField: "DropData",
height: 300,
autoClose: false,
columns: [{
template: "<center><input type='checkbox' class='checkbox' /></center>",
width: "30px"
},
{
field: "DropData",
title: "Data",
width: 200
}
],
dataSource: {
data: obj,
},
change: function(e) {
//console.log(e);
},
select: function(e) {
//console.log(e);
}
});
}
function MCDDData() {
let ds = [{
Answer: "",
DefaultAnswer: "",
DropData: "Check 1|Check 2|Check 3|Check 4",
}];
return ds;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />
<div id="MCDDForPrompt" style="width:400px"></div>
Try this:
select: function(e) {
e.sender.element.data('fromSelect', true);
},
close: function(e) {
if (e.sender.element.data('fromSelect')) {
e.preventDefault();
e.sender.element.data('fromSelect', null);
}
}
$(document).ready(function() {
LoadMCDD(MCDDData());
});
function LoadMCDD(ds) {
let a = ds[0].DropData;
let arr = a.split('|');
let obj = [];
for (let i = 0; i < arr.length; i++) {
obj.push({
DropData: arr[i]
});
}
$('#MCDDForPrompt').empty();
$('#MCDDForPrompt').kendoMultiColumnComboBox({
placeholder: "Select...",
dataTextField: "DropData",
dataValueField: "DropData",
height: 300,
autoClose: false,
columns: [{
template: "<center><input type='checkbox' class='checkbox' /></center>",
width: "30px"
},
{
field: "DropData",
title: "Data",
width: 200
}
],
dataSource: {
data: obj,
},
select: function(e) {
e.sender.element.data('fromSelect', true);
},
close: function(e) {
if (e.sender.element.data('fromSelect')) {
e.preventDefault();
e.sender.element.data('fromSelect', null);
}
}
});
}
function MCDDData() {
let ds = [{
Answer: "",
DefaultAnswer: "",
DropData: "Check 1|Check 2|Check 3|Check 4",
}];
return ds;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />
<div id="MCDDForPrompt" style="width:400px"></div>
Related
I am creating a project using javascript with kendo. In my project there is a requirement to implement hierarchical chart. I research this type of chart in kendo and could not get the exact result. Here is the demo code:
function localDataSource(options) {
var id = options.schema.model.id;
var data = options.data;
var newId = -1;
var created, updated, deleted;
var dataSource = new kendo.data.DataSource($.extend(true, {
transport: {
read: function(e) {
created = {};
updated = {};
deleted = {};
e.success(data || []);
},
update: function(e) {
var item = e.data;
if (!created[item[id]]) {
updated[item[id]] = item;
}
e.success();
},
destroy: function(e) {
var idValue = e.data[id];
if (!created[idValue]) {
deleted[idValue] = e.data;
} else {
delete created[idValue];
}
e.success();
},
create: function(e) {
var item = e.data;
item[id] = newId--;
created[item[id]] = $.extend(true, {}, item);
e.success(item);
}
},
}, options));
dataSource.getChanges = function() {
return {
deleted: toArray(deleted),
created: toArray(created),
updated: toArray(updated)
}
};
return dataSource;
}
function toArray(changes) {
var result = [];
for (var id in changes) {
result.push(changes[id]);
}
return result;
}
function createDiagram() {
var shapesDataSource = localDataSource({
data: [{
"Id": 1,
"JobTitle": "President"
}, {
"Id": 2,
"JobTitle": "VP Finance",
"Color": "#3399cc"
}, {
"Id": 3,
"JobTitle": "VP Customer Relations",
"Color": "#3399cc"
}, {
"Id": 4,
"JobTitle": "VP Human Resources",
"Color": "#3399cc"
}],
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "number",
editable: false
},
JobTitle: {
type: "string"
},
Color: {
type: "string"
}
}
}
}
});
var connectionsDataSource = localDataSource({
data: [{
"Id": 1,
"FromShapeId": 1,
"ToShapeId": 2
}, {
"Id": 2,
"FromShapeId": 1,
"ToShapeId": 3
}, {
"Id": 3,
"FromShapeId": 1,
"ToShapeId": 4
}],
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "number",
editable: false
},
from: {
from: "FromShapeId",
type: "number"
},
to: {
from: "ToShapeId",
type: "number"
}
}
}
}
});
var changesViewModel = kendo.observable({
showChanges: function() {
var diagram = $("#diagram").data("kendoDiagram");
this.set("shapes", diagram.dataSource.getChanges());
this.set("connections", diagram.connectionsDataSource.getChanges());
this.set("visible", true);
},
shapes: {
deleted: [],
created: [],
updated: []
},
connections: {
deleted: [],
created: [],
updated: []
}
});
kendo.bind($("#changes"), changesViewModel);
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "#586477",
width: 2
}
},
dataBound: onDataBound
});
}
$(document).ready(createDiagram);
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
if (dataItem.JobTitle === "President") {
g.append(new dataviz.diagram.Circle({
radius: 60,
stroke: {
width: 2,
color: dataItem.Color || "#586477"
},
fill: "#e8eff7"
}));
} else {
g.append(new dataviz.diagram.Rectangle({
width: 240,
height: 67,
stroke: {
width: 0
},
fill: "#e8eff7"
}));
g.append(new dataviz.diagram.Rectangle({
width: 8,
height: 67,
fill: dataItem.Color,
stroke: {
width: 0
}
}));
}
return g;
}
function onDataBound(e) {
this.bringIntoView(this.shapes);
}
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="diagram"></div>
<div id="changes">
<button type="button" class="k-button" data-bind="click:showChanges">Show changes</button>
<div data-bind="visible:visible">
Deleted Shapes:
<div data-bind="source: shapes.deleted" data-template="shapeItemTemplate">
</div>
<hr /> Created Shapes:
<div data-bind="source: shapes.created" data-template="shapeItemTemplate">
</div>
<hr /> Updated Shapes:
<div data-bind="source: shapes.updated" data-template="shapeItemTemplate">
</div>
<hr /> Deleted Connections:
<div data-bind="source: connections.deleted" data-template="connectionItemTemplate">
</div>
<hr /> Created Connections:
<div data-bind="source: connections.created" data-template="connectionItemTemplate">
</div>
<hr /> Updated Connections:
<div data-bind="source: connections.updated" data-template="connectionItemTemplate">
</div>
</div>
</div>
<script type="text/kendo" id="shapeItemTemplate">
<div>
JodTitle: #:JobTitle#
</div>
</script>
<script type="text/kendo" id="connectionItemTemplate">
<div>
#console.log(data)# #:FromShapeId# - #:ToShapeId#
</div>
</script>
</body>
</html>
But i need below type of graph with clickable circle.
Please help me to fix this problem
I am using jsgrid with checkboxes for row selection such as below
$(function() {
$("#jsGrid").jsGrid({
...
headerTemplate: function() {
return $("<input>").attr("type", "checkbox").attr("id", "selectAllCheckbox");
},
itemTemplate : function(_, item) {
return $("<input>").attr("type", "checkbox").attr("class", "singleCheckbox")
.prop("checked", $.inArray(item, selectedItems) > -1)
.on("change", function () {
$(this).is(":checked") ? selectItem(item) : unselectItem(item);
});
},
}
fields :[{
{ name: "unique_id", type: "text", width: 100, visible:false },
{ name: "some_name", type: "text", width: 100},
...
]
});
$("#selectAllCheckbox").click(selectAllCheckBox);
});
The selectAllCheckBox function given below.
var selectAllCheckBox = function(item) {
selectedItems = [];
if(this.checked) { // check select status
$('.singleCheckbox').each(function() {
this.checked = true;
selectItem($(this).parent().next().text());//line 1
});
}else {
$('.singleCheckbox').each(function() {
this.checked = false;
unselectItem(item);
});
selectedItems = [];
}
}
I would like to collect all the selected unique_ids and process it on the server side. But, as unique_id is hidden, the code at line 1 always returns the values of some_name. How can I get the values of unique_id?
In jsGrid docs, I have not found any method regarding or getting hidden column but you can do like below manually implementation to get the selected record/id.
I have taken a custom selections config inside of jsGrid object as array to store the selected row into that.
*I am pushing full object of particular record in selections array inside of jsGrid.
DEMO
$("#jsGrid").jsGrid({
width: "100%",
paging: true,
selections: [],
data: [{
ClientId: 1,
Client: "Aaaa Joseph"
}, {
ClientId: 2,
Client: "Zzzz Brad"
}, {
ClientId: 3,
Client: "Mr Nice Guy"
}],
fields: [{
headerTemplate: function() {
var grid = this._grid;
return `<input class="all" type="checkbox" ${grid.selections.length==grid.data.length?'checked':''} />`;
},
itemTemplate: function(_, item) {
return `<input class="single" value=${item.ClientId} type="checkbox" _isall=${false} ${this._grid.selections.some(ClientId=>ClientId==item.ClientId)?'checked':''} />`
}
}, {
type: "text",
width: 80,
name: 'Client'
}]
});
$('#jsGrid input[type=checkbox]').on('change', function() {
var checkbox = $(this),
grid = checkbox.closest('#jsGrid').data().JSGrid;
if (checkbox.attr('class') == 'all') {
let checked = checkbox.is(":checked");
grid.selections = checked ? grid.data : [];
$.each($('#jsGrid input[class=single]'), (i, el) => $(el).prop('checked', checked))
} else {
if (checkbox.is(":checked")) {
grid.selections.push(grid.data.find(({
ClientId
}) => ClientId == checkbox.val()));
} else {
grid.selections = grid.selections.filter(({
ClientId
}) => ClientId != checkbox.val());
}
checkbox.closest('#jsGrid').find('input.all').prop('checked', grid.selections.length == grid.data.length);
}
});
$('button.getrecord').on('click', function() {
console.clear();
console.log($('#jsGrid').data().JSGrid.selections);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<button class="getrecord">Get Selected record</button>
<div id="jsGrid"></div>
This is not answer.. i cant add the code in above comment, that has a related question. so adding it here.. what is wrong with this code. grid not loading. I am using adminLte plugin jsgrid in
https://adminlte.io/themes/v3/pages/tables/jsgrid.html
<script>
$("#jsGrid").jsGrid({
width: "100%",
paging: true,
selections: [],
controller: {
loadData: function() {
var d = $.Deferred();
$.ajax({
type: 'GET',
url: 'https://xkcd.com/info.0.json',
dataType: "json",
success: function (data) {
d.resolve(data);
},
error: function(e) {
alert("error: " + e.responseText);
}
});
console.log("here test");
return d.promise();
}
},
fields: [{
headerTemplate: function() {
var grid = this._grid;
return `<input class="all" type="checkbox" ${grid.selections.length==grid.loadData.length?'checked':''} />`;
},
itemTemplate: function(_, item) {
return `<input class="single" value=${item.num} type="checkbox" _isall=${false} ${this._grid.selections.some(num=>num==item.num)?'checked':''} />`
},
width: 10,
align: "center"
}, { name: "year", type: "textarea", title: "year", width: 50 },
{ name: "month", type: "number", title: "month", width: 50, align: "center" },
{ name: "day", type: "number", title: "day", width: 50 , align: "center"},
{ name: "title", type: "textarea", title: "title", width: 50 , align: "center"}]
});
$('#jsGrid input[type=checkbox]').on('change', function() {
var checkbox = $(this),
grid = checkbox.closest('#jsGrid').data().JSGrid;
if (checkbox.attr('class') == 'all') {
let checked = checkbox.is(":checked");
grid.selections = checked ? grid.data : [];
$.each($('#jsGrid input[class=single]'), (i, el) => $(el).prop('checked', checked))
} else {
if (checkbox.is(":checked")) {
grid.selections.push(grid.data.find(({
feed_id
}) => feed_id == checkbox.val()));
} else {
grid.selections = grid.selections.filter(({
feed_id
}) => feed_id != checkbox.val());
}
checkbox.closest('#jsGrid').find('input.all').prop('checked', grid.selections.length == grid.data.length);
}
});
$('button.getrecord').on('click', function() {
console.clear();
console.log($('#jsGrid').data().JSGrid.selections);
});
</script>
I need to change behavior for a widget dijit/form/Select.
Widget should not allow focus (from mouse or using the keyboard) for options which have property disabled: true.
I would like to know if you can point me out how to achieve this result.
require([
'dijit/form/Select',
'dojo/_base/window',
'dojo/domReady!'
], function(Select, win) {
var select = new Select({
name: 'select2',
options: [{
label: '<i>Swedish Cars</i>',
value: '',
disabled: true
},
{
label: 'Volvo',
value: 'volvo'
},
{
label: 'Saab',
value: 'saab',
selected: true
},
{
label: '<i>German Cars</i>',
value: '',
disabled: true
},
{
label: 'Mercedes',
value: 'mercedes'
},
{
label: 'Audi',
value: 'audi'
}
]
}, 'select');
select.on('change', function(evt) {
console.log('myselect_event');
});
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />
<script>
window.dojoConfig = {
parseOnLoad: false,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<body class="claro">
<div id="select"></div>
</body>
I was able to solve this issue using a monkey patch.
The solution consist into:
Adding markup in label so we can customize the look.
Adding property disabled:true in item options, so item won't fire onChange.
Disabling focus on group item when mouse and keyboard are used.
I still very interesting to know if another better/cleaner solutions exists.
require([
'dijit/form/Select',
'dojo/_base/window',
'dojo/domReady!'
], function(Select, win) {
var select = new Select({
name: 'select2',
options: [{
label: '<i>Swedish Cars</i>',
value: '',
group: true,
disabled: true
}, {
label: 'Volvo',
value: 'volvo'
}, {
label: 'Saab',
value: 'saab',
selected: true
}, {
label: '<i>German Cars</i>',
value: '',
group: true,
disabled: true
}, {
label: 'Mercedes',
value: 'mercedes'
}, {
label: 'Audi',
value: 'audi'
}]
}, 'select');
select.on('change', function(value) {
alert(value);
});
select.dropDown._onUpArrow = function() {
this.dropDown.focusPrev()
}.bind(select);
select.dropDown._onDownArrow = function() {
this.dropDown.focusNext()
}.bind(select);
select.dropDown.focusNext = function() {
var next = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, 1);
var nextSuccessive;
var nextFinal;
if (next.option.group) {
var next = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, 1);
this.dropDown.focusChild(next);
nextSuccessive = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, 1);
nextFinal = nextSuccessive;
} else {
nextFinal = next;
}
this.dropDown.focusChild(nextFinal);
}.bind(select);
select.dropDown.focusPrev = function() {
var prev = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, -1);
var prevSuccessive;
var prevFinal;
if (prev.option.group) {
var prev = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, -1);
this.dropDown.focusChild(prev);
prevSuccessive = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, -1);
prevFinal = prevSuccessive;
} else {
prevFinal = prev;
}
this.dropDown.focusChild(prevFinal, true);
}.bind(select);
select.dropDown.onItemHover = function( /*MenuItem*/ item) {
if (item.option.group) {
item._set("hovering", false);
console.log('skip hover');
return;
}
if (this.activated) {
this.set("selected", item);
if (item.popup && !item.disabled && !this.hover_timer) {
this.hover_timer = this.defer(function() {
this._openItemPopup(item);
}, this.popupDelay);
}
} else if (this.passivePopupDelay < Infinity) {
if (this.passive_hover_timer) {
this.passive_hover_timer.remove();
}
this.passive_hover_timer = this.defer(function() {
this.onItemClick(item, {
type: "click"
});
}, this.passivePopupDelay);
}
this._hoveredChild = item;
item._set("hovering", true);
}.bind(select.dropDown);
select.dropDown._onItemFocus = function( /*MenuItem*/ item) {
if (item.option.group) {
return;
}
if (this._hoveredChild && this._hoveredChild != item) {
this.onItemUnhover(this._hoveredChild);
}
this.set("selected", item);
}.bind(select.dropDown);
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />
<script>
window.dojoConfig = {
parseOnLoad: false,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<body class="claro">
<div id="select"></div>
</body>
I've got a Kendo Grid and on its DataBound event, I want to add its data source to a Kendo MultiSelect. So, when the data from the grid is loaded, the below function is fired.
Here's what I have tried so far, without success, but from the code you can see what I intend:
function addToMultiSelect() {
var multiSelect = $("#multiSelect").data("kendoMultiSelect");
var grid = $("#grid").data("kendoGrid");
var places = grid.dataSource._data;
for (var i = 0; i < places.length; i++) {
var row = instPlaces[i];
var id = row.Id;
var mediumDescription = row.MediumDescription;
alert(id + " - " + mediumDescription);
multiSelect.dataSource.insert(i, { text: mediumDescription, value: id })
}
multiSelect.dataSource.read();
}
The alert properly shows the id and description of all the datagrid's items, so, I'm getting the data from the grid right.
I add them to the multiSelect's datasource, the last line is to refresh it and show the new data, but it doesn't. The multiSelect remains empty.
Try the following:
function addToMultiSelect() {
var multiSelect = $("#multiSelect").data("kendoMultiSelect");
var grid = $("#grid").data("kendoGrid");
var places = grid.dataSource.data();
// Read original data content
var multiData = multiSelect.dataSource.data();
for (var i = 0; i < places.length; i++) {
...
// insert new element into copy of multiselect data
multiData.push({ text: mediumDescription, value: id })
}
// Write back the modified data
multiSelect.dataSource.data(multiData);
}
See the following code example:
$(document).ready(function() {
function addToMultiSelect(e) {
var grid = this;
var data = this.dataSource.data();
var multiData = [];
for (var i = 0; i < data.length; i++) {
multiData.push({ text: data[i].ShipName, value: i });
}
multi.dataSource.data(multiData);
}
var multi = $("#multi").kendoMultiSelect({
dataSource: {
data: [
{ text: "ship 1", value: 1 },
{ text: "ship 2", value: 2 },
{ text: "ship 3", value: 3 },
{ text: "ship 4", value: 4 }
]
},
dataTextField: "text",
dataValueField: "value"
}).data("kendoMultiSelect");
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: addToMultiSelect,
height: 550,
columns: [
"OrderID",
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShipCity",
title: "Ship City"
}
]
});
});
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<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://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
Ship Names copied from Grid DataSource: <input id="multi"/>
Grid
<div id="grid"></div>
I have a Kendo UI Grid that displays n-child records, that I also have a custom resize function that keeps the grid sized for the browser window height. If I remove that resizeListener, the child records display as appropriate. If I have the resizeListener bound, the child records do not display.
This issue is specific to Internet Explorer 8 (sorry, it's a company policy limitation). The grid functions normally in Firefox.
I have tried using $(window).off("resize") when I activate the child template, in the databound, and in really a variety of random places that I thought might possibly work - but nothing so far.
I'm looking for a solution or a work-around for IE.
Here is the function:
function resizeGrid() {
var gridElement = $("#boxesgrid");
var dataArea = gridElement.find(".k-grid-content");
var newGridHeight = $(document).height() > 850 ? 850 : $(document).height() * .75;
var newDataAreaHeight = newGridHeight * .7;
dataArea.height(newDataAreaHeight);
gridElement.height(newGridHeight);
gridElement.data("kendoGrid").refresh();
}
var resizeListener = function () {
$(window).one("resize", function () {
resizeGrid();
setTimeout(resizeListener, 500);
});
};
Here is the html:
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading">Line of Business</div>
<div class="panel-body" id="lobnav"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Application</div>
<div class="panel-body" id="lobapp"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Filter</div>
<div class="panel-body" id="jobfilter">
</div>
</div>
</div>
<div class="col-md-10">
<div id="boxesgrid"></div>
</div>
Here is the rest of the javascript/kendo code:
$(document).ready(function () {
resizeListener();
var isParent, appId, lobId, boxId;
var apiUrl = '#ViewBag.ApiUrl';
var lobDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Lob"
}
},
schema: {
model: {
id: "LobId",
hasChildren: "HasChildren"
}
}
});
var appsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "App"
},
parameterMap: function (data, action) {
if (action === "read") {
data.lobid = lobId;
data.parent = isParent;
return data;
} else {
return data;
}
}
}
});
var filterDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Theme"
}
},
schema: {
model: { id: "FilterId" }
}
});
var boxesDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Process"
},
parameterMap: function (data) {
data.appid = appId;
data.parent = isParent;
data.lobid = lobId;
return kendo.stringify(data);
}
},
schema: {
data: "Data",
total: "Total",
model: { id: "JobId" }
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
var lobnav = $("#lobnav").kendoTreeView({
select: function (e) {
var tree = this;
var src = tree.dataItem(e.node);
lobId = src.LobId;
isParent = src.HasChildren;
},
change: function (e) {
appsDataSource.read();
},
dataSource: {
transport: {
read: {
url: apiUrl + "Lob"
}
},
schema: {
model: {
id: "LobId",
hasChildren: "HasChildren"
}
}
},
loadOnDemand: false,
dataTextField: "LobName"
});
var appnav = $("#lobapp").kendoListView({
selectable: "single",
autoBind: false,
change: function () {
var idx = this.select().index();
var itm = this.dataSource.view()[idx];
appId = itm.AppId;
boxesDataSource.query({
page: 1,
pageSize: 35
});
},
template: "<div class='pointercursor'>${AppName}</div>",
dataSource: appsDataSource
});
var jobsfilter = $("#jobfilter").kendoListView({
selectable: "single",
loadOnDemand: false,
template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
dataSource: filterDataSource,
dataBound: function () {
var dsource = $("#jobfilter").data("kendoListView").dataSource;
if (dsource.at(0).FilterName !== "All") {
dsource.insert(0, { FilterId: 0, FilterName: "All" });
}
},
change: function () {
var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
var appDs = appsDataSource.view(), apps = $("#lobapp").data("kendoListView"),
selected = $.map(apps.select(), function (item) {
return appDs[$(item).index()].AppName;
});
if (selected.length > 0) {
if (dataItem.FilterId !== 0) {
var $filter = new Array();
$filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
jgrid.dataSource.filter($filter);
} else {
jgrid.dataSource.filter({});
}
}
}
});
var jgrid = $("#boxesgrid").kendoGrid({
columns: [
{
field: "AppName",
title: "App"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
],
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
pageSizes: [35],
numeric: true,
refresh: true,
pageSize: 35
},
autoBind: false,
scrollable: true,
resizable: true,
detailInit: detailInit,
dataSource: boxesDataSource
}).data("kendoGrid");
function detailInit(e) {
var eventData = e;
$.ajax({
url: apiUrl + "ProcessJobs",
type: "POST",
data: {BoxId: e.data.JobId, AppId: e.data.AppId},
dataType: "json",
success: function(data, status, xhr) {
initializeDetailGrid(eventData, data);
}
});
};
function initializeDetailGrid(e, result) {
var moreChildren = result[0].HasChildren;
var gridBaseOptions = {
dataSource: result,
scrollable: false,
sortable: true,
columns: [
{
field: "ParentJobId",
title: "Parent Job"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
]
};
var gridOptions = {};
if (moreChildren) {
gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
} else {
gridOptions = gridBaseOptions;
};
$("<div/>").appendTo(e.detailCell).kendoGrid(gridOptions);
};
});
The resize function needed to be changed. The error was calling refresh on the grid, rather than resize. The corrected function looks like:
function resizeGrid() {
var gridElement = $("#boxesgrid");
var newGridHeight = $(window).height() > 800 ? 800 : $(document).height() * .75;
gridElement.height(newGridHeight);
gridElement.data("kendoGrid").resize();
}
Setting the data area separately was incorrect, as well.