I would like to have a button on each row that navigates to a different page with the Id col from the row

[John]

I would like a column with a View button on it added to my grid that navigates to an action passing the Id column from the row that is clicked so if I click a row on my grid below I would like to navigate to /tempalte/details/5 for example(I don't want to use an template etc. as this other page has a lot more features on it) 

I've tried a few different things like using a Template on the column or creating an navigationURL/using the toolbar and using a template but I can't get this to work this is my grid, how can I set the id thanks. I'add added what I've tried below. Many Thanks 

    <div class="row">

        <div class="col-12">

            <ejs-grid id="Grid" [email protected] allowPaging="true" allowSorting="true" allowSelection="true" toolbarClick="toolbarClick" toolbar="toolbarItems">

                <e-grid-columns>

                    <e-grid-column field="Id" headerText="ID" isPrimaryKey="true" textAlign="Right" width="40"></e-grid-column>

                    <e-grid-column field="Name" headerText="Name" validationRules="@(new { required=true, minLength=3})" type="string" width="120"></e-grid-column>

                    <e-grid-column field="Description" headerText="Description" textAlign="Left" editType="string" width="200"></e-grid-column>

                    <e-grid-column field="CreatedAt" headerText="Created" width="100" format="MMM d yy"></e-grid-column>

                    <e-grid-column field="UpdatedAt" headerText="Updated" width="100" format="MMM d yy"></e-grid-column>

                    <e-grid-column field="UpdatedBy" headerText="Updated By" width="150"></e-grid-column>

                    <e-grid-column field="navigateUrl" headerText="Edit" template="#template" width="150"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

        </div>

    </div>

    <script id="template" type="text/x-template">

        <button class="btn btn-info" onclick="detailsClick()">Details</button>

    </script>

    <script>

        function detailsClick() {

            var url = '@Url.Action("Details", "Template", new { id = ??? })';

            window.location.rel='nofollow' href = url;

        }

    </script>

[Aishwarya Rameshbabu]

Hi John,

Greetings from Syncfusion support.

Upon evaluating your query, we have observed that you require a button to be displayed on each row of the Syncfusion Grid. Clicking this button should redirect to different pages, depending on the ID value of the respective row. We have updated the shared code example to achieve this. In this, the ID value is passed to the action URL by retrieving the row data from the row object of the template. For further details, please refer to the code example and the documentation link provided below.

Code Example:

    <div class="control-section">

        <ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" allowSelection="true" allowSorting="true" toolbarClick="toolbarClick" toolbar=toolbarItems >

            <e-grid-columns>

                 ………………………………

                 ………………………………

                <e-grid-column headerText="Edit" template="#template" width="150"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

    </div>

 

<script id="template" type="text/x-template">

        <button class="btn btn-info" onclick="detailsClick(this)">Details</button>

</script>

<script>

    function detailsClick(e) {

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

        var rowObj = grid.getRowObjectFromUID(ej.base.closest(e, '.e-row').getAttribute('data-uid'));

        console.log(rowObj);

        var url = '@Url.Action("Details", "Template")' + '/' + rowObj.data.Id;

        window.location.rel='nofollow' href = url;

    }

</script>

 

This requirement can also be fulfilled by utilizing custom command column buttons, which allow you to access the rowData within the commandClick event of the Grid. For more detailed information, please refer to the documentation link below.

Documentation Links:

• How-to-get-the-row-object-by-clicking-on-the-template-element
• Custom-command-column

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[John]

Thanks for your help Aishwarya!

[Aishwarya Rameshbabu]

Hi John,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R