Data Grid Feature

[Muhammad Arhum Saleem]

I have a query related to data grid. i have requirement that i have to add a drop down list in data grid e column . On click header text of that e column , drop down list show and when i select  one value from drop down  , that value should be assign to whole column rows. if you people have the solution then please share with me. i was exploring but did not get. Thanks in advance. 

[Rajapandiyan Settu]

Hi Muhammad, 

Greetings from Syncfusion support. 

Query: On click header text of that e column , drop down list show and when i select  one value from drop down  , that value should be assign to whole column rows. 

We have analyzed your query at our end. you can achieve your requirement by using updateRow method of Grid in the dropdown’s change event. 

We have prepared a sample with this requirement. In that sample, we rendered the dropdown control inside the column header by using headerTemplate feature. 

headerTemplate: https://ej2.syncfusion.com/angular/documentation/grid/columns/#header-template  

In the change event of dropdown, we updated the selected value in the each row of the column by using updateRow() method. 

Change event of dropdown: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#change  

updateRow method of Grid: https://ej2.syncfusion.com/angular/documentation/api/grid/#updaterow  

[app.component.html] 

 <ejs-grid 

    #grid 

    [dataSource]="data" 

    [editSettings]="editSettings" 

    [toolbar]="toolbar" 

    height="350" 

  > 

    <e-columns> 

      <e-column 

        field="OrderID" 

        headerText="Order ID" 

        width="120" 

        isPrimaryKey="true" 

        textAlign="Right" 

      ></e-column> 

      <e-column field="ShipCountry" width="200"> 

        <ng-template #headerTemplate let-data 

          >Customer ID 

          <ejs-dropdownlist 

            id="ddlelement" 

            #samples 

            [dataSource]="dddata" 

            [fields]="fields" 

            [placeholder]="text" 

            (change)="dropdownchange($event)" 

          ></ejs-dropdownlist> 

        </ng-template> 

      </e-column> 

      ----- 

    </e-columns> 

  </ejs-grid> 

[app.component.ts] 

 dropdownchange(args) { 

    var rows = this.grid.getRows(); 

    var currentViewData = this.grid.getCurrentViewRecords(); 

    for (var i = 0; i < rows.length; i++) { 

      currentViewData[i]["ShipCountry"] = args.value; 

// update the selected value in the current page 

      this.grid.updateRow(parseInt(rows[0].getAttribute("aria-rowindex")), currentViewData[i]); 

    } 

  } 

getRows: https://ej2.syncfusion.com/angular/documentation/api/grid/#getrows  

getCurrentViewRecords: https://ej2.syncfusion.com/angular/documentation/api/grid/#getcurrentviewrecords  

Find the below sample for your reference. 

Sample: https://stackblitz.com/edit/angular-g2eqqx-bvyqkb?file=app.component.ts  

Please get back to us if you need further assistance with us. 

Regards, 

Rajapandiyan S 

[Muhammad Arhum Saleem]

Thank you so much. It is working. :)

[Rajapandiyan Settu]

Hi Muhammad, 

We are glad that you have resolved your requirement with the provided solution. 

 

Regards, 

Rajapandiyan S