I have hierarchical data for the tree and I want to show only part of the leaves and later to add more leaves to the tree when a button is clicked for example.
One solution I thought of is to remove all unnecessary items from the data and to add items to the data when I want to add them to the tree view.
I wonder whether there is another solution without adding/removing items from/to the data?
You can filter the data source or hide some of the .k-item elements with jQuery.
Related
How can we use expandRow for expanding a particular row in angular ui grid tree view. Can I get an example of this?
Use the following link for tree expansion and addition of nodes.You can add a ng-click controller to this functionality which will make this tree visible(hide it initially with ng-hide).
https://angular-ui-tree.github.io/angular-ui-tree/#/basic-example
I'm currently facing a situation where I need to destroy a jqGrid that holds a large number of rows before creating a new set of DOM elements. I've tried using jqGrid's GridDestroy method, but it is still leaving a large number of detached DOM nodes so I thought I might be doing it incorrectly.
Here is my current process that is still leaving detached DOM nodes:
$(deleteButton).click(function () {
$('#grid').jqGrid("clearGridData");
$('#grid').jqGrid('GridDestroy');
$('#grid').remove();
$('#gridContainer').empty();
});
I felt like this process was overkill, but it is still resulting in detached DOM nodes. I've set up an example in jsFiddle (http://jsfiddle.net/8DYD8/1/).
Steps to reproduce:
Click the create button to create the jqGrid
Click the delete button
Take a heap snapshot using Chrome's debugger->Profiles tab, and you should see numerous detached DOM nodes in the snapshot
According to jqgrid expert #oleg:
The method GridDestroy works like jQuery.remove. It deletes all
elements which belong to the grid inclusve the element.
The method GridUnload on the other hand delete all, but the empty
element stay on the page. So you are able to create new grid
on the same place.
According to the jqGrid wiki:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
GridDestroy is what you need:
Destroys the entry grid with id= grid_id from the DOM (clears all the
html associated with the grid and unbinds all events)
I Have a TreeGrid with multiple levels I want to add Header for each level (i.e similar to that of subgrid, but i dont want to use it as the columns of subgrid doesnt align with the outer grid).
I would like to drive Porsche for free and that somebody should pay for the fuel additionally. :-) I think it's better that you use existing features of existing product if you want to use free products.
TreeGrid if jqGrid is the kind of grid. If the user collapse node the corresponding rows will be just made hidden. So the grid has column headers and no additional header can be created for tree node.
On the other side Subgrid, especially grid as subgrid, is more flexible. If you create subgrid inside of subGridRowExpanded callback you are free to set alignment, width or just everything from the child grid. You can even place any custom HTML an place of subgrid (see the demo from the answer). In the answer you will find an example how one can adjust width of subgrid if the column of main grid are resized.
So I think that you have to use grid as subgrid to implement your requirements. In any ways you should to write some additional code which implements your exact requirements.
The base problem is I have a TreeGrid that I has a significant number of nodes (over 6k) and I want to be able to load a branch when the user expands a node rather than loading all at once.
I know this is possible in jqGrid (the documentation indicates so just very poorly worded http://www.trirand.com/jqgridwiki/doku.php?id=wiki:adjacency_model ) but what I can't figure out is the precise set of jqGrid settings I need to make it do that.
I do have a functional TreeGrid that will load all records from the 'url' parameter, so the only trick I need is for it to only load the top node alone, and then load it's children when I click the ExpandRow.
Figured it out myself:
The first key is setting loaded=false in the child nodes I don't want loaded. Then I need to respond the request jqGrid sends on unloaded nodes with the right nodes.
I have a tree representation of pages in a CMS application. I understand how to persist the tree in the database. However, I don't have a good way to:
A) Reorder subpages under a particular parent page.
B) Provide a UI implementation that allows the user to change the order.
Any suggestions?
Changing the order itself will require you store some sort of ordering along with each page in the database. Just the current highest / lowest value +/- 1 would probably be a fine starting point. Once you've got that ordering in there, reordering becomes a case of swapping two values or changing the value for one page to be between two others (you could use floats I guess, but you may need to renumber if you split it too many times).
Anyway, once you've got that, you need a UI. I've seen a very simple 'swap this with the one above/below' approach which can be a simple web link or an AJAX call. You could also present all the page values to the user and ask them to renumber them as they see fit. If you want to get fancy, JavaScript drag and drop might be a good approach. I've used ExtJS and Mootools as frameworks in this kind of area. If you don't need all the Extjs widgets, I'd say well away from it in future, and look at something like the Mootools Dynamic Sortables demo.
A) I have a similar CMS app and I store an ordinal value with the page for a particular tree and sort on this value -- because lots of my pages appear in completely different sites I have to maintain the ordinal number against a page / tree combination.
B) I too would like a better way to do this. Currently they click on the node in the treeview and in the main page screen they can move the page around. I've tried drag and drop with java script and other solutions but my users could never work with it without lots of hand holding. I'll be interested in the responses to this one.