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
close icon

Can't copy selected rows on treegrid

Hi,
I want to copy selected rows on treegrid 
Regards,
M.Salah

3 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team December 23, 2016 11:13 AM UTC

Hi Salah, 
Thanks for contacting Syncfusion support. 
We can get the selected row details in the RowSelected event arugments. Please find the following code example for details. 
@(Html.EJ().TreeGrid("TreeGridContainer") 
//… 
.ClientSideEvents(co => { co.RowSelected("rowSelected"); }) 
) 
<script type="text/javascript"> 
        function rowSelected(args) { 
            //you can get the selected row data here. 
            var selectedItem = args.data.item; 
        } 
    </script> 
You can also use Row Drag And Drop feature to change the position of rows in TreeGrid. Please find the below code example to enable row drag and drop. 
@(Html.EJ().TreeGrid("TreeGridContainer") 
//… 
.AllowDragAndDrop(true)) 
Can you please share us more details about your requirement to serve you better? Please share us the purpose of copying particular row in TreeGrid. 
Regards, 
Mahalakshmi K. 



MS Mohamed Salah December 23, 2016 06:09 PM UTC

I want to copy selected rows to excel file


JS Jonesherine Stephen Syncfusion Team December 27, 2016 05:28 PM UTC

Hi Salah, 
Please find the response below 
1. We have rendered the Tree Grid with check box. 
2. On button click action we have converted the selected records to paste-able format in excel and copied this text in clipboard. 
3. Now we can paste the copied records in a excel file.  
Please find the code example below: 
<button onclick="clickme()">Click</button> 
    <textarea id="txtarea1" style="display:none;"></textarea> 
<script> 
function clickme() { 
            copyTextArea(); 
        } 
        //copy text to clipboard 
        function copyTextArea() { 
        if (document.queryCommandSupported && document.queryCommandSupported("copy")) { 
                //To get the checked records 
var txt = selectedItemText($("#TreeGridContainer").ejTreeGrid("model.selectedItems")); 
                $("#txtarea1").val(txt).css("display", "block").select(); 
                try { 
                    return document.execCommand("copy"); 
                } catch (ex) { 
                    console.warn("Copy process failed.", ex); 
                    return false; 
                } finally { 
                    $("#txtarea1").css("display", "none"); 
                } 
            } 
        } 
        //Genarate text to be copied in clipboard 
        function selectedItemText(records) { 
            var completeText = "", 
                columns = $("#TreeGridContainer").ejTreeGrid("instance").model.columns; 
            for (var count = 0; count < records.length; count++) { 
                for (var columnCount = 0; columnCount < columns.length; columnCount++) { 
                    if (columns[columnCount]["visible"]) { 
           if (!ej.isNullOrUndefined(records[count][columns[columnCount]["field"]])) 
                 completeText += (records[count][columns[columnCount]["field"]]); 
                        if (columnCount != columns.length - 1) 
                            completeText += " \t"; 
                    } 
                } 
                completeText += ""; 
            } 
            return completeText; 
        } 
</script> 
We have also prepared the sample based on this, please find the sample from below location. 
Regards, 
Jone sherine P S 


Loader.
Live Chat Icon For mobile
Up arrow icon