1. Home
  2. Forum
  3. Angular - EJ 2
  4. Update and delete multiple records of text box and dropdown list by using ejs-grid

Update and delete multiple records of text box and dropdown list by using ejs-grid

Hi Team,

I required to update and delete  multiple records of text box and dropdown list by using ejs-grid 

and need to update or delete only selected rows.


Thanks & Regards

Chalamaiah N


Attachment: Update_and_delete__multiple_records_of_text_box_and_dropdown_list_by_using_ejsgrid_91b84100.zip

13 Replies
PS Pavithra Subramaniyam Syncfusion Team May 24, 2022 07:18 AM UTC

Hi Chalamaiah N,


Thanks for contacting Syncfusion support.


You can update/delete multiple records by enabling the Batch edit mode in the Grid component. While clicking the “save” button you can update the selected rows by using the “updateRow” method. To delete the selected rows, you can use the “deleteRecord” method. To save these changes in Grid, you need to call “batchSave” method. Please refer to the below code example, API links, and sample link for more information.


@Component({

  selector: 'app-root',

  template: `<button (click)="save()">Save</button>

  <button (click)="delete()">Delete</button>

  <ejs-grid #grid [dataSource]="data" [selectionSettings]="selectOptions" [editSettings]="editSettings"

  >

  .  .  .

  </ejs-grid>`

  })

export class AppComponent {

  

  public ngOnInit(): void {

    .  .  .

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true,  mode: 'Batch'};

  }

  save() {

    let selectedRecords = this.grid.getSelectedRecords();

    let selRows = this.grid.getSelectedRows();

    let selIndex = this.grid.getSelectedRowIndexes();

    selectedRecords.map((e, i) => {

      To get the changes from the template element

      e['LvlName1'] = (

        selRows[i].querySelector('.e-textbox input') as any

      ).value;

      e['Active'] = (selRows[i].querySelector('.e-ddl input') as any).value;

      this.grid.updateRow(selIndex[i], e);

    });

 

    this.grid.editModule.batchSave();

  }

  delete() {

    this.grid.deleteRecord();

    this.grid.editModule.batchSave();

  }

}

 

 


Decatenation    : https://ej2.syncfusion.com/angular/documentation/grid/editing/batch-editing/
                               https://ej2.syncfusion.com/angular/documentation/api/grid/#getselectedrecords
                               https://ej2.syncfusion.com/angular/documentation/api/grid/#getselectedrows

  https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#updaterow
             

https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#deleterecord
                https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#batchsave


Sample               : https://stackblitz.com/edit/angular-svjhjv-3ptcqa?file=app.component.html,app.component.ts,app%2Fapp.module.ts


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


NC Narsimsetty Chalamaiah May 30, 2022 12:16 PM UTC

Hi Team,


1st issue for pagination 

I required to update and delete  multiple records of text box and dropdown list by using ejs-grid


I followed this steps 

      

        1. Change text vale and dropdown and  select two rows and go to second page

        2. Showing to second page

         3. And come back to first page

once come back to first page updated values are not showing . it is showing previous values.

i need updated values once come back to first page.
i am sending code what i used code , please find attached file and let me know asap.


for 2nd issue for click save btton

 1 am adding 2nd  issue for update 

1st page I selected 2 records and second page I  selected 2 records and click save button 


1stpage:



2nd page 



please check debugger data



please check this scenario also 

i used below code what synfusion team provided , it is showing current page records only not total records for update total records .

 

let selectedRecords = this.grid.getSelectedRecords();

    let selRows = this.grid.getSelectedRows();

    let selIndex = this.grid.getSelectedRowIndexes();

    selectedRecords.map((e, i) => {

      e['LvlName1'] = (

        selRows[i].querySelector('.e-textbox input') as any).value;

      e['Active'] = (selRows[i].querySelector('.e-ddl input') as any).value;

     // this.grid.updateRow(selIndex[i], e);

    });

    debugger;

    var s1 = selectedRecords;




Thanks & Regards

Chalamaiah N


 https://www.syncfusion.com/forums/175333/not-updted-rows-while-page-change?reply=Sgzm7w






Attachment: not_updted_rows_while_page_change_b78a9b79.zip

PS Pavithra Subramaniyam Syncfusion Team May 31, 2022 10:04 AM UTC

Hi Narsimsetty Chalamaiah,


Query#1: once come back to first page updated values are not showing . it is showing previous values. i need updated values once come back to first page.


By default, the changes in the template components will not be last while doing any data actions like Paging, Sorting etc. Because the data for those template components will be bound from the original Grid dataSource. So unless you update the data source, the component will have only the previous values. This is the default behavior of the Grid component. So, we suggest updating the row using “updateRow” method save the changes using “editModule.batchSave” before doing any data actions.


