1. Home
  2. Forum
  3. Angular - EJ 2
  4. edit grid miss the bottom line when new row position is bottom

edit grid miss the bottom line when new row position is bottom

Hi,

When I click add,  the new row bottom line is miss, I think the line is move up to last row, this is a bug?





16 Replies
AG Ajith Govarthan Syncfusion Team July 13, 2021 03:38 AM UTC

Hi lorryl, 

Thanks for contacting Syncfusion support. 

Query: When I click add,  the new row bottom line is miss, I think the line is move up to last row, this is a bug? 
 
Based on your query you are facing bottom line issue while adding the record in your Grid application. So, before we proceed to your query, please share the below details to find the root cause of the issue. 

  1. Share the complete Grid code example.

  1. If possible, please share the issue reproducible sample.
 
  1. Are you facing the issue while adding on the top position also?
 
  1. Share the Syncfusion package version.
 
Regards, 
Ajith G. 


AG Ajith Govarthan Syncfusion Team July 19, 2021 01:08 PM UTC

Hi Lorryl,   

Thanks for your update. 
   
We can reproduce the reported behavior at our end. We have confirmed this is an issue from our side and logged a bug for the same as “Borderline is not applied when edit form rendered at bottom for adding a row”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on Aug 4th, 2021.   

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
  
You can resolve this by using following CSS.  

[app.component.css]  
 
  
 .e-row.e-addedrow .e-editcell.e-normaledit {  
  border-style: solid;  
  border-width: 0 0 1px 0;  
  border-color: #e0e0e0;  
}  
  

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

Regards,   
Ajith G. 



AG Ajith Govarthan Syncfusion Team August 10, 2021 01:29 AM UTC


Hi lorryl, 

Thanks for the patience. 

We are glad to announce that our Essential Javascript2 patch release (v19.2.51) has been rolled out successfully and in that release we have added the fix for the issue - “Borderline is not applied when edit form rendered at bottom for adding a row”. So please update your packages to this version to include the fix. 


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Ajith G. 


LO lorryl December 8, 2021 09:06 AM UTC

Hi,

It seems not work for columns using the "*ngFor". Add and Edit the last row both not work.

Please check!

https://stackblitz.com/edit/angular-ryyg4v?file=app.component.ts







LO lorryl December 15, 2021 09:43 AM UTC

Do you have any idear?


AG Ajith Govarthan Syncfusion Team December 16, 2021 03:58 AM UTC

Hi lorryl, 

Thanks for the update. 

Based on your query, you want to use ng*For in your edit template to generate the elements dynamically in your Grid application. So, we have checked your sample and found that you have rendered the td elements alone instead of td and input elements. So, we have modified your attached sample and dynamically generated the input elements for columns using the *ngFor. For your convenience, we have attached the sample, please refer them for your reference. 


Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


LO lorryl replied to Ajith Govarthan December 16, 2021 08:54 AM UTC

I saw your example. My problem is that when editing the last record or adding a new record, there is no line at the bottom of the line being edited. This is a bug...



AG Ajith Govarthan Syncfusion Team December 21, 2021 03:20 AM UTC

Hi lorryl, 

Thanks for the update. 

We have checked your reported issue and able to reproduce the same at our end. Currently, we are validating your reported behavior at our end we will update further details 23rd  December 2021. 

Until then we appreciate your patience. 

Regards, 
Ajith G. 


AG Ajith Govarthan Syncfusion Team December 27, 2021 03:28 AM UTC

Hi lorryl, 

Thanks for the patience. 

Based on your you want to dynamically generate the input elements for edit template and also want to show the bottom line properly for last row when you add and edit the rows. So, we have prepared custom sample in that we have dynamically created td elements for the edit template and the bottom lines also added properly when you add and edit the rows. For your convenience, we have attached the sample, please refer them for your reference. 

Code Example: 
App.component.ts 

