Problems with Grid

[Koen Barmentlo]

Hi,

I'm using the ejGrid and I got two problems with it.

Whenever I click on a row I want to open a dialog with some data from that row. Is there a way to do that? If yes, how can I do it?

As you can see in the following code example I enabled filtering. Now it's filtering with a startsWith operator, but I want this to be a contains operator. How can I accomplish this?

<ej-grid id="grid1" #grid1 [dataSource]="data" [allowFiltering]="true" [allowGrouping]="true" [allowSorting]="true"

             [allowSelection]="true" [allowScrolling]="true" [isResponsive]="true" [enableResponsiveRow]="true" [allowPaging]="true"

             [allowReordering]="true" [allowResizing]="true" [enablePersistence]="false">

      <e-columns>

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

        <e-column field="name" headerText="{{ 'Name' | translate }}" width="75" textAlign="left"></e-column>

        <e-column headerText="" width="10">

          <template e-template let-data>

            <span (click)="openUpdateDialog(data)">{{'General.Edit' | translate}}</span> |

            <span (click)="duplicate(data)">{{'General.Duplicate' | translate}}</span> |

            <span (click)="delete(data)">{{'General.Delete' | translate}}</span>

          </template>

        </e-column>

      </e-columns>

    </ej-grid>

@ViewChild('grid1') Grid: EJComponents<ej.Grid, any>;

Kind regards,

Koen Barmentlo

[Mani Sankar Durai]

Hi Koen, 

Thanks for contacting Syncfusion support. 

Query 1: Whenever I click on a row I want to open a dialog with some data from that row. Is there a way to do that? If yes, how can I do it? 

 

   We have analyzed your query and we have achieved your requirement using recordClick event. We have rendered the dialog only when clicking the row and passing those details of the row in the dialog content.  

Refer the code example 

<ej-dialog id="basicDialog" title="Dialog" height="300" width="400" [showOnInit]="false"  (close)="onClose($event)"> 

       

        Order:<br> 

        <label id="order"></label><br> 

        Product:<br> 

... 

        <label id="Freight"></label><br> 

   </ej-dialog> 

     <ej-grid id="grid1" [dataSource]="gridData" allowPaging="true" allowFiltering="true" (actionBegin)="onActionBegin($event)" (recordClick)="onRecordClick($event)"> 

   <e-columns> 

         <e-column field="Order" [isPrimaryKey]="true"  headerText="Order" width="75" textAlign="right"></e-column> 

        <e-column field="Product" headerText="Product" width="80"></e-column> 

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

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

             

    </e-columns>     

</ej-grid> 

 

[dialog.component.ts] 

onRecordClick(e: any) { 

       $("#basicDialog").ejDialog("open"); 

        $("#order").text(e.data.Order);  

        $("#Product").text(e.data.Product); 

        $("#Freight").text(e.data.Freight);   //shown the value in dialog where labels are rendered inside the  

        $("#ID").text(e.data.ID); 

    } 

Query 2:  I want this to be contains operator. How can I accomplish this? 

    We can achieve your requirement using actionBegin event in grid. Here we can change the default operator of the filter bar to other operators like contains, lessthan and etc 

 

Refer the code example 

<ej-grid id="grid1" [dataSource]="gridData" allowPaging="true" allowFiltering="true" (actionBegin)="onActionBegin($event)" (recordClick)="onRecordClick($event)"> 

   <e-columns> 

... 

             

    </e-columns>     

</ej-grid> 

 

[dialog.component.ts] 

onActionBegin(e: any) { 

        if (e.requestType == "filtering" && e.currentFilterObject[0].operator == "startswith") 

            e.currentFilterObject[0].operator = "contains"; 

    } 

 

 

 Based on your query we have already documented a KB that can be available from the below link 

Link: https://www.syncfusion.com/kb/3369/how-to-change-the-default-comparison-operator-of-the-filter-bar 

 

We have also prepared a sample based on the above requirements that can be available from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/133291/ze/angular2-seeds-systemjs2140214557 

 

Please let us know if you need further assistance. 

 

Regards, 

Manisankar Durai.