Kendo treelist in angular js lost row color after expand and collapse operation.
Please check attached link for more details.
http://dojo.telerik.com/enEqE
Got the answer from telerik itself. Its required to add the code on expand event and also required to wrap it inside the settimeout function.
Here is the updated dojo.
http://dojo.telerik.com/UTocid
Related
I'm trying to use a kendo.data.ObservableArray as data for data source of the grid. It shows ok. When edit inline, change a field, then cancel, the values are changed. When clicking edit, then click edit on another row, the last one remains in the edit mode. Sometimes cancel not work. On the array it works as expected.
I took the Kendo UI Demo, http://demos.telerik.com/kendo-ui/grid/editing-inline, to reproduce the issue. Here is the issue: http://dojo.telerik.com/uLiCi/2
Does anyone have any idea why so strange behavior?
In my opinion, it should work with both, array and observable array.
Thanks in advance
I am using Kendo UI Grid master detail template like in this docs http://demos.telerik.com/kendo-ui/grid/angular , I am able to get the template by clicking in the hierarchy cell, I want to know if there is some easy way to expand the detail template by clicking anywhere on row.
Thanks!
To do that you can follow these steps:
Add k-on-change="handleChange(kendoEvent)" to trigger the function when we select any row,
dont forget to add k-rebind="gridOptions.selectable",
and i also prefer <div kendo-grid="grid"></div> so later on we can
select the grid instance
create $scope.handleChange = function(kendoEvent){....}to handle the event
and finally here is a kendo dojo example from yours that i've modified
EDIT:
As per your comment, you simply close all expanded row first then you can open the one which is selected. Add this $scope.grid.collapseRow($scope.grid.tbody.find("tr.k-master-row")); before $scope.grid.expandRow($scope.grid.tbody.find("tr.k-master-row.k-state-selected"));. Updated dojo
Firstly, I am doing a research on KendoUI, and my experience is mainly on struts-layout taglib.
And now I got issues on HTML Form while using KendoUI.
My Questions are as below:
Can Kendo ListView be used to replace the html form? That is, there is no Form any more, but a kendo ListView.
If still use html form, how to make each field editable in line (is there any kendo widget to do same behavior as JQuery UI plugin X-editable)?
The closest thing would probably be a Grid that is editable. Clicking on a cell puts it in edit mode: http://demos.telerik.com/kendo-ui/grid/editing
But you could also make a custom Kendo UI widget that behaves basically the same as x-editable by having a clickable element that opens a Kendo Tooltip box with an input element in it.
I have a grid view, when i change some nodes or label or parameter it should be reflected in chart. How to make this possible in Kendo UI using mvvm ?
This should be done automatically if you are using a Shared dataSource like shown here.
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.