This project is read-only.

Themed grid example & Reset grid button

Dec 10, 2014 at 10:07 AM
Edited Dec 10, 2014 at 10:07 AM
I'd like to move the reset grid button just becide add new record button. I did it by moving code into InsertTemplate in DataGrid.cshtml as follows:
<td colspan='@count' class="Theme-DataGrid-Column">
  htmlHelper, DataButtonType.Insert,
  Url.Content("~/Content/themes/test/images/add.jpg"), null)
  @Html.ManipulationButton(ManipulationButtonType.ResetGrid, "Reset", m => m.ToDoList, null, ManipulationButtonStyle.Button)
Button is shown on wanted position, but it reverts changes on the first click only. Another click has no effect. What is wrong with this approach? Must be the reset grid button outside the grid?
Dec 12, 2014 at 5:24 PM
the code belows works properly:
<td colspan='@count' class="Theme-DataGrid-Column">
            htmlHelper, DataButtonType.Insert, 
            Url.Content("~/Content/themes/test/images/add.jpg"), null)
            @ButtonHelpers.ManipulationButton(options.HtmlHelper, ManipulationButtonType.ResetGrid, "Reset", options.ToShow, null, ManipulationButtonStyle.Button)
The reason the above works are:
  1. it uses options.HtmlHelper that is the original View HtmlHelper passed in to the temed grid in the options argument.
  2. It doesnt use extension methods that cannot be used with dynamic variables (all oprions properies are dynamic propertie), but calls the original static method that defines the ManipulationButton extension method.
  3. It uses options.ToShow that contains exactly m => m.ToDoList but it has been created with the right instantiations of the involved generics. While the razor compiler is not able to infer the types of the generics from m => m.ToDoList (it is an Expression<Func<M, T>> but if you insert directly in the DataGrid.cshtml file the Razor compiler is not able to infer M andT). Moreover, the insertion of m => m.ToDoList in the grid definition that is supposed to work with any datatype breks the Themed grid encapsulation and makes it depend on the code that uses the Grid.
Dec 12, 2014 at 6:13 PM
Edited Dec 12, 2014 at 6:15 PM
Hi Frank,

thank you for your support. You are rigth with specific model dependency, I didn't notice before.

I've copied&pasted the code above into example and tested it: unfortunately the problem persists (I tested it with the my wrong code from the OP and the result is the same). I apologize for not specifying a problem accuratelly in the OP:
  1. In both cases (my and yours), the RESET button works properly on any number of any rows modified by EDIT button: it reverts changes and test can be repeated
  2. But if I add a new empty row and revert it using RESET button and repeat this step i.e. I add another new empty row, RESET button has no effect (even on rows modified by EDIT command in the same test)
  3. If I add a new empty row and type-in some text and/or choose a date, the malfunction is the same: RESET grid works only
Dec 13, 2014 at 12:11 AM
It is a name collision problem. This should solve it:
@ButtonHelpers.ManipulationButton(options.HtmlHelper, ManipulationButtonType.ResetGrid, 
                "Reset", options.ToShow, 
                BasicHtmlHelper.AddField(htmlHelper.ViewData.TemplateInfo.HtmlFieldPrefix, "resetButton"), 
The line BasicHtmlHelper.AddField(htmlHelper.ViewData.TemplateInfo.HtmlFieldPrefix, "resetButton") gives an explicit name to the button, that depends on the row it belongs to since I used the HtmlFieldPrefix prefix of the row helper. Otherwise, a default name that is equal for all rows is given, and this creates name collisions. The HtmlFieldPrefix is different for each row, this way each button has a different name, so name conflicts are impossible.
The problem depends of the nature of this button that is designed to be out of any grid row, so it needs just a name that depends just on the collection the grid is applied to. However when you insert the button in the insert template, during the grid operation several buttons are created and destroyed, as new insert rows are created and destroyed. Now, when they have the same name the destruction of a button cause also the destruction(actually the destruction of the jQuery click handler attached to the button) of the button in a newly created row, since they have the same id.