How to bind json data in grid dynamically

Posted by: bemes9226 on 9 November 2020, 9:56 am EST

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 9 November 2020, 9:56 am EST

  i need to bind json data dynamically with dropdown and custom field need to add(glyph icons)

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 November 2020, 7:30 am EST

  Hi bemes9226,

  You can update the itemsSource of the grid anytime as per your requirements.

  flexGrid.itemsSource = <dynamic json data>;
  

  But, we were not able to understand the custom field requirements. Can you please explain this a little bit more?

  Regards,
  
  Ashwin

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 10 November 2020, 4:13 pm EST

  i need to add edit column dynamically,this field name not available in json.

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 10 November 2020, 4:27 pm EST

  <wj-flex-grid
        #flexGrid
        class="bento-flex-grid has-row-hover"
        [class.list-grid]="isListGrid"
        [itemsSource]="data"
        [stickyHeaders]="true"
        [showMarquee]="true"
        [showSort]="true"
        (initialized)="gridInitialized()"
      >
        <!-- FLEXGRID FILTER -->
        <wj-flex-grid-filter #filter></wj-flex-grid-filter>
        <ng-template wjFlexGridCellTemplate [cellType]="'TopLeft'" let-col="col">
          <div *ngIf="col.index === 1">
            <bento-checkbox
              [ngModel]="isAllSelected()"
              (change)="onHeaderCheckBoxChange()"
              [indeterminate]="isIndeterminate()"
            ></bento-checkbox>
          </div>
        </ng-template>
        <ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-col="col" let-row="row" let-item="item">
          <div *ngIf="col.index === 0">{{ row.index+1 }}</div>
          <div *ngIf="col.index === 1">
            <bento-checkbox
              [ngModel]="item.selected"
              (change)="item.disabled||(item.selected = !item.selected);onCheckBoxChange();"
            ></bento-checkbox>
          </div>
        </ng-template>
         <!-- Actions Column -->
        
         <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
           <span
             class="bento-icon-edit grid-action-icon"
             (click)="actions.editRow(item)"
             ngbTooltip="Edit"
             container="body"
             title="Edit"
           ></span>
         
         </ng-template>
     
        </wj-flex-grid>
  

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 11 November 2020, 11:46 pm EST

  how can i add custom dropdown field in cols==‘country’.
  
  below code not working.
  
  <wj-flex-grid
  
  #flexGrid
  
  class=“bento-flex-grid has-row-hover”
  
  [class.list-grid]=“isListGrid”
  
  [itemsSource]=“data”
  
  [itemFormatter]=“itemFormatter”
  
  [stickyHeaders]=“true”
  
  [showMarquee]=“true”
  
  [showSort]=“true”
  
  [selectionMode]=“‘Row’”
  
  (initialized)=“gridInitialized()”>
  
  <ng-container *ngFor=“let col of columns”>
  
  <wj-flex-grid-column [header]=“col” [binding]=“col”>
  
  <ng-template wjFlexGridCellTemplate *ngIf=“col==‘country’” [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  

  ghcghcghcvgjvgj

  
  
  
  
  
  
  
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 November 2020, 11:52 pm EST

  Hi,

  The cell template with cellType = Cell should be inside a wj-flex-grid-column. It seems that you need to add an extra action column in the grid. For this, you may set the autoGenerateColumns of FlexGrid to true and only add another column for action. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-a7qxcq

  In this sample, the Action column is added by template and all the other columns are generated automatically.

  ~regards

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 12 November 2020, 2:32 am EST

  its working fine.but i have 10 columns name in json data all coming dynamically.but i want dropdown filed where the col==country.how to modify the customize perticular column from json and i have tried below it is not working.this country name it is in the json name.

  <wj-flex-grid [itemsSource]=“data”>
  
  <wj-flex-grid-column *ngFor=“let col of columns” [header]=“col” [binding]=“col”>
  
  <template wjFlexGridCellTemplate *ngIf=“col==‘country’” [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  <wj-combo-box [itemsSource]=“countries”[displayMemberPath]=“‘country’” [selectedValuePath]=“‘country’” [(selectedValue)]=“cell.value”>