I'm looking to programmatically select a tree item in a TreeView. This is my code:
var it = seqItems[passItem.passNum-1];
this.sequenceView.reveal(it, {select: true, focus: true, expand: false});
Is this function implemented?
Related
I have a situation where I need to destroy kendo window once my job is complete.
Kendo window opens up on a button click and destroys when its job is complete.
But now I have a problem that I cannot open the window again on that button click once it is destroyed.
My Kendo Window code is :
var Snapshotwindow = $('#newWindow');
Snapshotwindow.kendoWindow({
width: "500px",
height: "267px",
resizable: false,
sortable: false,
modal: true,
draggable: false,
title: "New Window",
visible: false,
appendTo: "#AppBody",
});
Snapshotwindow.data("kendoWindow").center().open();
How can I achieve it?
Can I re initialize the window once it is destroyed?
When a kendo Window widget is destroyed, it removes it's HTML elements from the DOM including the root element from which it was created. This is why you are unable to open the window a second time. This leaves you with two basic approaches when using the Window widget:
Create the widget first time around, holding a reference to it. Don't destroy on close, and re-open subsequent times using the reference.
if (Snapshotwindow == null) {
Snapshotwindow = $('#newWindow').kendoWindow({
width: "500px",
height: "267px",
resizable: false,
sortable: false,
modal: true,
draggable: false,
title: "New Window",
visible: false,
appendTo: "#AppBody",
}).data("kendoWindow");
}
Snapshotwindow.center().open();
Append a new element to the DOM, turning that into a window widget before showing it. Can be safely destroyed, and the process subsequently repeated as many times as you like.
<script id="modal-editor-window" type="text/x-kendo-template">
<!-- your window content here -->
</script>
<script type="text/javascript">
var options = {
title: "Edit",
modal: true,
visible: false,
deactivate: function () {
this.destroy();
}
};
var mew = $.parseHTML($("#modal-editor-window").html().trim());
$("body").append(mew);
var mw = $(mew).kendoWindow(options).data("kendoWindow");
mw.center().open();
</script>
Since you say you need to destroy the window, option 2 is the way to go; I would suggest that loading the new DOM element is probably easiest to achieve by using a kendo template (as shown above).
I am using kendo ui grid and tree in a cshtml page and want to drag and drop multiple rows from the grid to the tree. I am able to drag and drop a single row from the grid to the tree, but for multiple items, same approach does not work.
Here are my code segments:
$("#grid").kendoGrid({
selectable: "row",
sortable: true,
pageable: true,
columns: .......
$("#treeview").kendoTreeView({
dragAndDrop: true
});
And my kendoDraggable and kendoDropTarget events:
$("#grid").kendoDraggable({
filter: "tr",
hint: function () {
var g = $("#grid").data("kendoGrid")
return g.select().clone()
}
});
$("#treeview").kendoDropTarget({
drop: droptargetOnDrop
});
The above code segment works for dragging a single row from grid to the tree.
But if I change the grid definition for multiple row selection, the kendoDropTarget drop event no longer get triggered.
$("#grid").kendoGrid({
selectable: "multiple",
sortable: true,
pageable: true,
columns: .......
Please let me know if I am doing anything wrong and any possible solution to this.
Multiple selection on the grid does not play nicely with drag and drop due to the fact that selectable events and drag events both fire with selectable events taking precedence.
To work around this, you can cancel the selectable event when dragging.
To do this, change your kendoDraggable config to include the following in your dragstart function:
dragstart: function (e) {
$('#grid').data("kendoGrid").selectable.userEvents.cancel();
}
I have a kendo treeview like this:
sectionTreeView.kendoTreeView({
dataValueField: "Id",
dataTextField: "Name",
checkboxes: {
checkChildren: true
}
});
I use the following code to programmatically select the root node:
divTreeView.getKendoTreeView().select(".k-item:first");
However, the first node is only highlighted but its checkbox remains unchecked and so is every child node below it. How do I make every checkbox checked?
Try checking the checkbox after you have selected the node like this:
var treeView = divTreeView.getKendoTreeView();
// you need to select the node for this to work
treeView.select(".k-item:first");
treeView.select().find(".k-checkbox input").prop("checked", true).change();
$("#accountsTree .k-item input[type=checkbox]").attr('checked', 'checked');
I have main page: main.html
In this page I have a viewmodel with a hierarchical datasource
datasource: [{id:"", items:[{.....}]}];
In a modal window I have a Treeview. Treeview call a datasource in main page.
In my datasource there is a variable check: true/false
I want that when I check or uncheck a checkbox in the treeview this bind a datasource.. so when I close a modal window, and the I re-open it I will find the selected/unselected checkbox restored...
If you have an HTML like this:
<div id="win" class="k-content">
<div id="treeview"></div>
</div>
Where you have a kendoWindow which id is win containing a kendoTreeView with id treeview, you should initialize them using:
var treeview = $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: data
}).data("kendoTreeView");
var kwin = $("#win").kendoWindow({
visible : true,
modal : true,
resizable: false
}).data("kendoWindow");
And no matter if the DataSource for the tree is local (array) or remote. Since you are not going to be destroying the window, just opening and closing, the data is always there.
Running example here
I have advanced search button outside the jqGrid. I am using:
var pSearch = //How do I get this object as mine is constructed in c# code. How do I get it from jqGrid's property collection or options??
$("#list").jqGrid("searchGrid",pSearch);
The typical usage of searchGrid would be
$("#list").jqGrid("searchGrid");
or
$("#list").jqGrid("searchGrid", {multipleSearch: true});
because all really important options on the Advanced Searching dialog are inside of colModel.
I personally prefer the first form and set just common settings by $.jgrid.search for the searching in some JavaScript file which I include on every page of the project. For example
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
overlay: 0
});