We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

1 Reply

MK Mahalakshmi Karthikeyan Syncfusion Team January 6, 2017 12:12 PM UTC

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 
Regards, 
Mahalakshmi K. 


Loader.
Up arrow icon