The simplest Editor Template in the World...

[Kevin]

I am trying to create an editor template for column in a Telerik MVC Grid.  After clicking edit this simple string column should show the same string value and next to it I would like to show a button or image with an onclick event.  

I CAN'T DO THIS?

I have found some really simple examples.  Let's forget about the button or image for now and just display the same damn string, based on instructions found in this article:
http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html

and:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= ViewData.TemplateInfo.FormattedModelValue %>

or:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Model %>

None of these work.  In fact, when I step into this server side, ViewData.TemplateInfo.FormattedModelValue and Model don't have a value.  What's going on?  What is it in the grid that is preventing this?  More complex Editor Templates like comboboxes persist the data back to the editor template.

How can I simply display the same text in an editor template with some further options like buttons that I will later change the data? 

Steve

[Rosen]

Hello Steve,

I guess you are using Ajax binding? If this is the case, this is a known limitation which unfortunately cannot be resolved. During ajax binding we instantiate a dummy model object by calling Activator.CreateInstance and render all editors for the columns because we need them on the client-side. It is not possible to invoke the editor template with all the valid values as it is created entirely on the client-side. That's why Model is null in this case.

If you need the actual model value on the client-side you can use the OnEdit client-side event and populate the editor template there.


In order the edit template code in question to work server binding should be used instead.

All the best,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kevin]

Rosen, 
Thank you for the reply.  However, I am unable to modify innerHTML of the cells in the grid in the onEdit event.  I get an error like "Unknown runtime error".  It seems to be kind of hit or miss when I can modify the innerHTML and outerHTML properties.  I have seen some chatter about this online about modifying these properties when a div is somewhere involved.

My "very dangerous" way around this has been to hack into Telerik's telerik.grid.editing.js file, trap when the columns are being set and when the column I want to change is up, do something different.  I don't like this solution.  

Do you have an example of what I am looking for.  Essentially, onEdit, I don't want to change this column (no textbox or anything), just add a button next to it.  If not, is there a way that I can use this modified 'hacked' telerik.grid.editing.js only for this specific grid and and not for everything else?

Steve

[Kevin]

This is killing me.  I've spent two days on this.  I can't believe there is no decent API to change a column in a grid during inline editing with popup or window that just changes that column.  I have to do all kinds of hacking to get the cancel event to work, which I haven't figured out yet, neither have I figured out adding a new record.  Not good!!! I don't think this is like some extraordinary feature.

THERE ISN'T ANY onCancel EVENT!!

[Kevin]

Rosen, 
Your idea of using the onEdit event, simply will not work, unless there is a onCancel available to the Grid Client API, which there is not.

Cancel is now broken and doesn't revert changes made in the onEdit event, back to the original state.

Steve

[Rosen]

Hi Steve,

I have attached a small sample which demonstrates how to use OnEdit event to modify edit form content to show a button and text of the column.

Best wishes,
Rosen
the Telerik team

[Kevin]

Rosen, 
Thank you for the example.  It definitely shows how to get around the .innerHTML and .outerHTML problems by using the jquery .prepend method.  So now I don't have to 'hack' the telerik.grid.editing.min.js for displaying the button.  

However, I still do have to hack it for canceling out any modifications done in this new button's onclick event.

I have attached your solution with changes that occur in the button onclick event, that can't be 'canceled'.  Could you take a look?

The problem seems to be this line below:

    dataItem.Name = productName;

function EditCell() {

    var productName = "Product XYZ"

    var grid = $("#Grid").data("tGrid");
    var row = $("#Grid").find('tr.t-grid-edit-row');
    var dataItem = grid.dataItem(row);

    dataItem.Name = productName;
    row[0].cells[0].innerHTML = productName + '<button type="button" class="t-button custom-button" onclick="EditCell()">Click me</button>';
}

I need that to persist the changes in the update method in the controller.

Also, this line throws an error when you try to ADD a row (which I added to this project).  Could you get the Cancel and Add features working?

Steve

[Kevin]

I stand correct on the cancel event.  I discovered that the update method will get the updated value without having to set the dataItem value in the button on click event.  Not sure I completely understand why at this point but I don't care right now.  Anyway, I am working on the "Add" event now.  If you have any insight, please share it.

Thanks!
Steve

[Kevin]

Rosen,
OK.  So the Insert is no problem, now.  If I have some time, I will take your example project, modify to demonstrate full circle, ADD, EDIT, and CANCEL.

I am very satisfied that I don't have to hack the telerik.grid.editing.min.js file.

Thanks,
Steve