Remove cell bottom line in grid edit mode

[Eddie Willcox]

Hi,

In my view, i have a grid using the material theme. When I started editing the grid, the editable cells have a line at the bottom of the cell. Is it possible to remove this line?

[Pavithra Subramaniyam]

Hi Eddie, 

 

Thanks for contacting Syncfusion support. 

 

From your query we understood that you want to remove the border line below the edited cells as highlighted in the below image. 

 

 

 

If so, you can achieve your requirement by add/remove a custom class to the next row element and set the border style using this class. Please refer to the below code example for more information 

 

@Html.EJS().Grid("Edit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionBegin("actionBegin").ActionComplete("actionComplete").Columns(col => 

{ 

    .  .  . 

 

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

 

<script> 

    function actionBegin(args) { 

  if (args.requestType === 'beginEdit') { 

    var index = args.rowIndex + 1; 

    document.querySelectorAll('.e-grid .e-content tr') 

      [index].classList.add('e-custom'); 

  } 

} 

function actionComplete(args) { 

  if (args.requestType === 'save' || args.requestType === 'cancel') { 

    var index = args.rowIndex + 1; 

    document.querySelectorAll('.e-grid .e-content tr') 

      [index].classList.remove('e-custom'); 

  } 

} 

  </script> 

  <style> 

    .e-grid tr.e-row.e-custom .e-rowcell { 

      border-top-width: 0; 

    } 

  </style> 

 

 

If this doesn’t meet your requirement, please share the below details that will be helpful for us to understand the scenario and provide an appropriate solution. 

 

1. Share the pictorial representation
2. Share the Grid code example to know the edit type and other grid settings
3. Share the package version

 

Regards, 

Pavithra S 

[Eddie Willcox]

Hi,

Your example did not work as expected. The image you supplied is exactly what I mean. That border in your image at the bottom is what needs to go away.

My grid is quite large (a lot of columns) and most edit types are numeric or text.

One of the columns is also a template column that creates a text input. I have tried overriding the style and class on the template, but it does not remove the line at the bottom of the text field.

The package version is 19.4.0.41

[Rajapandiyan Settu]

Hi Eddie,  

Before proceeding with your query, we need following details to validate further on this. 

1. Share the video demo of the issue which will very helpful for us.
2. Share the complete Grid code and template code.
3. Which type of Editing you have used (Inline/Batch)?
4. Are you using any custom CSS in your project? Share the CSS is any.

Note: You can also use below CSS style to hide bottom borderline of the edited row. 

    <style> 

      tr.e-row.e-editedrow + tr .e-rowcell { 

        border-top-width: 0; 

      } 

    </style> 

Regards,  

Rajapandiyan S