Query#2: i used below code what synfusion team provided , it is showing current page records only not total records for update total records .


The Grid selection will also be lost when doing Grid actions like paging. If you want to maintain the selection in other pages too then we suggest setting the “selectionSettings.persistSelection” property as true which will maintain the selection based on the corresponding primary key values and update the selection after the data actions. Please refer to the below code example and API link for more information.


 

this.selectOptions = { checkboxOnly: true, persistSelection: true };

 


https://ej2.syncfusion.com/angular/documentation/api/grid/selectionSettings/#persistselection


Regards,

Pavithra S


NC Narsimsetty Chalamaiah May 31, 2022 10:34 AM UTC

Hi Team,


if i use  this.selectOptions = { checkboxOnly: true, persistSelection: true }; code , i am not able to reslove issue.


please set up call , i will be explain my issue .

it is a production issue, please respond asap.


Thanks & Regards

Chalamaiah 


NC Narsimsetty Chalamaiah May 31, 2022 10:45 AM UTC

Query#1: once come back to first page updated values are not showing . it is showing previous values. i need updated values once come back to first page.


By default, the changes in the template components will not be last while doing any data actions like Paging, Sorting etc. Because the data for those template components will be bound from the original Grid dataSource. So unless you update the data source, the component will have only the previous values. This is the default behavior of the Grid component. So, we suggest updating the row using “updateRow” method save the changes using “editModule.batchSave” before doing any data actions.



what yo are suggestion is not useful to our project.

we need to update multiple records at a time with different different page data, 

example: 

first page I select two records with changes value and second page we  select two records with change value need to update 4 records at a time .

it is a production issue, please provide link I will explain scenario what we are expecting.


Thanks & Regards

Chalamaiah N





NC Narsimsetty Chalamaiah May 31, 2022 10:59 AM UTC

Hi Team,

i used  this.selectOptions = { checkboxOnly: true, persistSelection: true }; and tried, but i am not able to resolve issue.

I an sending screen shots please find below screens 

first page I select 2 records and change the values. 








and go to 2nd page 


selRows  showing length is 2 only, 




we are getting below error



NC Narsimsetty Chalamaiah May 31, 2022 11:04 AM UTC

Please setup call on tomorrow by 01:30pm to 5:30pm IST,


it is a production issue please respond asap. 


PS Pavithra Subramaniyam Syncfusion Team June 1, 2022 12:57 PM UTC

Hi Narsimsetty Chalamaiah,


Query#1: we need to update multiple records at a time with different different page data,


Since the Batch changes/ template changes will be lost with the paging action it is not possible to update the changes using the Grid methods with the default behavior. So, we suggest storing the changed row values in a global variable and updating the grid dataSource using the “saveChanges” method of the DataManager library which will update the bulk changes.


Please refer to the below code example for more information on which we have stored the Grid row with the changes inside the “change” event of the text box component.
While clicking the “save” button, we will check whether the stored row values are selected or not, and based on that we will update the changes to the Grid dataSource.


@Component({

  selector: 'my-app',

  template: `

   <button (click)="save()">Save</button>

  <button (click)="delete()">Delete</button>

  <ejs-grid #grid [dataSource]="data" [selectionSettings]="selectOptions"

    [editSettings]="editSettings" allowPaging="true" [pageSettings] pageSettings">

    <e-columns>

      <e-column field="LvlName1" headerText="Lvl Name1" width="150"       [customAttributes]="customAttributes" >

        <ng-template let-data #template>

          <ejs-textbox

            value="{{ data.LvlName1 }}"

            (change)="textBoxchange($event)"

          ></ejs-textbox>

        </ng-template>

      </e-column>

      .  .  .

    </e-columns>

  </ejs-grid>

  `,

})

export class AppComponent {

  public selectOptions: Object = { persistSelection: true };

  public changedData: Object = {};

  .  .  .

  // Save button click

  save() {

    let selectedRecords = this.grid.getSelectedRecords();

    // checking whether the updated rows are selected or not

    var selectedChangedData = [];

    selectedRecords.map((e, i) => {

      if (this.changedData[e['ItemNo']]) {

        selectedChangedData.push(this.changedData[e['ItemNo']]);

      }

    });

 

    // Creating DataManager instance with grid dataSource

    // assuming you are using the local data

    var dm = new DataManager({ json: this.grid.dataSource as any });

    var changes = {

      changedRecords: selectedChangedData,

      addedRecords: [],

      deletedRecords: [],

    };

    // saving the changes

    dm.saveChanges(changes, 'ItemNo');

    this.changedData = [];

  }

