How I can render A Treegrid in a modal? and How can I get selectedRows with SelectionType="Checkbox"?

[César Alejandro Guerrero Nava]

Hi everyone, I have two questions about the Treegrid:

1.- Render in a modal

If I put the control in a web page, I don´t have problem with the Render, but when I work in a modal (dialog), the control don´t render.

I noticed when inspect element or resize the browser, the treeGrid render normally...but before you can see a vertical gray line (I suppose is the control) and when I do the action above, disapear and the TreeGrid works fine.

How I can render the TreeGrid in a modal? Initially, the modal is hide and when I press a button becomes visible.

I try a solution given to another user, but it didn´t work for me. There is the jquery function (I am Working with JS Essentials 1 ASP.Net Webforms):

function treeGrid1() {

                var treeGridObj = $("#GridSync2").data("ejTreeGrid"),

                    size = { height: "350px", width: "100%", };

                treeGridObj.setModel({ "sizeSettings": size });                

            }

2.- get selectedRows with SelectionType="Checkbox"

I using a TreeGrid with diferent levels. The idea is click in a button, a with a function extract the values of the selected rows (checked boxes).

But in spite of searching in the documentation and in the forum, I don´t find a function that pull all the rows, only the highlited row (with css class to generate a blue shade).

Is There a form to get the values of the rows selected in the TreeGrid? 

Sorry for the extension of the questions, I would very grateful if you answer my question.

Thank you so much, have a nice weekend.

Best regards César Guerrero

[John Rajaram]

Hi Ceaser, 

Thank you for contacting Syncfusion support. 

Please find the below details. 

Query1: If I put the control in a web page, I don´t have problem with the Render, but when I work in a modal (dialog), the control don´t render. 

Answer: As per your requirement we have rendered the TreeGrid control inside Dialog and the Dialog will be opened once the user clicked on the button. We have prepared the sample for your reference and you can find the sample from the bottom location. 

 

Query2: get selectedRows with SelectionType="Checkbox" 

Answer: In TreeGrid we can get the selected records by using getSelectedRecords public method. Please refer the below code snippet. 

<input type="button" id="getSelectedItem" value="GetSelected Item" /> 

 

<ej:TreeGrid runat="server" ID="container" SelectionType="Checkbox"  

       //.. 

          > 

     </ej:TreeGrid> 

 

<script type="text/javascript"> 

    $("#getSelectedItem").click(function () { 

                  var treeGridObj = $("#basicDialog_container").data("ejTreeGrid"); 

                   var selectedRecords=treeGridObj.getSelectedRecords(); 

                   alert("Selected Record TaskName ="+ selectedRecords[0].Name) 

 

               }) 

</script> 

 

We have prepared the sample with the above requirements, please find the sample from below link 

Link: http://www.syncfusion.com/downloads/support/forum/139736/ze/TreeGridSample-1873321525 

Please let us know if you require further assistance on this. 

Regards, 

John R 

[César Alejandro Guerrero Nava]

Thank you so much, I solved the problem.

[John Rajaram]

Hi Cesar, 

Thank you for the update. Please let us know if you need further assistance on this. 

Regards, 

John R