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

Tree Grid, Need a button on every row, to view the record i.e to navigate to another page.


Hey, 


Actually, trying out to add a column called view which contains a View-Button or View-Link for each row. Where clicking on this, need to navigate to another page with the clicked row id. 

Please help me to implement this. 


Thanks 
Bharat Jain  

1 Reply

MK Mahalakshmi Karthikeyan Syncfusion Team March 10, 2016 06:55 AM UTC

Hi Bharat,

Thanks for contacting Syncfusion support.

We can get the view-Button in all the Rows of the TreeGrid control with the help of Column Template. Please refer the below code example for details.

<body>

   <script type="text/x-jsrender" id="ImageColumnScript">

       <button class="imageButton">Get Row Id</button>

   </script>

<ej:TreeGrid ID="Treegrid" runat="server"  //… >

<Columns>

        <ej:TreeGridColumn HeaderText="View" Field="View" IsTemplateColumn="true"        

        TemplateID="ImageColumnScript"/>

</Columns>

//…

</ej:TreeGrid>

<script>

    function Redirect() {

        window.location = "Home.aspx";

    }

    $("#Treegrid").on("click", ".imageButton", function (e) {

        var $tr = $(e.target).closest('tr'),

            treeObj = $("#Treegrid").data("ejTreeGrid"),

            rowIndex = ($tr).index(),

            record = treeObj.model.currentViewData && treeObj.model.currentViewData[rowIndex],

            id = record.Id;

        $.ajax({

            type: 'POST',

            url: 'TreeGridDefault.aspx/RowID',

            data: JSON.stringify({ "id": id }),

            contentType: 'application/json; charset=utf-8',

            dataType: 'json',

            success: function (data) {

                window.location = "Home.aspx";

            }

        });

    });

</script>


[WebMethod]

        public static void RowID(int id)

        {

            TreeGridDefault sam = new TreeGridDefault();

            sam.serverMethod(id);                        

        }

        public void serverMethod(int id)

        {

            Session["id"] = id;          

        }

Here we have maintained clicked row id in the session variable called “id” then we have redirected another page and there we have got the clicked id from the session and alerted the retrieved value in the message box.

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

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/PageNavigate-2059951840

Note: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.Web dlls to render the TreeGrid control which is available in Essential studio installed location    

Regards,

Mahalakshmi K.


Loader.
Live Chat Icon For mobile
Up arrow icon