Use row index in a x-jsrender template

[Givitta Davide]

Hi,

how can i use the row index within a template?

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

    <div class="e-control e-lib e-dropdown-btn">

        <button type="button" class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            <i class="fad fa-cogs"></i>@GlobalLocalizer["Actions"]

        </button>

        <ul class="dropdown-menu" onchange="itemSelected">

            <li id="Edit" class="e-item" onclick="startEdit(${RowIndex})">

                <i class="fad fa-pencil"></i>@GlobalLocalizer["Edit"]

            </li>

            <li id="DuplicateRow" class="e-item">

                <i class="fad fa-clone"></i>@GlobalLocalizer["DuplicateRow"]

            </li>

            <li id="Delete" class="e-item" onclick="deleteRow()">

                <i class="fad fa-trash"></i>@GlobalLocalizer["Delete"]

            </li>

        </ul>

    </div>

</script>

[Mohammed Ansar Sathik Ali]

Hi Givitta ,

Greetings from the Syncfusion support.

Currently we are working your query and we will update further details on May 09 2022.

until then we appreciate your patience.

Regards,

Mohammed Ansar ,

[Mohammed Ansar Sathik Ali]

Hi Givitta,

Greetings from Syncfusion support.

 Query: Use row index in a x-jsrender template

Based on your query, you want row index value in the column template. Using the index property, we can obtain the row index value in the column template.

For your convenience, we have attached code sample for your reference.

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

        <span> ${index}-index </span>

   </script>

Please get back to us if you need further assistance on this.

Regards,

Mohammed Ansar ,

Attachment: index_37a7839e.zip

[Givitta Davide]

Hi Mohammed,

this solve my problem, thank you very much.

[sophia Abigail]

We can display the row index as a grid column using the column template ... index using JsRender syntax in Template property of the particular 192.168.l.254 column. ASPX: Does have any way to display the rowIndex to continually to the next page without ... columnTemplate

[Rajapandi Ravi]

Hi Sophia,

Thanks for the update.

From validating your query, we could see that you like to display the row index in a cell without using column template and while performing paging you like to display the continuity value in that cell based on that previous page value. Based on your query we have prepared a sample and achieve your requirement by using queryCellInfo event of grid. Please refer the below code example, sample and screenshot for more information.

 

<div class="control-section">

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" queryCellInfo="queryCellInfo" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" allowPaging="true">

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

        <e-grid-columns>

            .  .  .  .  .  .  .  .  .  .  .  .

            .  .  .  .  .  .  .  .  .  .  .  .

            <e-grid-column headerText="SerialNo" width="100"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

 

<script>

    function queryCellInfo(args) { //queryCellInfo event

        if (args.column.headerText === "SerialNo") {

            var grid = document.getElementById('Grid').ej2_instances[0];

            var page = grid.pageSettings.currentPage - 1;//here we have performed calculation based on the currentpage

            var totalPages = grid.pageSettings.pageSize;

            var startIndex = page * totalPages;

            var rowindex = +args.cell.getAttribute('index');

            var sno = startIndex + (rowindex);

            args.cell.innerText = sno;

        }

 

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/serialno-1028032605.zip

API: https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo

Screenshot:

Regards,

Rajapandi R