Question on grid row selection event and custom toolbar items

[Nagarjuna Madupu]

I would to handle event(Example: onrowselection or onSelectionChanged) when I select a row from grid. 

1. Can I the event which fires when a row is selected?

2. Can I know all the events for Grid?

3. Can it be possible to add custom toolbar items (if possible with images)?

<ej-grid [allowPaging]="true" [allowSorting]="true" [editSettings]= "edit" [toolbarSettings]= "tool" (actionBegin)="rowSelecting($event)" [dataSource]="gridData" allowSelection="true" selectionType="single" [selectionSettings]="selectionMode">

    <e-columns>

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right">e-column>

        <e-column field="CustomerID" headerText="Customer ID" width="80">e-column>

        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right">e-column>

        <e-column field="Freight" width="75" format="{0:C}" textAlign="right">e-column>

        <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right">e-column>

    e-columns>

ej-grid>

[Jayaprakash Kamaraj]

Hi Nagarjuna, 

Thank you for contacting Syncfusion support. 

Query 1:  Can I the event which fires when a row is selected? 

 

In Grid , we have rowSelecting and rowSelected events. The “rowSelecting” event triggers before the row is going to be selected and rowSelected event triggers after the row is selected. Please refer to the below help documents and code example. 

 

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

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

<ej-grid #grid id="gridData"  [dataSource]="gridData1" [allowPaging]="true" [toolbarSettings]= "tool" (rowSelecting)= rowSelecting($event) (rowSelected)= rowSelected($event)  > 

    <e-columns> 

        <e-column field="EmployeeID"  headerText="Employee ID" width="30" textAlign="right"></e-column> 

        

        <e-column field="OrderID" width="30" [isPrimaryKey]="true"  textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="30"textAlign="right"></e-column> 

        <e-column field="ShipCity" headertext="ShipCity" width="30" textalign="right"></e-column> 

    </e-columns> 

</ej-grid> 

</div> 

 

appComponent.ts 

 

rowSelecting(e: any){ 

alert("row is selecting"); 

} 

rowSelected(e: any){ 

alert("row is selected"); 

} 

Also we have events for row deselection in Grid. Please refer to the below help document. 

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

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

Query 2: Can I know all the events for Grid? 

 

Please refer to the blow link for events in Grid. 

 

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

 

Query3:  Can it be possible to add custom toolbar items (if possible with images)? 

 

Yes, we can add images in toolbar using customToolbarItems of Grid. Please refer to the below help document, code example and sample. 

 

https://help.syncfusion.com/api/js/ejgrid#members:toolbarsettings-customtoolbaritems 

 

Index.html 

 

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

        <img class="word_export"   style="max-width:20px;" src="Employees/13.png"  /> 

    </script> 

 

<ej-grid #grid id="gridData"  [dataSource]="gridData1" [allowPaging]="true" [toolbarSettings]= "tool" (rowSelecting)= rowSelecting($event) (rowSelected)= rowSelected($event)  > 

    <e-columns> 

        <e-column field="EmployeeID"  headerText="Employee ID" width="30" textAlign="right"></e-column> 

        

        <e-column field="OrderID" width="30" [isPrimaryKey]="true"  textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="30"textAlign="right"></e-column> 

        <e-column field="ShipCity" headertext="ShipCity" width="30" textalign="right"></e-column> 

    </e-columns> 

</ej-grid> 

</div> 

 

public tool =  { showToolbar: true, customToolbarItems: [ { templateID: "#Refresh" }] } 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ejGrid_Vpaging-7763973651968929179.zip 

 

Regards, 

Jayaprakash K.