This is a migrated thread and some comments may be shown as answers.

[Solved] Grid InLine edit messing up grid styling

1 Answer 79 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Licenses
Top achievements
Rank 1
Licenses asked on 02 Apr 2012, 02:23 PM
Hello,

I've implemented a grid that allows the user to modify contacts (add / edit) with the following code:
@(Html.Telerik()
    .Grid<ClientContact>()
    .Name("gridClientContacts")
        .Columns(c =>
        {
            c.Command(com => com.Edit().ButtonType(GridButtonType.Image)).Width(70).HtmlAttributes(new { style = "text-align: center;"});
            c.Bound(m => m.TitleId).Width(75);
            c.Bound(m => m.LastName).Width(100);
            c.Bound(m => m.FirstName).Width(100);
            c.Bound(m => m.ContactFunction).Width(150);
            c.Bound(m => m.Tel).Width(100);
            c.Bound(m => m.Fax).Width(100);
            c.Bound(m => m.Mobile).Width(100);
            c.Bound(m => m.Email).Width(100);
             
        })
        .Pageable(p => p.Enabled(true).PageSize((int)ViewBag.GridViewPageSize))
        .Filterable(f => f.Enabled(true))
        .Sortable(s => s.Enabled(true))
        .Editable(e => e.Enabled(true).Mode(GridEditMode.InLine))
        .DataBinding(db => db.Ajax()
            .Enabled(true)
            .OperationMode(GridOperationMode.Server)
            .Select("GetParentClientContacts", "Client")
            .Insert("InsertParentClientContact", "Client")
            .Update("UpdateParentClientContact", "Client")
            .Delete("DeleteParentClientContact", "Client")
        )
        .DataKeys(dk =>
        {
            dk.Add(m => m.Id);
            dk.Add(m => m.ClientId).RouteKey("clientId");
        })
        .ClientEvents(e =>
        {
            e.OnLoad("gridOnLoad");
            e.OnDataBound("gridDataBound");
            e.OnRowDataBound("gridClientContactsRowDataBound");
 
        })
        .NoRecordsTemplate(isEditMode == false ? "Please save the client first before adding new contacts." : "No contacts found.")
    )


When the page loads, the grid looks like "page_load.png" in the attachments.
When I click on the edit icon, the grid looks like "during_edit.png" in the attachments.
When I cancel out of the edit mode or complete it, the grid looks like "after_edit.png" in the attachments.

I've spent a enough time trying to figure it out on my own but I am unable to.
Could someone please shed some light on this behaviour?

Thanks in advance!

1 Answer, 1 is accepted

Sort by
0
Licenses
Top achievements
Rank 1
answered on 02 Apr 2012, 02:42 PM
Seem to have solved it now.

Apperantly I had styling set for the "form" element in my CSS, which was being applied when in edit mode.
Tags
Grid
Asked by
Licenses
Top achievements
Rank 1
Answers by
Licenses
Top achievements
Rank 1
Share this question
or