[Solved] Cell formatting and alignment completely changes when using inline edit mode

[Carey]

Hello,

Using the MVG Grid in server binding mode, whenever I place a row in edit mode using the inline edit the columns are completely misaligned and cell widths are not preserved.

Here is my grid declaration:

@{Html.Telerik().Grid<DSAdmin.PROCESS_OBJECT>(Model)
        .Name("Jobs")
        .ToolBar(commands =>
        {
            commands.Insert();
            commands.Custom()
                    .HtmlAttributes(new { id = "copy" })
                    .Text("Copy to..." + Enum.GetName(typeof(BODSEnvironments), ViewData["TargetEnvironment"]))
                //When the row selection changes, the jobID param is modified by the function updateCopyURL to ensure the ID of the process object is passed to the controller
                    .Action("CopyJob", "Job", new { jobID = "", environment = ViewData["Environment"], targetEnv = ViewData["TargetEnvironment"], mode = mode, type = type, pageInput = ViewData["pageInput"], nextPrevious = ViewData["nextPrevious"], numeric = ViewData["numeric"], position = position, currentPage = (int)ViewData["currentPage"], pageSize = ViewData["pageSize"] });
            commands.Custom()
                    .HtmlAttributes(new { id = "clone" })
                    .Text("Clone")
                //When the row selection changes, the jobID param is modified by the function updateCopyURL to ensure the ID of the process object is passed to the controller
                    .Action("CloneJob", "Job", new { jobID = "", environment = ViewData["Environment"], targetEnv = ViewData["TargetEnvironment"], mode = mode, type = type, pageInput = ViewData["pageInput"], nextPrevious = ViewData["nextPrevious"], numeric = ViewData["numeric"], position = position, currentPage = (int)ViewData["currentPage"], pageSize = ViewData["pageSize"] });
            commands.Custom()
                .HtmlAttributes(new { id = "create" })
                .Text("Create from Template")
                .Url("javascript:showCreateDialog();");
        })
        .DataKeys(keys =>
        {
            keys.Add(c => c.OBJECT_ID);
        })
        .DataBinding(dataBinding => dataBinding
            .Server()
                .Select("ProcessObject", "Job", new { environment = ViewData["Environment"], targetEnv = ViewData["TargetEnvironment"], mode = mode, type = type, pageInput = ViewData["pageInput"], nextPrevious = ViewData["nextPrevious"], numeric = ViewData["numeric"], position = position, currentPage = (int)ViewData["currentPage"], pageSize = ViewData["pageSize"] })
                .Insert("Insert", "Job", new { environment = ViewData["Environment"], targetEnv = ViewData["TargetEnvironment"], mode = mode, type = type, pageInput = ViewData["pageInput"], nextPrevious = ViewData["nextPrevious"], numeric = ViewData["numeric"], position = position, currentPage = (int)ViewData["currentPage"], pageSize = ViewData["pageSize"] })
                .Update("Save", "Job", new { environment = ViewData["Environment"], targetEnv = ViewData["TargetEnvironment"], mode = mode, type = type, pageInput = ViewData["pageInput"], nextPrevious = ViewData["nextPrevious"], numeric = ViewData["numeric"], position = position, currentPage = (int)ViewData["currentPage"], pageSize = ViewData["pageSize"] })
                .Delete("Delete", "Job", new { environment = ViewData["Environment"], targetEnv = ViewData["TargetEnvironment"], mode = mode, type = type, pageInput = ViewData["pageInput"], nextPrevious = ViewData["nextPrevious"], numeric = ViewData["numeric"], position = position, currentPage = (int)ViewData["currentPage"], pageSize = ViewData["pageSize"] }))
        .Columns(columns =>
        {
            columns.Bound(o => o.OBJECT_ID).Title("Object ID").ReadOnly(true);
            columns.Bound(o => o.PROCESS_OBJECT_TYPE).Title("Object Type").Sortable(false).Filterable(false).Groupable(false);
            columns.Bound(o => o.PROCESS_OBJECT_TYPE.OBJECT_TYPE_NAME).ReadOnly(true);
            columns.Bound(o => o.OBJECT_NAME).Title("Name");
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Delete();
            }).Width(200).Title("Action");
            columns.Template(o =>
                    @Html.ActionLink("Instances", "JobDetails", "JobDetails", new { jobID = o.OBJECT_ID, id = o.OBJECT_ID, environment = ViewData["Environment"] }, "") + " | " +
                    @Html.ActionLink("Parameters", "JobParams", "JobParameters", new { jobID = o.OBJECT_ID, id = o.OBJECT_ID, environment = ViewData["Environment"] }, ""))
                .Title("Details")
                .Width(200);
        })
        .Pageable(paging => paging.Style(pagerStyles).Position(position).PageTo(currentPage))
        .Editable(editing => editing.Mode(mode)).Groupable()
        .Sortable()
        .Filterable()
        .Selectable()
        .Reorderable(reorder => reorder.Columns(true))
        .Resizable(resizing => resizing.Columns(true))
        .ClientEvents(e =>
        {
            e.OnRowSelect("Grid_OnRowSelect");
        })
        .Render();
 }

These are the stylesheets I am using in the shared page layout:

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.web20.min.css").Combined(true).Compress(true)))

</head>

I also included sceen shots of the before edit and during edit so you see what I am talking about :-)


Thanks,

Carey

[Dimo]

Hi Carey,

The edit row is in a separate <table> wrapped in a form. In order to avoid the issue, please set column widths for all columns, except one. In this way the columns in the edit table will assume the widths in the outer (main) table.

Another option is to use Ajax editing, because in this case there are no two tables.

http://demos.telerik.com/aspnet-mvc/grid/editingajax?theme=vista

Best wishes,
Dimo
the Telerik team

[Carey]

Hi,

Thanks, setting columns widths worked perfectly :-)

I did not try the ajax method in order to keep it consitent with the other views I have in my application as I am using the Entity Framework.  Other views are using included data through the defined relationships in my model and the Ajax method (from the previous version) did not support traversing relationships without modifying the model to set the relationships to private.  This prevents the navigation between entities.


Thanks,

Carey