Binding data in TreeGrid on input with ngModel

[Stefan Habets]

Hello,

Could you please help me to bind my data to an input field in my TreeGrid.

The ngModel is not changing the real data in the barcodes field in the datamanager.

As I want to scan/type a barcode into this field and it saves it to the child barcodes field and what would be even greater is if it would jump to the next child input field when receiving a newline command (\r\n).

These versions:

   "@syncfusion/ej2-angular-base": "^28.1.33",

    "@syncfusion/ej2-angular-buttons": "^28.1.39",

    "@syncfusion/ej2-angular-calendars": "^28.1.33",

    "@syncfusion/ej2-angular-charts": "^28.2.4",

    "@syncfusion/ej2-angular-dropdowns": "^28.1.39",

    "@syncfusion/ej2-angular-grids": "^28.2.5",

    "@syncfusion/ej2-angular-inputs": "^28.1.41",

    "@syncfusion/ej2-angular-navigations": "^28.1.41",

    "@syncfusion/ej2-angular-popups": "^28.1.39",

    "@syncfusion/ej2-angular-treegrid": "^28.2.4",

    "@syncfusion/ej2-grids": "^28.1.33",

    "@syncfusion/ej2-material-theme": "~28.1.33",

Greetings,

Stefan Habets

Attachment: weighteditems_b5b13a8f.zip

[Shek Mohammed Asiq Abdul Jabbar]

Hi Stefan Habets,

Greetings from Syncfusion Support.

You can use Syncfusion’s Barcode component to render barcodes in the TreeGrid column template. The barcode data can be dynamically set using the value property of the Barcode component. Please refer to the following code snippet:

<e-column field="barcodes" headerText="Barcode" width="175">

  <ng-template #template let-data>

    <div *ngIf="!data.hasChildRecords">

      <ejs-barcodegenerator

        id="barcode"

        width="150px"

        height="50px"

        [value]="data.barcodes"

        type="Code128"

      >

      </ejs-barcodegenerator>

    </div>

  </ng-template>

</e-column>

 

For a working example, please check the following sample:
🔗 Barcode in TreeGrid Column Template

Documentation on Barcode component:

https://ej2.syncfusion.com/angular/documentation/barcode/barcodegenerator

If you need further assistance, please let us know.

Regards,
Shek

[Stefan Habets]

Dear Shek,

Thank you for the answer. I have another question regarding the treeGrid and data in it.

My question is: How can I find the correct HTMLElement row by using the dataSource or ParentData in the tree grid when some rows are collapsed?

As I tried to use treegrid.getRowByIndex(index), however this index is the data index (see picture) and not the index of the html row list. I would expect getDataRows function to provide all ​rows but it gives only the expanded rows.

So how can I find correct html element when looping through the treegrid.parentData?

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Stephan Habets,

 

We suspect that you need to access a row using an HTML element. You can use the getRowInfo method and pass the HTML element as a parameter. We have prepared a simple sample demonstrating how to retrieve row information using an HTML element.

 

Please refer to the following sample:

Sample: https://stackblitz.com/edit/angular-b9buux3g-vnufawgx?file=src%2Fapp.component.html,src%2Fapp.component.ts

 

If you have any concerns, please let us know.

 

Regards,
Sreedhar Kumar

[Stefan Habets]

Thank you, this was helpful. I can now find the correct HTML element by looping and comparing ids.

Although finding the HTML element using the row information would be even better.

[Shereen Shajahan]

Hi Stefan,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen