Edit row after sorting DataSource

[NascoParticipant]

Hello,
iam trying to Edit row by boundindex id in createWidget at it’s initialization it works fine (getting the row by boundindex ) but after the scroll action or any sorting process on data row.boundindex Changed… even after move to another page the index is from the initial widget
app.component.html

<jqxGrid #myGrid
           [width]="900" [source]="dataAdapter" [columns]="columns"
           [sortable]="true" [pagesizeoptions]="['15', '30']"
           [pageable]="true" [height]="300"
           [pagermode]="'simple'">
  </jqxGrid>

app.component.ts

  editrow: number = -1;
  counter: number = 1;

  columns: any[] =
    [
      {text: 'Company Name', datafield: 'companyName', width: 200},
      {text: 'Contact Name', datafield: 'contactName', width: 150},
      {text: 'Contact title', datafield: 'title', width: 100},
      {text: 'address', datafield: 'address', width: 100},
      {text: 'city', datafield: 'city', width: 100},
      {text: 'country', datafield: 'country'},
      {
        text: 'Actions',
        sortable: false,
        width: 150,
        createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {
          // container and inside it 2 buttons edit and delete
          console.log('Create Widget');
          let container = document.createElement('div');
          let id = <code>editButton${this.counter}</code>;
          container.id = id;
          let buttonContainer1 = document.createElement('div');
          let buttonContainer2 = document.createElement('div');
          buttonContainer1.id = <code>buttonContainer1${this.counter}</code>;
          buttonContainer2.id = <code>buttonContainer2${this.counter}</code>;
          buttonContainer1.style.cssText = 'float: left';
          buttonContainer2.style.cssText = 'float: left; margin-left: 5px';
          container.appendChild(buttonContainer1);
          container.appendChild(buttonContainer2);
          // container.value = 'Edit';
          // container.style.border = 'none';

          htmlElement.appendChild(container);

          // rendering Edit and Delete Buttons
          let editButton = jqwidgets.createInstance(<code>#${buttonContainer1.id}</code>, 'jqxButton', {value: 'Edit', Template: 'warning'});
          let deleteButton = jqwidgets.createInstance(<code>#${buttonContainer2.id}</code>, 'jqxButton', {value: 'Delete', Template: 'danger'});

          editButton.addEventHandler('click', () => {

            // get the data and append in to the inputs

            this.editrow = row.boundindex;
            console.log(this.editrow);
            let dataRecord = this.myGrid.getrowdata(this.editrow);
            this.companyName.val(dataRecord.companyName);
            this.contactName.val(dataRecord.contactName);
            this.title.val(dataRecord.title);
            this.address.val(dataRecord.address);
            this.city.val(dataRecord.city);
            this.country.val(dataRecord.country);
            // show the popup window.
            this.myWindow.position({x: 100, y: 200});
            this.myWindow.open();

          });
          deleteButton.addEventHandler('click' , () => {
            this.editrow = row.boundindex;
            this.myGrid.deleterow(this.editrow);

          });
          this.counter++;

        }, initwidget: (row: any, column: any, value: any, htmlElement: HTMLElement): void => {
        }
      }
];

[HristoParticipant]

Hello Nasco,

You should implement the initwidget callback to update the items while scrolling (or when change the pages).
Please, take a look at this example:
https://tseditor.com/?key=grid-widgetcolumn

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts