PDA

View Full Version : Tree Grid using Checkbox Model



gul.suhanda
30 Mar 2015, 6:03 AM
Hello,

I have a tree grid implementation and i have used the Checkbox Model.

Now i have a checkbox on the top of the grid which has a select and deselect all functionality. But i need to implement a functionality where is a parent node is selected in tree grid, the child nodes are also selected.

Any help or reference is appreciated.

Regards
Gul Suhanda

tristan.lee
14 Apr 2015, 2:18 PM
Gul,

If you're using the CheckboxModel, you can use the select (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.selection.RowModel-event-select) and deselect (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.selection.RowModel-event-deselect) events to handle that functionality. You can then cascade from the checked node to the child nodes to (de)select all children.

l8q

Here's additional reference to the Ext.data.NodeInterface (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.NodeInterface-method-cascadeBy).

Hope this helps,
Tristan

gul.suhanda
15 Apr 2015, 5:57 AM
Thanks for replying.

With the implementation you have provided, I am facing a new issue

1. The header checkbox functionality is working partially. It works on checkall but does not display the check icon. The deselect all functionality does not work.
2. Also when we expand the tree more than once i.e open, close and then open, the selection of the child nodes goes away.

Any idea how i can resolve the issues.

Regards,
Gul

tristan.lee
15 Apr 2015, 12:13 PM
Gul,

Unfortunately, I don't believe the CheckboxModel will work in this case with your desired behavior. It's something I can mention to our engineering team to see about getting it added for future releases.

Using this TreePanel over the previous TreeGrid example, the checkboxes are inline with the items. This doesn't use the CheckboxModel as a selection model which means there's no inherent "toggle all" functionality. In the example below, I've added similar functionality by implementing a "toggle all" option in the toolbar. With this, you won't have the functionality of the "toggle all" button being unchecked if one of the tree items is unchecked, but that could be implemented within the checkchange event itself to toggle as desired.

lan

Hope this helps,
Tristan

gul.suhanda
16 Apr 2015, 12:48 AM
Thanks for the quick reply but we were using the checkbox model as we wanted to have a checkbox in the header of the grid.

We are using a Treepanel. Can you suggest us some alternate solution?

Also, Do i need to raise it as a bug on the Sencha Forum or you would take care of the same?

Any idea if we have any fix coming up and when? We are using Sencha 4.2.1 for preparing our mockups and we would be using Sencha 5.0.2.270

Please let us know regarding the same.

Regards,
Gul

tristan.lee
16 Apr 2015, 12:33 PM
Hi,

It does not appear that the checkbox selection model was meant to be supported in trees for the functionality you're expecting. Unfortunately as it stands, you will have to implement your own solution. I will forward this over to our engineering team as a feature request for future consideration.

Thanks,
Tristan

gul.suhanda
16 Apr 2015, 10:15 PM
Thanks for your reply.

I do understand that the checkbox model might not be developed for a tree panel but still it has a bug when we override the select and the deselect method. It is not allowing users to use the select all box in the header. I have replicated that issue in your solution initially provided.

To replicate, click on a checkbox in the list which has children elements once or twice and then try clicking the checkbox on the header. The header checkbox would not work.

If possible, please have a look into this issue, the other implementations of the tree we can take care of the same. Ideally if you make this work for tree in your future solutions, please check if you can add below functionalities
1. When all child nodes are selected, parent node is automatically selected.
2. Similarly if all tree nodes are selected, then the header node gets selected.

I really appreciate your help and quick responses on this problem. Thanks

Thanks & Regards,
Gul Suhanda

tristan.lee
17 Apr 2015, 12:51 PM
Gul,

I was able to reproduce the issue you noted. However, this is still linked to the lack of support between the TreePanel and CheckboxModel being used in this grid. Whatever actions being performed on the collapse/expand of the tree nodes appears to not be entirely synced up with the CheckboxModel. I will have to defer to our engineering team for that.

As for the feature request, I have noted the requested functionality you mentioned and provided that to our engineers.

Thanks,
Tristan

gul.suhanda
20 Apr 2015, 5:00 AM
Hi Tristan, Thanks for the reply and patiently replying back queries. If i do not use a checkbox model, can i put a checkbox in the header of the grid? If yes, can you please give me a reference of the same. Regards, Gul

tristan.lee
20 Apr 2015, 8:02 AM
Gul,

The previous fiddle I provided did just that. It did not use the checkbox model plus a toolbar added to the panel containing a checkbox for toggling items.

lan

Hope this helps,
Tristan

gul.suhanda
24 Apr 2015, 5:53 AM
Hi Tristan,

Thanks a lot for your response. I found 1 solution without using the checkbox model at https://fiddle.sencha.com/#fiddle/hfs

In the above case they have used a normal grid. I did modify the select all function to implement what was needed in case of a tree structure.

onSelectAll: function(store, column, checked) {
store.getRootNode().cascadeBy(function(child) {
if (checked) {
child.set('check', true);
} else {
child.set('check', false);
}
});
}

Now, i am facing another issue in the internal parent child nodes where on selection of parent nodes, i am not able to get child nodes reference. I am using the below code.

{
xtype: 'fiddlecheckcolumn',
dataIndex: 'check',
flex: 0.25,
listeners: {
checkchange: function(column, recordIndex, checked) {
console.log(column);
}
}

On clicking of checkbox in the grid i am getting the listener checkchange function working, but from there i am neither able to get the store or able to get node object to cascade child nodes.

Would you be able to provide me some reference? Thanks a lot.

Regards,
Gul

tristan.lee
24 Apr 2015, 10:47 AM
Can you provide what you had working, implementing that onSelectAll function above, in a fiddle so I can reproduce the issue?

gul.suhanda
27 Apr 2015, 3:56 AM
Hi Tristan,

I have created a fiddle for my implementation

https://fiddle.sencha.com/#fiddle/luf

1. Now, when we click on the record for Bart, the records for Homer and Marge should also be selected.

2. On clicking of checkbox in the grid i am getting the listener checkchange function working, but from there i am neither able to get the store or able to get node object to cascade child nodes.

3. You could see the checkchange function being activated since i have placed an alert there. I need your help on getting the functionality mentioned in point 1. If we have objects as specified in point 2, it would also help.

Please let me know.

Regards,
Gul

gul.suhanda
30 Apr 2015, 7:29 AM
Hi Tristan,

Please let us know if you got a chance to have a look at our issue and have some resolution for us.

Regards,
Gul Suhanda

tristan.lee
30 Apr 2015, 2:43 PM
Gul,

Take a look at this fiddle to see if it gets you what you're looking for. In the checkchange event, I reference the TreePanel and get the Store and the node at the specified recordIndex. I can then use that node and cascade the children and (un)check them as needed.

m5o

Hope this helps,
Tristan

albanirneves
22 Mar 2016, 11:24 AM
Gul,

Take a look at this fiddle to see if it gets you what you're looking for. In the checkchange event, I reference the TreePanel and get the Store and the node at the specified recordIndex. I can then use that node and cascade the children and (un)check them as needed.

m5o

Hope this helps,
Tristan

Hello Tristan, that was an amazing solution for me! Thanks