Need highlighting of fields

[Dileep gagan R]

Hi,

We have certain editable fields in the grid with controls like textbox, dropdown and custom control and these are required. On editing however i am getting required field message but also we need control to be highlighted with red border. This is not happening. Kindly suggest on how to achieve it.

Thanks,

Dileep gagan R

[Shalini Maragathavel]

Hi Dileep, 

Greetings from Syncfusion Support. 

Based on your query we found that you want to highlight the custom control’s border with the required field message. You can achieve your requirement by adding  ‘e-cus’ class to the custom control. To add the custom class we suggest you to bind the click event to the Grid as demonstrated in the below code snippet, 

App.component.ts 

 

    

        <ejs-grid (click) ='clickFn($event)' #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                             ... 

 

              </e-columns> 

        </ejs-grid> 

 

 

    public ngOnInit(): void { 

        this.data = orderDataSource; 

         

    } 

// Grid’s click event function 

 

clickFn(e){ 

 

setTimeout(function(){ 

 

  let errorEle = this.grid.editModule.formObj.element.querySelectorAll('.e-error'); 

 

if(errorEle.length){ 

   for(let i=0; i< errorEle.length; i++){ 

     

      let errorInputEle = errorEle[i].classList.contains('e-ddl-hidden')? errorEle[i] : this.grid.editModule.formObj.element.querySelectorAll('input.e-error')[i] 

      if(errorInputEle){ 

      if(errorInputEle.classList[0].indexOf('hidden') !=-1){ 

        errorInputEle.parentElement.classList.add('e-cus') //adding class to custom control 

      } 

      else{ 

        errorInputEle.classList.add('e-cus') 

      } 

      } 

} 

} 

 

app.component.css 

 

.e-cus{ 

  border : 2px solid red !important; 

}    

 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/angular-l9qgfc-qkfbeg?file=app.component.ts 

 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

 

[Dileep gagan R]

Hi Dileep, 

Greetings from Syncfusion Support. 

Based on your query we found that you want to highlight the custom control’s border with the required field message. You can achieve your requirement by adding  ‘e-cus’ class to the custom control. To add the custom class we suggest you to bind the click event to the Grid as demonstrated in the below code snippet, 

App.component.ts 

 

    

        <ejs-grid (click) ='clickFn($event)' #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                             ... 

 

              </e-columns> 

        </ejs-grid> 

 

 

    public ngOnInit(): void { 

        this.data = orderDataSource; 

         

    } 

// Grid’s click event function 

 

clickFn(e){ 

 

setTimeout(function(){ 

 

  let errorEle = this.grid.editModule.formObj.element.querySelectorAll('.e-error'); 

 

if(errorEle.length){ 

   for(let i=0; i< errorEle.length; i++){ 

     

      let errorInputEle = errorEle[i].classList.contains('e-ddl-hidden')? errorEle[i] : this.grid.editModule.formObj.element.querySelectorAll('input.e-error')[i] 

      if(errorInputEle){ 

      if(errorInputEle.classList[0].indexOf('hidden') !=-1){ 

        errorInputEle.parentElement.classList.add('e-cus') //adding class to custom control 

      } 

      else{ 

        errorInputEle.classList.add('e-cus') 

      } 

      } 

} 

} 

 

app.component.css 

 

.e-cus{ 

  border : 2px solid red !important; 

}    

 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/angular-l9qgfc-qkfbeg?file=app.component.ts 

 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

 

Thank you, this works !!.. However it triggers only on clicking on other part of grid. but if I click outside of the grid only required message triggers but border doesn't highlight.

[Shalini Maragathavel]

Hi Dileep, 

Sorry for the inconvenience caused. 

Based on your query we found that you want to highlight the custom control’s border with the required field message. You can achieve your requirement by adding  ‘e-cus’ class to the custom control. To add the custom class we suggest you to bind the load event to the Grid as demonstrated in the below code snippet, 

App.component.ts 

 

   <ejs-grid   (load)="load($event)"  #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' width='700'> 

            <e-columns> 

               .... 

 

            </e-columns> 

        </ejs-grid> 

 

 

load(){ 

   

    document.addEventListener('click', function (e) { 

      

      setTimeout(function(){ 

  let errorEle = this.grid.editModule.formObj.element.querySelectorAll('.e-error'); 

 

if(errorEle.length){ 

   for(let i=0; i< errorEle.length; i++){ 

     

      let errorInputEle = errorEle[i].classList.contains('e-ddl-hidden')? errorEle[i] : this.grid.editModule.formObj.element.querySelectorAll('input.e-error')[i] 

      if(errorInputEle){ 

      if(errorInputEle.classList[0].indexOf('hidden') !=-1){ 

        errorInputEle.parentElement.classList.add('e-cus') 

      } 

      else{ 

        errorInputEle.classList.add('e-cus') 

      } 

      } 

} 

} 

 

}.bind(this), 100) 

 

    }.bind(this)) 

 

} 

} 

 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/angular-l9qgfc-tkihqk?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

 

[Dileep gagan R]

Thank you this solves my problem.

[Thiyagu Subramani]

Hi Dileep, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

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

Regards, 

Thiyagu S