Adding Delete Button Destroys Layout

[Michael Pine]

Bit frustrating, these last couple of issues I assume are possibly style sheet related;

• I can update in the grid, but when I click Update, the Update happens but the "Update" and "Cancel" buttons stay there
• If I add the Delete button the layout gets all messed up, the Select/Edit buttons if I display those no problem.

I am going to try a new app with the style sheeting removed and see how it goes and then try and start including styles and classes to see how I go

[Michael Pine]

Ok this even does this for me, If I do a basic page with nothing on it other than a Grid in a standard Telerik MVC 3 Project Templated application, below is the View

Currently the Delete section is remakred out and it is fine, as soon as I put that back in, the layout gets all messed up

@using Telerik.Web.Mvc
@model CapitalAssetsBAL.Project

@{
    ViewBag.Title = "Index";
    GridEditMode mode = (GridEditMode)ViewData["mode"];
    GridButtonType type = (GridButtonType)ViewData["type"];
}

<h2>Index</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        @Html.HiddenFor(model => model.Id)

        @(Html.Telerik().Grid(Model.SubProjects).Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(sp => sp.Id).Visible(false);
                columns.Bound(sp => sp.Financial_Year).Width(100);
                columns.Bound(sp => sp.Water_Plan_Capital).Width(50).Format("{0:c}");
                columns.Bound(sp => sp.Water_Plan_Opex).Width(50).Format("{0:c}");
                columns.Bound(sp => sp.Capital_Budget_Capital).Width(50).Format("{0:c}");
                columns.Bound(sp => sp.Capital_Budget_Opex).Width(50).Format("{0:c}");
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(type);
                    //commands.Delete().ButtonType(type);
                }).Width(200);
            })
            .DataKeys(keys => keys.Add(c => c.Id))
            .DataBinding(dataBinding =>
            {
                dataBinding.Ajax()
                    .Select("_SelectAjax", "Project", new { Id = @Model.Id })
                    //.Delete("_DeleteAjaxEditing", "Project", new { Id = @Model.Id })
                    .Update("_SaveAjaxEditing", "Project");
            })
            .Editable(editing => editing.Mode(mode))
        )
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

[Michael Pine]

Very confused now, if I do TryUpdateModel the data actually gets updated and then new GridModel is presented back correctly, however, I decided to onError on the clientEvents and this is get triggered when I return the GridModel with the new Data, but the Update and Cancel buttons stay there like the Update did not happen, even though the data is updated correctly.

What is going on here ? How can I tell the Grid that the data has updated correctly ???

On the TryUpdateModel the ModelState is invalid, but the data has been updated correctly.

[AspenSquare]

Have you figured out this what was causing the problem for you?

I'm having a similar issue with adding a delete button. Everything works fine in Chrome/Firefox but as soon as I try it in Internet Explorer I get an extra Grid below my original Grid.

[AspenSquare]

I ended up fixing this issue when I came across it.

I just moved the grid outside of the form. In my case I put the grid before the form as I had other stuff in my form. Once I did that, Internet Explorer showed the grid properly.