Questions on Kendo UI for jQuery Forum

1 answer

326 views

Persist sortable element in dragging source

I have two sortable divs, configured to allow me to drag element from div A to div B. Working great. The only thing is, my element disappears from div A when I drag it to div B. How can I prevent the element from being removed from div A?

Thanks in advance!

For reference, below is my code instantiating the sortables:

$("#leftSide").kendoSortable({

cursor: "move",

connectWith: "#rightSide",

placeholder: placeholder,

hint: hint

});

$("#rightSide").kendoSortable({

cursor: "move",

placeholder: placeholder,

hint: hint,

start: function (e) {

if (isResizing) {

e.preventDefault();

}

},

change: function (element, ui) {

element.item.height(90);

var myWidth = element.item.width();

element.item.width(myWidth - 10);

}

});

Sortable

answered on 15 Dec 2016

4 answers

1.0K+ views

How to expand and select to a specific item after read

I have a Kendo TreeView where I need to programmatically reload the items via dataSource.read(), then after that, automatically expand down to and select the item that was selected before the read(). I have tried everything I can find via Google, and I just can't seem to make it work (neither the expand nor the select works).

Here's what I have so far:

var componentTreeView = $("#componentTreeView").data("kendoTreeView");

var selectedNodeElement = componentTreeView.select();

var selectedNode = componentTreeView.dataItem(selectedNodeElement);

var id = selectedNode.id;

componentTreeView.dataSource.read();

// get DataSourceItem by given id

var nodeDataItem = componentTreeView.dataSource.get(id);

//get node within treeview widget by uid

var node = componentTreeView.findByUid(nodeDataItem.uid);

var dataItem = componentTreeView.dataItem(node);

componentTreeView.expandTo(dataItem);

componentTreeView.select(dataItem);

I have tried every combination I can think of of using the nodeDataItem, the node, and hte dataItem (I think nodeDataItem and dataItem are the same thing, right? But I got the code from several different examples and was just trying to be thorough).

