I want to get the field value by selecting the cells in the grid

[bright]

in EJ2, I want to get the field value by selecting the cells in the grid, I am using the QueryCellInfo event now. Below is my code.

[Pavithra Subramaniyam]

Hi bright, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using the “cellSelected” or “cellSelecting” event of Grid component. Please refer to the below code example and documentation link for more information. 

 

[index.cshtml] 

<ejs-grid id="GridUS_doc" enableHover="false" allowPaging="true" allowResizing="true" allowSorting="true" allowSelection="true" allowGrouping="true" cellSelected="cellSelected" dataSource="ViewBag.dataSource" > 

    <e-grid-groupsettings columns="@(new string[] { "EmployeeID"})" showGroupedColumn="false" showDropArea="false"></e-grid-groupsettings> 

    <e-grid-pageSettings pageCount="2" pageSize="5"> </e-grid-pageSettings> 

    <e-grid-selectionSettings mode="Cell" type="Single"></e-grid-selectionSettings> 

    <e-grid-columns> 

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

        <e-grid-column field="CustomerID" headerText="CustomerID" isPrimaryKey="true" textAlign="Left"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="EmployeeID" textAlign="Left"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Left"></e-grid-column> 

        <e-grid-column field="ShipName" headerText="ShipName" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script> 

    function cellSelected(e) { 

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

        var field = grid.columns[e.cellIndex.cellIndex].field; 

        console.log("field-- "+ field); 

    } 

</script> 

 

Documentation: https://ej2.syncfusion.com/documentation/api/grid#cellselected  

 

Regards, 

Pavithra S. 

[bright]

Thank you very much for your answer. Another question is how to set a right click to select a cell.

Regards,

 

Bright

[Pavithra Subramaniyam]

Hi bright, 

 

You can achieve your requirement by binding the JavaScript “mousedown” or “contextmenu” event to the Grid element. In that event you can select the Grid cells by using the “selectCell” method. Please refer to the below code example, Documentation link and sample link. 

 

[inde.cshtml] 

<ejs-grid id="GridUS_doc" created='created' allowPaging="true"cellSelected="cellSelected" dataSource="ViewBag.dataSource"> 

    <e-grid-selectionSettings mode="Cell" type="Single"></e-grid-selectionSettings> 

    <e-grid-columns> 

        <e-grid-column field="ShipName" headerText="ShipName" width="150"></e-grid-column> 

        .  .  . 

    </e-grid-columns> 

</ejs-grid> 

<br /> 

<script> 

    function created(args) {  

        // we are binding the mousedown event inside the “created” event of Grid. 

        this.element.addEventListener("mousedown", function (e) { 

            if (e.button == 2 && e.target.classList.contains("e-rowcell")) { 

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

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

                var r_index = rowObj.index; 

                var c_index = parseInt(e.target.getAttribute("aria-colindex")); 

                grid.selectCell({ rowIndex: r_index, c_index: }, true); 

            } 

        }); 

    } 

    </script>  

 

 

Documentation: https://ej2.syncfusion.com/documentation/api/grid#created  

                              https://ej2.syncfusion.com/documentation/api/grid#selectcell  

 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/RightClick-1504343163  

 

Please refer the sample for further details, 

 

Regards, 

Pavithra S. 

[bright]

Perfect, this solved my problem，thanks。

[Pavithra Subramaniyam]

Hi bright, 

Thanks for your update.  

We are happy to hear that your issue has been resolved now. 

Please contact us if you need further assistance. 

Regards, 

Pavithra S.