Telerik MVC custom AJAX editor template

Question

I am using the MVC version of the Telerik controls with ASP.NET MVC and the razor view engine. I have an AJAX grid. When I click edit I want it to display the data in form style. But the issue is that I want to rearrange the in form controls they way that I want them to display. How would I do something like that? Currently the controls are all beneath each other. I want to create my own layout for editing.

I have a whole lot of other controls on the view, one of them being this grid. My view model object has a list of Children objects and I want to use my grid to populate this list.

The view model for my view:

public class EditGrantApplicationViewModel
{
   public string EmployeeNumber { get; set; }
   public string Title { get; set; }
   public string FirstName { get; set; }
   public string LastName { get; set; }
   // Other properties

   // I want this to be populated from the grid
   public IEnumerable<Children> Children { get; set; }
}

My grid's code for the Children list:

@(Html.Telerik().Grid(Model.Children)
   .Name("grdChildren")
   .Columns(column =>
      {
         column.Bound(x => x.Id);
         column.Bound(x => x.FullName);
      }
   )
   .DataKeys(keys =>
      {
         keys.Add(x => x.Id);
      }
   )
   .DataBinding(dataBinding =>
      {
         dataBinding.Ajax()
            .Select("_SelectAjaxEditing", "Grid")
            .Insert("_InsertAjaxEditing", "Grid")
            .Update("_SaveAjaxEditing", "Grid")
            .Delete("_DeleteAjaxEditing", "Grid");
      }
   )
   .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text))
   .Editable(editing => editing.Mode(GridEditMode.InForm))
)

I'm not sure how my editor template must look like? What must it extend? And I can't get it to show in the inline form. I worked through the sample from Brad Wilson but I am not getting it. Can someone please explain what is happening?

Just another questions.. On my other page I have a grid with other HTML controls on the page. If I am busy editing data in the grid, and click insert, how would I prevent the other controls on the page not to be validated?

Answer 1

You can define a custom editor template for your model and arrange the fields as you wish. This code library project shows how.