Also, I have a feeling I need to use expandPath(), but literally every example code I could find for expandPath just provides a hard-coded list of ids (like "[1, 4, 5]" which is completely useless to me. How do I get the ids for each parent I need, in order to use expandPath? Or is that even what I need to do?

I also saw one example that did the following:

var item = $("#componentTreeView").find("li[data-id='" + id + "']").find(".k-in");

// expand all parent nodes

$(item).parentsUntil('.k-treeview').filter('.k-item').each(

function (index, element) {

$("#componentTreeView").data('kendoTreeView').expand($(this));

}

);

But this did not work either.

TreeView

answered on 15 Dec 2016

2 answers

152 views

"Live-Ticker" chart showing last(est) values

Hi,

I am trying a very basic thing but cannot find the right option. I would like to have something like a "live-ticker" chart which shows the last(est) x values (just numbers). When I use a DataSource with my sparkline chart I can add records and togehter with categoryAxis.min=0 and categoryAxis.max=16 I get the first 16 values display but not the last 16 values. How can I achieve this?

There is a DataSource.remove but it requires to give a certain object. Is there an index-based remover? Is there a better approach?

Also to make it more advanced I would like not to hardcode the maximum number of values displayed but have it depend on the available space (if the chart is big enough for 100 values, lets show 100 - if smaller then fewer). I know if I make the chart bigger on-the-fly that additional values might not be there yet but that would be okay - the graph can fill with time.

This is like show a value every second.

Best regards,
Ricky

Charts

answered on 15 Dec 2016

6 answers

362 views

TreeViewItemModel attributes not rendering

I am creating a IEnumerable of TreeViewItemModel on the server side and passing it to the treeview.

@(Html.Kendo().TreeView()
.Name("treeview")
.DragAndDrop(true)
.BindTo(Model.TreeViewItems)
.Events(events => events
.Drop("onDrop")
)
)

I have added custom attributes to the items but they not rendered.

item.HtmlAttributes.Add(new KeyValuePair<string,string>("data_owner", resource.OwnerId.ToString()));

What am I doing wrong?

It would also be nice if all attributes including ID did not disappear following drag and drop!

TreeView

answered on 15 Dec 2016

12 answers

1.3K+ views

Problem with Excel export after restoring grid state

Hello!

I am using a Kendo ToolBar widget as the toolbar for a Kendo Grid with a custom button to export the grid data as a MS Excel file. The custom button uses the CSS class "k-grid-excel" in order to implement the Excel functionality automatically.

The documentation (http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export) says that "The Grid uses the current column order, visibility, and dimensions to generate the Excel file.", which works as expected as long as I do not use grid persist state functionality.

However, when I preserve the grid state, then restore it, then click on the export button, the generated Excel file does not use the current column order and visibility. I wanted to reproduce the problem in your online example (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/preserve-grid-state-in-a-cookie), but unfortunately the preview and the Dojo do not work as expected, although your other online examples work.

I have found out that export after restoring the grid state works as expected (column order and visibility) if I use the saveAsExcel() method instead of having a button with the "k-grid-excel" CSS class. Do you have any idea, why these two are behaving differently?

I also want to remark that I detach the toolbar DOM, restore the grid state, and then insert the toolbar DOM back to the grid. I am also using the MVC Wrappers, but I think the problem applies to Kendo UI Grid in general.

Best regards,

Kaan

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/preserve-grid-state-in-a-cookie

Grid

answered on 15 Dec 2016

1 answer

664 views

Kendo Grid find out the drop row's uid

Hello,

I have a quite complex drag&drop scenario:

2 grids with different column structure

multiselect

move rows between the grids

move rows inside the same grid (reordering)

dropping rows on an empty grid

dropping rows to be inserted after the position of the row where the drop happened

After some testing I found a solution which works quite good. But strangely just when I load the test application from a local test web server.
If I install the application on a remote Web Server the identification of the grid row where the drop occured fails. I stripped down everything
which does not belong to that problem (for example angularjs to have the same behaviour jQuery based). Here is the reduced code. To even
exclude the possibility that it could have to do something with my eval version of kendo I used the libraries from CDN.

Are the 2 methods which I use to get the uid of the drop row at all recommended?
Is there a reliable way to get the uid of the drop row?
I assume some type of run time problem here but the behaviour is stable (local server works always, remote server never).

Can be tested here: http://medialan.de:9800/dragdroptest.html

On dojo the code is working!

<!DOCTYPE html>
<html>
<head>
<link href="../kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../kendo/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="../kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="../kendo/styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

<script src="../kendo/js/jquery.min.js"></script>
<script src="../kendo/js/kendo.all.min.js"></script>

<script>
$(function() {
var d = [
{ v : "a" },
{ v : "b" },
{ v : "c" }];

var grid = $('#grid').kendoGrid({
dataSource: new kendo.data.DataSource({ data: d }),
selectable : "row",
columns: [ { field: "v" } ]
}).data('kendoGrid');

grid.table.kendoDropTarget({
drop: function(e) {
e.draggable.hint.hide();

// dropuid is undefined, when providing the test from a remote server
// - e.target is div.k-grid.k-widget when using remote server
// - e.target is td when using a local server

var dropuid = $($(e.target).parent()).data("uid");
console.log('dropuid is: ' + dropuid);
dropuid = grid.dataItem(e.target.closest("tr")).uid;
console.log('dropuid is: ' + dropuid);
}
});

grid.table.kendoDraggable({
filter: "tbody > tr",
cursorOffset : { top: 1, left: 1},
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
});
</script>
</head>

<body>
<div id="grid"></div>
</body>
</html>

Drag and Drop

answered on 15 Dec 2016

4 answers

9.1K+ views

Get column values for rows selected in grid

Suppose I have know the rows selected in a grid
grid = $('#myTable').data('kendoGrid');
rows = grid.select();

and I know that I want the values from field 'abc'.

Without any apriori knowledge of the model how would I do something per this pseudo code:

for (row in rows) {
i++;
abcs[i] = row.valueof (field-abc)
}

The abcs would be used later as data of a transport.

Data Source

answered on 15 Dec 2016

1 answer

448 views

[Solved] Creating a wrapper for DatePicker default functionality

01.(function() {

02.

03.jQuery(document).ready(function() {

04. jQuery('#datepicker1').myKendoDatepicker({

05. disabled: [new Date('12/25/2016').getTime(), 0, 6]

06. });

07.});

08.

09.jQuery.fn.myKendoDatepicker = function(options) {

10. jQuery(this).each(function() {

11. var dp = MyKendoDatepicker().init(this, options);

12. });

13. return this;

14.};

15.

16.var MyKendoDatepicker = function(el) {

17. return {

18. defaults: {

19. disableDates: function(date) {

20. console.log(this);

21. return date && (this.disabled.indexOf(date.getTime()) !== -1 || this.disabled.indexOf(date.getDay()) !== -1);

22. },

23. },

24.

25. init: function(el, options) {

26. this.opts = jQuery.extend(true, this.defaults, options);

27. return jQuery(el).kendoDatePicker(this.opts);

28. },

29.

30. };

31.};

32.

33.})();

I'm trying to create a wrapper that will allow us to set up default functionality for our datepicker. The previous code is just a simple starting point to illustrate my problem--I will be implementing more than just disabled dates. Unfortunately, I am not able to get a hold of my wrapper or even the actual input element once inside your "Datepicker" or "Calendar" objects (line 20). Any suggestions on how to accomplish my requirements? Am I missing something that would let me pass this object or grab the input the datepicker is acting upon (where I could place a reference to my object)?

thanks for you help.

david

DatePicker

answered on 15 Dec 2016

3 answers

167 views

Multiple files uploaded = quadruple backslashes

If I select one file and upload it to .NET as List<HttpPostedFileBase>, the file HttpPostedFIleBase.FileName property, which includes the file's complete path, has what I would expect for escaped strings - double backslashes, for example C:\\FirstDir\\Foo.txt

But if I select multiple files and upload them, the files have double double (quadruple) backslashes: C:\\\\FirstDir\\\\Foo.txt.

Is this known? Can anyone confirm? From what I can tell the full paths are coming from .NET, not JavaScript or Kendo, but I want to be sure.

Thanks.

Upload