Grid Rowselecting not working with ViewControl and Ajax

[Reto Ruemmeli]

​I have one DataGrid on the page and want to load a second grid via Ajax. The second grid is a component. I want to use the component both on the page and with Ajax. This actually all works so far.
But when I insert "rowSelecting" in the first grid (GridAddress) it doesn't work anymore.
There is an Javascript Error «Uncaught ReferenceError: testselect is not defined» and Grid is not rendered.

Many thanks for your Help.

Reto

Page

<h2>Ajax Load with Syncfusion Controls</h2>
<div style="margin-bottom:20px">
    <button id="loadControl" onclick="loadCtrl()">Load Control</button>
</div>


<div id="PartialView" style="margin-bottom:20px;">
    <ejs-grid id="GridAddress" height="300" enableStickyHeader="true" allowPaging="false"
        rowSelecting="testselect">
        <e-grid-pagesettings pageSize="12" pageSizes="true">
        </e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="AddressID" headerText="ID" width="100"></e-grid-column>
            <e-grid-column field="Name" headerText="Name" width="150"></e-grid-column>
            <e-grid-column field="FirstName" headerText="Vorname" width="150"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>


<div id="ControlView">
    @await Component.InvokeAsync("EmployeeTest",1)
</div>




<script>
    function testselect() {
        alert(0);
    }
    function loadCtrl() {
        var ajax = new ej.base.Ajax("?handler=ControlView&addressID=1", 'GET', true);
        ajax.send().then(function (result) {
            var fragment = document.createElement('div');
            fragment.innerHTML = result;
            document.getElementById('ControlView').innerHTML = "";
            ej.base.append([fragment], document.getElementById('ControlView'), true);
        });
    }
</script>

Control

<h3>Form-Control @Model / @timestamp</h3>
<ejs-grid id="GridAbsenceLog" height="100%" enableStickyHeader="true" allowPaging="false" allowSorting="true">
    <e-grid-columns>
        <e-grid-column field="AddressID" headerText="ID" width="100"></e-grid-column>
        <e-grid-column field="Name" headerText="Name" width="150"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Vorname" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>


<ejs-scripts></ejs-scripts>


[Pavithra Subramaniyam]

Hi Reto Ruemmeli,

Thanks for contacting Syncfusion support.

We suggest adding the script section above the second Grid to overcome the reported error. Please refer to the below code example for more information.

<div id="PartialView" style="margin-bottom:20px;">

    <ejs-grid id="GridAddress" height="300" enableStickyHeader="true" allowPaging="false"

              rowSelecting="testselect">

        .  .  .

    </ejs-grid>

</div>

 

<script>

    function testselect() {

        alert(0);

    }

    function loadCtrl() {

        var ajax = new ej.base.Ajax("?handler=ControlView&addressID=1", 'GET', true);

        ajax.send().then(function (result) {

            var fragment = document.createElement('div');

            fragment.innerHTML = result;

            document.getElementById('ControlView').innerHTML = "";

            ej.base.append([fragment], document.getElementById('ControlView'), true);

        });

    }

</script>

 

<div id="ControlView">

    @await Component.InvokeAsync("EmployeeTest", 1)

</div>

 

Regards,

Pavithra S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Reto Ruemmeli]

Hi  Pavithra 

Many thanks for your answer.

Now it runs without error.

Best Regards, Reto

[Suganya Gopinath]

Reto,

We are glad that the provided solution helped to solve the issue. 

We marking this forum as solved. 

Regards,

Suganya Gopinath.