  textBoxchange(args) {

    var primaryKey = this.grid.getPrimaryKeyFieldNames()[0];

    var row =

      this.grid.getRowsObject()[

      parseInt(args.container.closest('tr').getAttribute('aria-rowindex'))

      ];

    var key = row.data[primaryKey];

    var data = Object.assign({}, row.data);

    // storing the changes

    if ((this.changedData as any)[key] == undefined) {

      data['LvlName1'] = args.value;

      (this.changedData as any)[key] = data;

    } else {

      (this.changedData as any)[key]['LvlName1'] = args.value;

    }

  }

}

 

 


Documentation : https://ej2.syncfusion.com/angular/documentation/data/manipulation/#batch-edit-operation


Sample               : https://stackblitz.com/edit/angular-svjhjv-x2q9tw?file=app.component.html,app.component.ts,app%2Fapp.module.ts


Query#2: i used  this.selectOptions = { checkboxOnly: true, persistSelection: true }; and tried, but i am not able to resolve issue.


In our Grid component while paging actions we remove the previous page row elements and generate the current page rows again. So getSelectedRows method will return only the current page rows which is the default behavior. So, you cannot access the other page row elements which do not exist.


Regards,

Pavithra S


NC Narsimsetty Chalamaiah June 3, 2022 03:31 PM UTC

HI 


we have discussed with client , they need multiple update records at a time , not required to use 2 times  update in grid.

 is it possible to update once to db? 


Please setup call on 06-june-2022 by 03:00pm to 5:30pm IST,


it is a production issue please respond asap. 

Thanks & Regards

Chalamaiah N


NC Narsimsetty Chalamaiah replied to Pavithra Subramaniyam June 6, 2022 11:37 AM UTC

Hi Pavthra,

i need to add lvlname2 and lvlName3 need to editable text and need to update data.  if i am adding to   lvlname2 and lvlName3 i am getting wrong updated data please find below screen shot and reslove issue.


https://stackblitz.com/edit/angular-svjhjv-x2q9tw?file=app.component.html,app.component.ts,app%2Fapp.module.ts


 e['LvlName2'] = (
        selRows[i].querySelector('.e-textbox input') as any
      ).value;
      e['LvlName3'] = (
        selRows[i].querySelector('.e-textbox input') as any
      ).value;









i have used below code 


 save() {
    debugger;
    let selectedRecords = this.grid.getSelectedRecords();
    let selRows = this.grid.getSelectedRows();
    let selIndex = this.grid.getSelectedRowIndexes();
    selectedRecords.map((e, i) => {
      e['LvlName1'] = (
        selRows[i].querySelector('.e-textbox input') as any
      ).value;
      e['LvlName2'] = (
        selRows[i].querySelector('.e-textbox input') as any
      ).value;
      e['LvlName3'] = (
        selRows[i].querySelector('.e-textbox input') as any
      ).value;
      e['Active'] = (selRows[i].querySelector('.e-ddl input') as any).value;
      this.grid.updateRow(selIndex[i], e);
    });

    this.grid.editModule.batchSave();
    debugger;
  }



<div class="control-section">
  <button (click)="save()">Save</button>
  <button (click)="delete()">Delete</button>
  <ejs-grid
    #grid
    [dataSource]="data"
    [selectionSettings]="selectOptions"
    [editSettings]="editSettings"
  >
    <e-columns>
      <e-column
        type="checkbox"
        width="50"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="LvlName1"
        headerText="Lvl Name1"
        width="150"
        [customAttributes]="customAttributes"
        [visible]="false"
      ></e-column>
      <e-column
        field="LvlName1"
        headerText="Lvl Name1"
        width="150"
        [customAttributes]="customAttributes"
      >
        <ng-template let-data #template>
          <ejs-textbox value="{{ data.LvlName1 }}"></ejs-textbox>
        </ng-template>
      </e-column>
      <e-column
        field="Active"
        headerText="Active"
        width="200"
        [customAttributes]="customAttributes"
      >
        <ng-template let-data #template>
          <ejs-dropdownlist
            id="Active"
            name="Active"
            [dataSource]="customerIDDistinctData"
            [fields]="{ text: 'Value', value: 'Key' }"
            value="{{ data.Active }}"
            popupHeight="300px"
          >
          </ejs-dropdownlist>
        </ng-template>
      </e-column>

      <e-column
        field="LvlName2"
        headerText="Lvl Name2"
        width="200"
        [visible]="false"
        [customAttributes]="customAttributes"
      ></e-column>

      <e-column
        field="LvlName2"
        headerText="LvlName2"
        width="150"
        [customAttributes]="customAttributes"
      >
        <ng-template let-data #template>
          <ejs-textbox value="{{ data.LvlName2 }}"></ejs-textbox>
        </ng-template>
      </e-column>

      <e-column
        field="LvlName3"
        headerText="Lvl Name3"
        width="200"
        [visible]="false"
        [customAttributes]="customAttributes"
      ></e-column>

      <e-column
        field="LvlName3"
        headerText="LvlName3"
        width="150"
        [customAttributes]="customAttributes"
      >
        <ng-template let-data #template>
          <ejs-textbox value="{{ data.LvlName3 }}"></ejs-textbox>
        </ng-template>
      </e-column>

      <e-column
        field="LvlName4"
        headerText="Lvl Name4"
        width="200"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="LvlName5"
        headerText="Lvl Name5"
        width="200"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="LvlName6"
        headerText="Lvl Name6"
        width="200"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="LvlName7"
        headerText="Lvl Name7"
        width="200"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="Description"
        headerText="Description"
        width="200"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="ItemNo"
        headerText="ItemNo"
        isPrimaryKey="true"
        width="90"
        [customAttributes]="customAttributes"
      ></e-column>
      <e-column
        field="LastUpdatedDate"
        headerText="Last Updated Date"
        width="200"
        [customAttributes]="customAttributes"
      ></e-column>
    </e-columns>
  </ejs-grid>
