Issues with the number of displayed rows in a treegrid and using the context menu on multiple selected rows

[Jay Faulkner]

Hello,

I have a treegrid with the context menu and multiple row selection enabled.  I want to perform some action on the selected rows using the context menu, but as soon as I right-click on one of the selected rows, it becomes the only selection once the context menu comes up.  Is this is not supported?  I assume I will need to use checkboxes?

Also, the treegrid only ever shows about 13 rows and has a vertical scrollbar, even though there is plenty of space on the webpage to display all rows without the need for the scrollbar.  Is there a way to set the number of displayed rows or the height of the treegrid?  I've tried various css options without success.

Thanks.

J

[Mahalakshmi Karthikeyan]

Hi Jay, 

Thanks for contacting Syncfusion support. 

Please find the responses below, 

Query1: I have a treegrid with the context menu and multiple row selection enabled.  I want to perform some action on the selected rows using the context menu, but as soon as I right-click on one of the selected rows, it becomes the only selection once the context menu comes up.  Is this is not supported?  I assume I will need to use checkboxes? 

Solution: Currently we can able to select multiple rows and perform delete using toolbar. At present there is no support to do all the context menu actions for selected multiple rows. But we can achieve this by using the checkbox selection feature in TreeGrid. Please find the below code example for details. 

$("#TreeGridContainer").ejTreeGrid({ 

            selectionSettings: { 

                selectionType: ej.TreeGrid.SelectionType.Checkbox, 

                selectionMode: ej.TreeGrid.SelectionMode.Row, 

                enableSelectAll: true, 

                enableHierarchySelection: true 

            }, 

             

            contextMenuSettings: { 

                showContextMenu: true 

            }, 

            

            contextMenuOpen: function (args) { 

                args.contextMenuItems.push({ 

                    headerText: "Selected Rows", 

                    menuId: "selectedrows", 

                    eventHandler: function (args) { 

                        alert("Number of rows selected " + args.model.selectedItems.length) 

                    } 

                }) 

            }, 

        }) 

Here we have enabled the context menu and added one custom context menu to perform action on selected rows. 

Query2: Also, the treegrid only ever shows about 13 rows and has a vertical scrollbar, even though there is plenty of space on the webpage to display all rows without the need for the scrollbar.  Is there a way to set the number of displayed rows or the height of the treegrid?  I've tried various css options without success. 

Solution: if we haven`t assigned any value to TreeGrid, by default height was set to 450px. We can also set the number of rows height into TreeGrid height with the help of ‘sizeSettings’ property using ‘create’ client side event. Please find the following code example for details. 

<script type="text/javascript"> 

$("#TreeGridContainer").ejTreeGrid({ 

      create: create, 

      collapsed: collapsed, 

      expanded: expanded, 

      rowSelected: rowSelected, 

      actionComplete: actionComplete 

      //… 

}) 

function create(args) { 

            //To update the height of TreeGrid during load time  

            updateTreeHeight(); 

        } 

        function collapsed(args) { 

            //To update the height of TreeGrid during collapse action  

            updateTreeHeight(); 

        } 

        function expanded(args) { 

            //To update the height of TreeGrid during expand action  

            updateTreeHeight(); 

        } 

        function rowSelected(args) { 

            //To update the height of TreeGrid while adding any row   

            updateTreeHeight(); 

        } 

        function actionComplete(args) { 

            //To update the height of TreeGrid while saving the newly added row and deleting the existing row  

            if (args.requestType == "addNewRow" || args.requestType == "delete") { 

                updateTreeHeight(); 

            } 

        } 

        function updateTreeHeight() { 

            var tree = $("#TreeGridContainer").ejTreeGrid("instance"), 

            toolbar = $("#TreeGridContainer_toolbarItems").height(), 

            model = tree.model, 

            totalLen = tree.getExpandedRecords(model.updatedRecords); 

            //To calculate the height of TreeGrid as per records count  

            var height = model.rowHeight * totalLen.length + tree.getHeaderContent().height() + toolbar + 4; 

            //Update height using setModel  

            var sizesettings = { height: height.toString() }; 

            tree.setModel({ "sizeSettings": sizesettings }); 

        } 

    </script> 

We have also prepared a sample based on this and you can find the sample under the following location 

Sample: http://jsplayground.syncfusion.com/Sync_rxudqptg 

Regards, 

Mahalakshmi K.