[Solved] Editor template in grid is disabled

[Michael]

I'm trying to use the editor template "Html.Telerik().Editor() ", within the grid.  When I try to insert, the grid is disabled, and I can't input characters into the grid. I'm using ajax binding.

I was using the following link as an example, but that example is using server binding, I'm not sure if I need to make any further changes:
http://demos.telerik.com/aspnet-mvc/editor/editoringrid

My code:

My editor template:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>  
<%= Html.Telerik().Editor()           
     .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))           
      .Value(Model)          
       .Tools(tools => tools         
           .Clear()             
           .Bold().Italic().Underline()    
           .Separator()          
           .CreateLink().Unlink()  
       ) 
%>


I defined my field to use the editor template:
        [UIHint("Editor")]
        [Required]
        [DisplayName("Notes")]
        public string Notes
        {
            get;
            set;
        }

My controller methods:
        [GridAction]
        public ActionResult SelectStudentFollowups(int id)
        {
            return View(new GridModel(new ClientDataContext().StudentFollowups.Where(s => s.StudentID == id)));
        }

[HttpPost]
        [GridAction]
        public ActionResult InsertStudentFollowup(int id)
        {
            StudentFollowup followup = new StudentFollowup();

            followup.StudentID = id;
            followup.Notes = HttpUtility.HtmlDecode(followup.Notes);
            //Perform model binding (fill the customer properties and validate it).
            if (TryUpdateModel(followup))
            {
                //The model is valid - insert the customer.
                studentRepository.InsertStudentFollowup(followup);
                studentRepository.Save();
            }

            //Rebind the grid
            return View(new GridModel(new ClientDataContext().StudentFollowups.Where(s => s.StudentID == id)));

        }

        [AcceptVerbs(HttpVerbs.Post)]
        [GridAction]
        public ActionResult UpdateStudentFollowup(int id)
        {
            StudentFollowup followup = studentRepository.GetStudentFollowup(id);

            int studentID = followup.StudentID;

            followup.Notes = HttpUtility.HtmlDecode(followup.Notes);

            UpdateModel(followup);
            studentRepository.Save();
            return View(new GridModel(new ClientDataContext().StudentFollowups.Where(s => s.StudentID == studentID)));

        }

The part of the view that renders the grid:
 items.Add().Text("Followup").Content(
                             Html.Telerik().Grid<Client.Models.StudentFollowup>()
                                 .Name("Followup_<#= StudentID #>")
                                 .ToolBar(commands => commands.Insert())
                                 .DataKeys(keys => keys.Add(f => f.StudentFollowupID))
                                 .Columns(columns =>
                                 {
                                     columns.Bound(d => d.DueDate).Width(60).Format("{0:d}").Title("Due Date").Width(150);
                                     columns.Bound(d => d.Notes).Title("Notes").Width(600).Encoded(false);
                                     columns.Command(command =>
                                     {
                                         command.Edit();
                                         command.Delete();
                                     });
                                 })
                                 //.Editable(editable => editable.Mode(GridEditMode.PopUp))
                                 .Sortable()
                                 .DataBinding(dataBinding => dataBinding.Ajax()
                                     .Insert("InsertStudentFollowup", "Student", new { id = "<#= StudentID #>" })
                                     .Update("UpdateStudentFollowup", "Student", new { id = "<#= StudentID #>" })
                                     .Delete("DeleteStudentFollowup", "Student", new { id = "<#= StudentID #>" })
                                     .Select("SelectStudentFollowups", "Student", new { id = "<#= StudentID #>" }))
                                 .ToHtmlString());

[Atanas Korchev]

Hi Michael,

 We need some additional info about your case. Is your grid part of another grid? Does it work if it is on its own?

 I created a sample project where the grid is stand alone. 

Greetings,
Atanas Korchev
the Telerik team

[Remco Dekkers]

Hi Michael,

I saw your message on the thread: http://www.telerik.com/community/forums/aspnet-mvc/editor/editor-not-workin-with-grid-using-ajax.aspx

What I did was bind to the client events

.ClientEvents(events => events.OnEdit("onEdit").OnRowDataBound("onRowDataBound").OnRowSelected("onRowSelected").OnError("onError").OnSave("onSave").OnDataBound("onDataBound"))

Then on the client even onEdit I set the data to the editor

if (e.dataItem) {
    $('#Description').data('tEditor').value(e.dataItem.Description);

You need to replace "Description" with your fieldname which I assume is notes.
I further found that in version 2010.3 the save and cancel buttons are not always working correctly in IE9 when opening the popup the second time without refreshing the page. You can fix it by calling this function in onEdit

function FixPopupButtons() {
    $('.t-grid-insert').addClass('invisible').after('<a id="myInsert" class="t-button">Insert..</a>');
    $('.t-grid-update').addClass('invisible').after('<a id="myUpdate" class="t-button">Update..</a>');
    $('.t-grid-cancel').addClass('invisible').after('<a id="myCancel" class="t-button">Cancel..</a>');

    $('#myInsert').click(function (e) {
        $('.t-grid-insert').click();
    });

    $('#myUpdate').click(function (e) {
        $('.t-grid-update').click();
    });

    $('#myCancel').click(function (e) {
        $('.t-grid-cancel').click();
    });
}

I hope it helps.

[Remco Dekkers]

Hi Atanas,

I changed your example a little so it can insert and update and works with a popup. When you use it in IE9 it doens't work correctly when you try to update or insert an item the second time. I included teh changed source and a video to show it. Watch the red circle the second time (it means a click). It's not possible to select the editor.

Regards,
Remco.

[Michael]

Hi Atanas and Remco,  thanks for the help, I really appreciate it.

Regarding the onedit event.

if (e.dataItem) {

$('#Notes').data('tEditor').value(e.dataItem.Notes);

I have this field in a tab callled Followup as part of the grid.  Do i need to prefix my field name somehow with Followup_Notes?  Because when I try to insert a new record, i get the following error:

Microsoft JScript runtime error: Unable to get value of the property 'value': object is null or undefined

[Remco Dekkers]

Hi Michael,

That's possible. It depends on how the html is generated. If you use IE8 or higher you can press F12 to enable the developer tools and find the element. Then see what the "id" is. You may need to click refresh in the developer tools to find the element, since the popup is loaded later.

Good luck

Remco.

[Michael]

Atanas,

I have 1 grid but am using tabs, and this editor is on the 4th tab.

Without using Remco onEdit method, while trying to insert a record inline in the grid, the editor is disabled, and I can't type letters into the editor.

And then if i hit cancel, since the field notes is required and i can't enter data, i get the following error:

Microsoft JScript runtime error: Unable to get value of the property '-1': object is null or undefined

on the telerik.gird.min.js file at the line of code that reads:

return

 

 

this.data[this.$tbody.find("> tr:not(.t-grouping-row,.t-detail-row,.t-grid-new-row,.t-group-footer)").index(e(l))]

 

 

[Atanas Korchev]

Hi Michael,

 I modified my sample project so the grid is inside a tabstrip. Still the editor seems to work as can be seen in this video. Find attached my project. Does it work at your side? What is different in your setup?

Regards,
Atanas Korchev
the Telerik team