Progress® Telerik® UI for ASP.NET MVC Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 11 Jan 2021 14:34 by ADMIN
Robert
Created on: 11 Feb 2020 14:18
Category: Grid
Type: Bug Report
0
Clicking the grids inline 'Cancel' button overwrites all CSS classes in a TR (row)

Good Day,


I have a custom CSS CLASS that renders the background-color of the grids TABLE ROW to 'yellow'.  

  • tr.background-color-yellow td { background-color: #FFFFCC; }

For example...the above CSS CLASS would 'color' the backgrounds of a TR's set of TD's.

<!-- Here is an example of the initial HTML containing the custom CSS CLASS  -->
<tr data-uid="7044a8d8-2946-43f4-9f94-01bff52d2800" role="row" class="background-color-yellow">
	<td role="gridcell">11</td>
	<td role="gridcell">1111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td class="k-command-cell" role="gridcell">
		<a role="button" class="k-button k-button-icontext k-grid-edit" href="#">
			<span class="k-icon k-i-edit"></span>Edit 
		</a>
		<a role="button" class="k-button k-button-icontext k-grid-delete" href="#">
			<span class="k-icon k-i-close"></span>Delete
		</a>
	</td>
</tr>

THE ISSUE
When using inline-editing on the grid...pressing the CANCEL button wipes-out & replaces any-and-all custom CSS tags in the TR.

<!-- Here is an example of the initial HTML AFTER PRESSING CANCEL...notice the custom CSS CLASS is gone -->
<tr data-uid="7044a8d8-2946-43f4-9f94-01bff52d2800" role="row">
	<td role="gridcell">11</td>
	<td role="gridcell">1111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td class="k-command-cell" role="gridcell">
		<a role="button" class="k-button k-button-icontext k-grid-edit" href="#">
			<span class="k-icon k-i-edit"></span>Edit 
		</a>
		<a role="button" class="k-button k-button-icontext k-grid-delete" href="#">
			<span class="k-icon k-i-close"></span>Delete
		</a>
	</td>
</tr>

THE WORK AROUND
This bug causes the following kinds of work-around...which I feel is unacceptable.

this.on = {
	cancel: {
		grid: function (e) {

			var isTemplatedRow = e.model.IsTemplatedRow;
			if (isTemplatedRow === false) {

				// HACK: Kendo overwrites the (tr) rows ENTIRE SET of CSS CLASSES after a 'cancel' is triggered
				var uid = e.container.data().uid;
				var $context = $(e.container.context);
				setTimeout(function () {

					// Add the expected class back-in
					var $ele = $('tr[data-uid=' + uid + ']', $context)
					$ele.addClass('background-color-yellow');
				}, 400);
			}
		}
	}
};

 

3 comments
ADMIN
Georgi
Posted on: 25 Feb 2020 12:17

Hi Robert,

Thank you for the sample.

Currently the class is set within the dataBound event handler of the grid, however, when pressing cancel changes the grid is not rebound but simply restores the html of the current row. 

A possible solution would be to apply the class also within the itemChange event handler.

e.g.

    $(document).ready(function () {

        var options = {};
        window.pageController = new PageController(options);

        @Html.Kendo().DeferredScripts(false)

        $('#grid').data('kendoGrid').bind('itemChange', function () {
            window.pageController.on.dataBind.rows(this.tbody);
        })
    });

Please test the above approach and let me know if it works for you.

I look forward to your reply.

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Robert
Posted on: 18 Feb 2020 14:35

Good Morning,

I've attached a sample project that replicates the issue.  Please note...this sample was used in a previous question I had regarding ClientHandlerDescriptor's.  That said...this happens for normal DataSource's too.

STEPS TO REPLICATE:

  • Open the application to the Index (page)
  • Choose 'add new record' & enter some data (any data)
     - Notice the background-color is yellow
  • Choose 'update'
  • Choose 'edit'
  • Choose 'cancel'...the CSS containing background-color gets wiped-out

 

Cheers!

 - Rob

Attached Files:
ADMIN
Georgi
Posted on: 18 Feb 2020 10:24

Hi Robert,

How do you apply the custom class? Is it within the DataBound event handler?

Would it be possible to also provide us with your configuration?

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Create an account Log In
View
Type
Status
Category