template = ` <div ngForm #orderForm="ngForm"> 
  <table class="e-table e-inline-edit" cellspacing="0.25"> 
    <colgroup > 
      <col style="width: 120px;" /> 
      <col style="width: 120px;" /> 
      <col style="width: 120px;" /> 
      <col style="width: 120px;" /> 
      <col style="width: 120px;" /> 
    </colgroup> 
    <tbody> 
      <tr> 
        <td class="e-rowcell" > 
          <div class="e-input-group"> 
            <input 
              class="e-input e-field" 
              type="text" 
              #OrderID 
              style="text-align: right" 
            /> 
          </div> 
        </td> 
        <td class="e-rowcell" > 
        <div class="e-input-group"> 
          <input 
            class="e-input e-field" 
            type="text" 
            #OrderID 
            style="text-align: right" 
          /> 
        </div> 
      </td> 
      <td class="e-rowcell" > 
      <div class="e-input-group"> 
        <input 
          class="e-input e-field" 
          type="text" 
          #OrderID 
          style="text-align: right" 
        /> 
      </div> 
    </td> 
    <td class="e-rowcell" > 
    <div class="e-input-group"> 
      <input 
        class="e-input e-field" 
        type="text" 
        #OrderID 
        style="text-align: right" 
      /> 
    </div> 
  </td> 
  <td class="e-rowcell" > 
  <div class="e-input-group"> 
    <input 
      class="e-input e-field" 
      type="text" 
      #OrderID 
      style="text-align: right" 
    /> 
  </div> 
</td> 
      </tr> 
    </tbody> 
  </table> 
</div>`; 

  finalTemplate = ''; 

  editSettingsTemplateHeader = `  <div ngForm #orderForm="ngForm"> 
<table class="e-table e-inline-edit" cellspacing="0.25">`; 

  prepareTemplate(columns) { 
    let colgroup = createElement('colgroup'); 

    columns.filter((index) => { 
      let col = createElement('col'); 
      col.style.width = '120px'; 
      colgroup.appendChild(col); 
    }); 
    console.log(colgroup); 
    this.finalTemplate = this.editSettingsTemplateHeader + colgroup.outerHTML; 
    console.log(this.editSettingsTemplateHeader + colgroup.outerHTML); 
    this.renderBodyTemplate(columns); 
  } 

  renderBodyTemplate(columns) { 
    let tbody = createElement('tbody'); 
    let tr = createElement('tr'); 

    columns.filter((col) => { 
      let td = createElement('td'); 
      td.classList.add('e-rowcell'); 
      let divEle = createElement('div'); 
      divEle.classList.add('e-input-group'); 
      let inputEle = createElement('input'); 
      inputEle.classList.add('e-input'); 
      inputEle.classList.add('e-field'); 
      inputEle.id = col.field; 
      inputEle.style.textAlign = 'right'; 
      inputEle.setAttribute('name', col.field); 
      divEle.appendChild(inputEle); 
      td.appendChild(divEle); 
      tr.appendChild(td); 
    }); 

    tbody.appendChild(tr); 

    this.finalTemplate = 
      this.finalTemplate + tbody.outerHTML + '</table></div>'; 

    console.log(this.finalTemplate); 
  } 

…. 

   this.editSettings = { 
      allowEditing: true, 
      allowAdding: true, 
      allowDeleting: true, 
      mode: 'Normal', 
      template: this.finalTemplate, 
      newRowPosition: 'Bottom', 
    }; 



Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


LO lorryl December 28, 2021 09:03 AM UTC

Hi,

Does the Yellow sentence matter? It has no effect after I delete it on the last sample.



Your example is too complicated. Why not simply modify it on the example?

https://stackblitz.com/edit/angular-ryyg4v-wuu6pt?file=app.component.html 


I can't create an interface like your example.


If I insist on using such a for loop, how do I deal with this missing bottom line problem ?



LO lorryl December 28, 2021 09:10 AM UTC

Another question,

If I set the grid's enableVirtuallization is "true", the bottom line is missing after load data.

https://stackblitz.com/edit/angular-mvswkv?file=app.component.html





AG Ajith Govarthan Syncfusion Team December 30, 2021 02:15 AM UTC

Hi lorryl 

Thanks for the update. 

Query: Does the Yellow sentence matter? It has no effect after I delete it on the last sample. Your example is too complicated. Why not simply modify it on the example? 

In our previous example we have generated the edit template as string element and assigned to the template property of the editSettings property. So, when you remove the template property grid will render its own default input elements to perform the Edit or add operations. Template is used to render the input elements as per the user requirements. 

We have also found that you felt complex with provided solution. So, currently we are validating on your requirement at our end and we will update further details on 31st December 2021. 

Until then we appreciate your patience. 

Query: If I set the grid's enableVirtuallization is "true", the bottom line is missing after load data. 
 
We have checked your attached sample and found that you have used virtualization in your Grid application. By default, in our EJ2 Grid when you enable virtualization you need to load the records more than the height of the Grid component and virtualization is used to handle large amount of data without performance issue in our EJ2 Grid. The virtualization will work based on the height of the Grid component. 

 So, we suggest you load more amount of data or adjust the Grid component height less then total rows height to load the data properly in the Grid component. Please refer the below sample, for your reference. 


Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


AG Ajith Govarthan Syncfusion Team January 3, 2022 03:59 AM UTC

Hi lorryl,  

Sorry for the inconvenience. 

Currently, we are facing some complexities with reported issue at our end. So, we have taken your reported issue as high priority one and we will update further details on 4th January 2022.  

Until then we appreciate your patience.  

Regards,  
Ajith G. 


SK Sujith Kumar Rajkumar Syncfusion Team January 4, 2022 02:45 PM UTC

Hi Lorryl, 

We are facing some complexities with the issue from our end and we are working on it with high priority. We will update you the further details on or before 6th January 2022. 

We apologize for the inconvenience caused and appreciate your patience until then. 

Regards, 
Sujith R 


PS Pavithra Subramaniyam Syncfusion Team January 7, 2022 09:19 AM UTC

Hi Lorryl, 
 
Thanks for your patience. 
 
To resolve the bottom-line missing issue with edit template, we suggest you to set the “e-lastrowadded” class for the td element along with “e-rowcell” class. Please refer to the below sample link for more information. 
 
<td style="text-align: right" class="e-rowcell e-lastrowadded" *ngFor="let item of cols"> 
 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S 


Loader.
Up arrow icon