How to get selected rows

[Sebastian T]

Hello everyone, 

I'm new to Syncfusion, so don't beat me too hard. 

My goal is to select some records from a grid and proceed an action to the selected items. 

I'm using the grid control with configuration, as mentioned in Grid / Getting started (https://help.syncfusion.com/aspnet-core/grid/getting-started): 

<ej-grid id="Grid" datasource="ViewBag.DataSource" 

         allow-resize-to-fit="true" 

         allow-filtering="true" 

         allow-sorting="true" 

         allow-multi-sorting="true" 

         allow-grouping="true"

         allow-searching="true"                  

         allow-selection="true"

         selectiontype="Multiple"         

         show-column-chooser="true">

    <e-filter-settings filter-type="Excel" />

    <e-selection-settings selection-mode="@(new List<string>() {"row"})"/>

     

    <e-columns>

        <e-column type="checkbox" width="50" />

        <e-column field="Nummer"        header-text="ID"            type="number" width="75"    text-align="Right" ></e-column>

...  

    </e-columns>

</ej-grid>

<ej-button id="doTheMagic" size="Large" show-rounded-corner="true" text="Do it!" click="magicFunction" />

Everything nice to here, but how do I get access to the list of marked items?

I tried my luck with the following ideas without success:

https://www.syncfusion.com/kb/7624/how-to-get-selected-records-from-all-page-in-multi-checkbox-feature

var obj = $("Grid").ejGrid("instance"), rec = [] 

failed with "ejGrid" is not a function

https://www.syncfusion.com/kb/6329/how-to-get-selected-row-indexes-in-grid

I don't find the "ClientSideEvents" in the  ej grid definition.

Do you have any examples or tutorials?

[Mani Sankar Durai]

Hi Sebastian, 

Thanks for contacting Syncfusion support.  

We have checked your query and found that you are trying to get the selected records or selected row index while selecting the rows in grid. To get the selected records we suggest you to use getSelectedRecords method in grid and to get the selected row index use selectedRowsIndexes or to get the total selected row index for all pages use checkSelectedRowsIndexes property in grid.  

 

Please refer the below code example 

 

<ej-grid id="Grid" datasource="ViewBag.Data" 

         ... 

         allow-selection="true" 

         row-selected="rowSelected"    //client side event in grid. 

... 

     

    <e-columns> 

        <e-column type="checkbox" width="50" /> 

        <e-column field="OrderID" header-text="ID" type="number" width="75" text-align="Right"></e-column> 

    </e-columns> 

</ej-grid> 

... 

 

<script> 

    function rowSelected(args) {  

        var grid = $("#Grid").ejGrid("instance");  //mention the ID in # tag. 

        var selectedrowindex = this.selectedRowsIndexes;  // get selected row indexes              

        alert(selectedrowindex); 

        var selectedrecords = this.getSelectedRecords();   

    } 

</script> 

Note: To get the instance of the grid please refer the grid ID using “#” tag. Also please ensure whether you have referred JQuery to avoid the issue that you have faced.  

In ASP.NET Core it is not necessary to define the events in ClientSideEvents tag. You can define the event directly as like defining the grid properties like above.  

Please refer the API documentation link 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrecords 

https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrows 

https://help.syncfusion.com/api/js/ejgrid#members:selectedrowindex 

https://help.syncfusion.com/api/js/ejgrid#members:selectedrecords 

https://help.syncfusion.com/api/js/ejgrid#events:rowselected 

 

Please let us know if you need further assistance.  

 

Regards, 

Manisankar Durai. 

 

 

 

 

 

                             

[Sebastian T]

Thank you Manisankar for your support, 

but unfortunatelyit doesn't work. 

Linking the Event works fine, but when it comes to  "var grid = $("#Grid").ejGrid("instance");" the javascript console throws following error: 

"myFile:92 Uncaught TypeError: $(...).ejGrid is not a function

    at Object.rowSelected (myFile:92)

    at Object._trigger (ej.web.all.min.js:10)

    at Object.selectRows (ej.web.all.min.js:10)

    at Object._clickHandler (ej.web.all.min.js:10)

    at HTMLDivElement.<anonymous> (ej.web.all.min.js:10)

    at HTMLDivElement.dispatch (jquery.js:5206)

    at a (ej.web.all.min.js:10)

    at HTMLDivElement.s (ej.web.all.min.js:10)

    at HTMLDivElement.dispatch (jquery.js:5206)

    at HTMLDivElement.elemData.handle (jquery.js:5014)

rowSelected @ Material:92

_trigger @ ej.web.all.min.js:10

selectRows @ ej.web.all.min.js:10

_clickHandler @ ej.web.all.min.js:10

(anonymous) @ ej.web.all.min.js:10

dispatch @ jquery.js:5206

a @ ej.web.all.min.js:10

s @ ej.web.all.min.js:10

dispatch @ jquery.js:5206

elemData.handle @ jquery.js:5014"

Maybe there is an error in the strucuture of my page. 

<html>

<head>

..

  <link rel="stylesheet" rel='nofollow' href="/lib/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css" />

  <link rel="stylesheet" rel='nofollow' href="/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css" />        

  

  <script src="/lib/jquery/dist/jquery.js"></script>      

  <script src="/lib/jsrender/jsrender.js"></script>

  <script src="/lib/jquery.easing/jquery.easing.js"></script>

  <script src="/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>

...         

</head>

<body>

  <div class="container body-content">

          

    <h2>Super header</h2>

  

    <div id="Grid"></div>

    <button type="Submit" id="createorder"></button>

  </div>

 

    

    <script type='text/javascript'>$(function($){$("#Grid").ejGrid({"allowSorting":true,....</script>

    

            

    <script type="text/javascript">

        function rowSelected(args)

        {

            var grid = $("#Grid").ejGrid("instance");           

            var selectedrowindex = this.selectedRowsIndexes;  // get selected row indexes                          

            alert(selectedrowindex);

        }

    </script>

</body>

</html>

While digging the documentation I found out, that the Asp.Net.Core Grid component is based on Essential JS 1. 

Regarding your dependency information (https://help.syncfusion.com/js/dependencies), the version of ej, that comes with your "Getting Started" (https://help.syncfusion.com/aspnet-core/gettingstarted/getting-started-2-0) is 15.4.17.

Is it possible, that the linked libraries are not compatible? 

The resolved bower dependencies are: 

syncfusion-javascript (15.4.17)

- jquery (3.2.1)

- jquery-validation (1.14.0)

- jsrender (0.9.90)

- syncfusion-ej-global (15.4.17)

[Mani Sankar Durai]

Hi Sebastian, 

We have checked the code example provided and we are not able to reproduce the reported issue.  

We have also prepared a sample that can be downloaded from the below link. 

Sample link: http://www.syncfusion.com/downloads/support/forum/134960/ze/Grid-Sample1608843374 

Please check the sample provided above and if you still face the issue please get back to us with the following details.  

1.       Share the Layout.cshtml page from your application.  

2.       Share the full grid code 

3.       If possible please provide the sample with the issue reproducing.  

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 

Manisankar Durai. 

[Sebastian T]

I found the problem, while creating the running example. 

At the bottom of my "_layout.cshtml" was an additional script reference for jquery. After deletion everything worked as assumed. 

Thank you for your assistance. 

[Mani Sankar Durai]

Hi Sebastian, 

We are happy to hear that your problem has been solved.  

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai.