[Solved] Grid Edit/Delete buttons misaligned

[Rafael]

I am having an issue with the Telerik MVC Extensions Grid component (version 2011.3.1115).

I have created a sample app to demonstrate it (this is not an EF project and it will not persist data to a database):

1. Created a brand new MVC 3 Website;
2. Added a reference to Telerik MVC Extensions (version 2011.3.1115) using NuGet;
3. Created 2 model classes to illustrate my sample:

public class Address
{
    public int Key { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    [DataType(DataType.Date)]
    public DateTime DateMovedIn { get; set; }
}

public class Tenant
{
    public int Key { get; set; }
    public string CompanyName { get; set; }
    public string ContactName { get; set; }
    public IList<Address> Addresses { get; set; }
    public string Comments { get; set; }
}

HomeController.cs

public ActionResult Index()
{
    Tenant inputModel = new Tenant();
    inputModel.Addresses = new List<Address>();
    inputModel.Addresses.Add(new Address() { Key = 1, Address1 = "123 Main St", Address2 = "City, ST 00000", DateMovedIn = DateTime.Now });
    inputModel.Addresses.Add(new Address() { Key = 1, Address1 = "456 Last St", Address2 = "City, ST 00000", DateMovedIn = DateTime.Now });
    return View(inputModel);
}

The above code is used to created sample data to be displayed on the grid.

Index.cshtml

@using Telerik.Web.Mvc.UI;
@using TelerikGridSample.Models;

@model Tenant

@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("ProcessTenant", "Home"))
{
    <div>
        <label for="company_name">Company Name:</label>
        @Html.TextBoxFor(x => x.CompanyName, new { id = "company_name" })
    </div>
    <div>
        <label for="contact_name">Contact Name:</label>
        @Html.TextBoxFor(x => x.ContactName, new { id = "contact_name" })
    </div>

    <div style="width:600px;">
        @(Html.Telerik().Grid(Model.Addresses)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(o => o.Key).Visible(false);
                columns.Bound(o => o.Address1).Width(150);
                columns.Bound(o => o.Address2).Width(150);
                columns.Bound(o => o.DateMovedIn).Format("{0:MM/dd/yyyy}").Width(100).Title("Date of Birth");
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.Image);
                    commands.Delete().ButtonType(GridButtonType.Image);
                }).Width(100).Title("Edit  |  Delete");
            })
            .DataBinding(dataBinding => dataBinding.Ajax()
                .Select("_Select", "Home")
                .Update("_Save", "Home")
                .Delete("_Delete", "Home"))
            .DataKeys(keys => keys.Add(a => a.Key))
            .Editable(editing => editing.Enabled(true))
        )
    </div>
    <div>
       <label for="comments">Comments:</label>
       @Html.TextBoxFor(x => x.Comments, new { id = "comments" })
    </div>

    <div>
        <button type="submit" class="skin_color round_all">
            <span>Submit</span>
        </button>
    </div>
}

If you create an app like this, and run, you'll see the behavior on screenshot_1.png.

The grid/other fields need to be inside an Html.BeginForm as the data need to be posted to the HomeController.

I have read somewhere that by splitting the Html.BeginForm into two, you are able to overcome this problem.

So, if we change the Index.cshtml to the following:

@using Telerik.Web.Mvc.UI;
@using TelerikGridSample.Models;

@model Tenant

@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("ProcessTenant", "Home"))
{
    <div>
        <label for="company_name">Company Name:</label>
        @Html.TextBoxFor(x => x.CompanyName, new { id = "company_name" })
    </div>
    <div>
        <label for="contact_name">Contact Name:</label>
        @Html.TextBoxFor(x => x.ContactName, new { id = "contact_name" })
    </div>
    }
    <div style="width:600px;">
        @(Html.Telerik().Grid(Model.Addresses)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(o => o.Key).Visible(false);
                columns.Bound(o => o.Address1).Width(150);
                columns.Bound(o => o.Address2).Width(150);
                columns.Bound(o => o.DateMovedIn).Format("{0:MM/dd/yyyy}").Width(100).Title("Date of Birth");
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.Image);
                    commands.Delete().ButtonType(GridButtonType.Image);
                }).Width(100).Title("Edit  |  Delete");
            })
            .DataBinding(dataBinding => dataBinding.Ajax()
                .Select("_Select", "Home")
                .Update("_Save", "Home")
                .Delete("_Delete", "Home"))
            .DataKeys(keys => keys.Add(a => a.Key))
            .Editable(editing => editing.Enabled(true))
        )
    </div>
@using (Html.BeginForm("ProcessTenant", "Home"))
{
    <div>
       <label for="comments">Comments:</label>
       @Html.TextBoxFor(x => x.Comments, new { id = "comments" })
    </div>

    <div>
        <button type="submit" class="skin_color round_all">
            <span>Submit</span>
        </button>
    </div>
}

It takes care of the problem (see screenshot_2.png).

It got my hopes up, but when I create a method on the controller to take care of the post, I don't get the result that I was expecting:

[HttpPost]
public ActionResult ProcessTenant(Tenant model)
{
    // Do something here....
    return View();
}

If you add a breakpoint on the "return View();" line, and run the app, you will notice that only the Comments (part of the second Html.BeginForm) was posted to the Controller (because the submit button is inside the second Html.BeginForm). 

Is there anyway to fix the original layout glitch without causing side effects?

Thank you very much.
Rafael

[Rafael]

Anyone?