Grid with ng-template: issue navigation keys and data manipulation

[Doan]

I use ng-template input in e-column grid

I have issues

1. When i click input and use navigation keys to move pointer to left or right charector in input but it's move to previous/next cell. what should I do

2. I can not select all text in input by press CTRL+A

code example:

 <ejs-grid #gridDetail [dataSource]='acm5040Request.datagrid2' height='150' [gridLines]="lines" allowResizing='true'>

      <e-columns>

          <e-column field="ARTICLE" headerText="{{'acm_5040_w.ARTICLE'|translate}}" width="150">

               <ng-template #template let-item>

                     <input class="e-input e-small " type="text" [(ngModel)]="item.ARTICLE"

                   (change)="changeTextVal(item,$event,'ARTICLE')" [readOnly]="!dynamicEnabled">

               </ng-template>

          </e-column>

         <e-column field="ITEM_SPEC" headerText="{{'acm_5040_w.ITEM_SPEC'|translate}}" width="150">

               <ng-template #template let-item>

                    <input class="e-input e-small cls_w100" type="text" [(ngModel)]="item.ITEM_SPEC"

                   (change)="changeTextVal(item,$event,'ITEM_SPEC')" [readOnly]="!dynamicEnabled" />

               </ng-template>

         </e-column>

     </e-columns>

</ejs-grid>

[Thiyagu Subramani]

Hi Doan, 

Thanks for contacting Syncfusion support. 

Queries: When i click input and use navigation keys to move pointer to left or right character in input but it's move to previous/next cell. what should I do & I cannot select all text in input by press CTRL+A 

 

Based on your shared information we have achieved your requirement by overriding our default arrowLeft, arrowRight and contolplusA key Configurations as empty string while focusing the required input using focus event and then applied our key Configurations while focus out the required input using blur event.  

Please refer to the below code sample link. 

<e-column field='CustomerID' headerText='Employee ID' width='125' textAlign='Right'> 

        <ng-template #template let-item> 

          <input class="e-input e-small " type="text" (blur)="onBlur()" (focus)="onFocus()" [(ngModel)]="item.CustomerID" 

                   (change)="changeTextVal(item,$event,'CustomerID')" > 

               </ng-template> 

      </e-column> 

      <e-column field='CustomerName' headerText='Customer Name' width='120'> 

        <ng-template #template let-data> 

          <input class="e-input e-small " type="text" (blur)="onBlur()" (focus)="onFocus()" [(ngModel)]="data.CustomerName" 

                   (change)="changeTextVal(item,$event,'CustomerName')" > 

                </ng-template> 

      </e-column> 

onFocus(args) {  

    this.grid.keyConfigs.rightArrow = ""; 

    this.grid.keyConfigs.leftArrow = ""; 

    this.grid.keyConfigs.ctrlPlusA = ""; 

  } 

  onBlur(args) { 

    this.grid.keyConfigs.rightArrow = "rightarrow"; 

    this.grid.keyConfigs.leftArrow = "leftarrow"; 

    this.grid.keyConfigs.ctrlPlusA = "ctrl+A"; 

  } 

Sample link: https://stackblitz.com/edit/angular-8vruhr-wuggry?file=app.component.html 

Please get back to us, if you need any further assistance. 

Regards. 

Thiyagu S 

[Doan]

Thank you so much!!!!!!

[Doan]

I try it, But an error occurred Property 'keyConfigs' is private and only accessible within class 'Grid'.

What should I do????

[Thiyagu Subramani]

Hi Doan, 

Thanks for your update. 

Based on your shared information we suggest to use below code to overcome this reported problem. 

onFocus(args) { 

    (this.grid as any).keyConfigs.rightArrow = ""; 

    (this.grid as any).keyConfigs.leftArrow = ""; 

    (this.grid as any).keyConfigs.ctrlPlusA = ""; 

  } 

  onBlur(args) { 

    (this.grid as any).keyConfigs.rightArrow = "rightarrow"; 

    (this.grid as any).keyConfigs.leftArrow = "leftarrow"; 

    (this.grid as any).keyConfigs.ctrlPlusA = "ctrl+A"; 

  } 

 

Reference Sample: https://stackblitz.com/edit/angular-8vruhr-9qfa8e?file=app.component.ts 

 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S