</div>
















PS Pavithra Subramaniyam Syncfusion Team June 6, 2022 01:06 PM UTC

Hi Narsimsetty Chalamaiah,


We have consolidated all the details and working on it. We request you to follow the thread https://www.syncfusion.com/forums/175333/not-updted-rows-while-page-change
for further updates.


Regards,

Pavithra S


NC Narsimsetty Chalamaiah June 6, 2022 01:41 PM UTC

Hi Pavitra,


as per business request we can't  able to use below code.

this.toolbar = ['Add', 'Delete', 'Update', 'Cancel'];


https://www.syncfusion.com/forums/175333/not-updted-rows-while-page-change


if we try above code we are facing another issue 


if we are using hard coded data in 

 ngOnInit()  we are not getting issue we change text or dropdown value

 this.data = [{

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 1,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 2,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 3,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 4,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 5,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 6,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 7,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 8,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 9,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 10,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 11,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 12,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 13,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 14,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 15,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 16,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 17,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 18,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 19,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 20,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 21,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 22,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 23,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 24,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 25,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 26,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 27,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 28,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'Yes',

      LvlName1: 'A',

      LvlName2: 'A',

      LvlName3: 'A',

      LvlName4: 'A',

      LvlName5: 'A',

      LvlName6: 'A',

      LvlName7: '1',

      ItemNo: 29,

      LastUpdatedDate: '02/12/2022',

    },

    {

      Active: 'No',

      LvlName1: 'B',

      LvlName2: 'B',

      LvlName3: 'B',

      LvlName4: 'B',

      LvlName5: 'B',

      LvlName6: 'B',

      LvlName7: '2',

      ItemNo: 30,

      LastUpdatedDate: '02/12/2022',

    },

    ];



if we are trying to get data from Server , as below code 


  getData() {

    //this.showLoader = true;

    debugger;

    this.GoogleAnalyticsService.RegisterEvent("Screen Activity", "GetAllReportingHierarchyMaster Data", "GetAllReportingHierarchyMaster Data");

    this.httpService.getAllReportingHierarchyMaster()

      .subscribe(

        (response: any) => {

          debugger;

          this.data = [];

          this.jsonData = response.data;

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

            this.data.push(

              {

                Active: this.jsonData[i].hierarchyActive,

                LvlName1: this.jsonData[i].hierarchyLevelName1,

                LvlName2: this.jsonData[i].hierarchyLevelName2,

                LvlName3: this.jsonData[i].hierarchyLevelName3,

                LvlName4: this.jsonData[i].hierarchyLevelName4,

                LvlName5: this.jsonData[i].hierarchyLevelName5,

                LvlName6: this.jsonData[i].hierarchyLevelName6,

                LvlName7: this.jsonData[i].hierarchyLevelName7,

                ItemNo: this.jsonData[i].hierarchyID,

                LastUpdatedDate: this.jsonData[i].hierarchyTimestamp,


              });

          }


        },

        error => {

          console.log(error);

          this.errorMessage = error;

          this.navigationService.showToast('error', this.errorMessage, 'Error', true);

          this.GoogleAnalyticsService.TrackException(error);

        });

  }





if we change text value we got below console error.



please go throw above screen, and please update asap.


Thanks & Regards

Chalamaiah N


PS Pavithra Subramaniyam Syncfusion Team June 7, 2022 08:45 AM UTC

Hi Narsimsetty Chalamaiah,


For better understanding please share the below details that will be helpful for us to provide a better solution as early as possible.


  1. Share your exact requirement scenario step by step with a detailed description.
  2. Share the issue scenario in a video demonstration format.
  3. Share a runnable sample with the issue


Regards,

Pavithra S


Loader.
Up arrow icon