We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Question on grid row selection event and custom toolbar items

Thread ID:

Created:

Updated:

Platform:

Replies:

129420 Mar 16,2017 09:02 AM Mar 17,2017 08:06 AM Angular 1
loading
Tags: ejGrid
Nagarjuna Madupu
Asked On March 16, 2017 09:06 AM

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 [Syncfusion]
Replied On March 17, 2017 08:06 AM

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. 
 


<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. 



Query 2: Can I know all the events for Grid? 
 
Please refer to the blow link for events in Grid. 
 
 
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. 
 
 
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" }] } 
 
 

 


Regards, 

Jayaprakash K. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;