[Solved] Grid row bad positionning

[Steve]

Hi,

    I use MVC grid version 2010.2.713 and I have an edit form with a detail grid at the bottom and the row is not located in the grid.  I attach a picture of this.

Here is the code of my View page

<%= Html.Telerik().Grid<Competences>(Model)
                .Name("CompetencesGrid")
                .Editable(e =>
                    {
                        e.DisplayDeleteConfirmation(true);
                        e.Mode(GridEditMode.InLine);
                    })
                .ToolBar(commands =>
                    {
                        commands.Insert();
                    })
                .DataKeys(dataKeys => dataKeys.Add(c => c.pk_CompetenceId).RouteKey("Id"))
            .Columns(columns =>
                        {
                            columns.Command(commands =>
                                {
                                    commands.Edit();
                                    commands.Delete();
                                }).Width(100);

                            columns.Bound(u => u.DateObtention).Title("Date obtention").Width(150).Format("{0:d}");

                            columns.Bound(u => u.TypeCours).Width(100)
                                .ClientTemplate("<# if (TypeCours) { #><#= TypeCours.Nom #> <#} else { #> none <# } #>");
                        })
         .DataBinding(dataBinding => dataBinding
             //Ajax binding
             //.Ajax()
             .Server()
             //The action method which will return JSON
                                               .Select("Index", "Competences", new { membreId = Guid.Parse("12670F7C-92CC-11DF-B0A9-B77D9DD10E51") })
                                           .Insert("CreateCompetence", "Competences")
             //Home.Update updates an existing data recordGoToUpdate
                                           .Update("Update", "Competences")
             //Home.Delete deletes an existing data record
                                           .Delete("Delete", "Competences")

                        )

                .Pageable(pager => pager.PageSize(3))
                .Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(o => o.DateObtention).Descending()))
                .Groupable()
                .Filterable()
                .Localizable("fr")
%>

Thank you

[Atanas Korchev]

Hi Steve,

 We have seen this problem in the past but have been unable to reproduce it locally. Could you please provide a sample project? You can use a public file hosting service such as dropbox.com or skydrive.live.com in order to share the project with us. Thanks!

All the best,
Atanas Korchev
the Telerik team

[Steve]

Hi Mr. Korchev,

    Thank you for your reply.  I continued my testing last week-end and it seems to happen when I have mvc grid in a partial view (.ascx).  So the context was a View page (Edit, controller Member) using a partial view called MemberInformations bound to controller Member.  In this partial view, I have a MVC grid at the bottom bound to controller Competences.  I'll send you a sample this week-end.

Thank you

[Steve]

Hi,

 Here is the sample:
http://8rlk5a.bay.livefilestore.com/y1p42Mc0QzXWZrkWEA9DXBijN19veC8fvHP6CSgvOSmHBZl0sqWyopjPD0oEadfgCCmMTYV6aLDJ9WBXnYQHgeMY0VHoWIv5c1G/SampleGridPositionTelerik.zip?download&psid=1

Main page, click on Member tab, edit the first row and you will see the problem (Grid at the bottom).  I would like also to add a problem when I edit in this grid, the action called is the one one the first controller, not the one I use for the grid controller.

Thank you

[Atanas Korchev]

Hello Steve,

 Unfortunately the provided link does not seem to work. I see an error page when I try to open it. Could you try sending it again?

All the best,
Atanas Korchev
the Telerik team

[Steve]

I'm sorry, it was the first time I posted a sample on this site.  This url should work:
http://cid-a0fab1b6e24545bc.office.live.com/browse.aspx/Samples

Sorry again

[Alex Gyoshev]

Hi Steve,

The issue is caused from the delete button in the grid. It is rendered with a <form> tag around it in order to work in scenarios where JavaScript is disabled, which breaks your layout (nesting form tags is, usually, a bad practice) Here are the solutions of this problem that I can think of:

• Place the grid outside of the form in editing mode. This solution requires the least changes in your code. You can find it attached.
• Use the Grid editing from the Q2 beta (official release will be this week), which allows more customization of the editing.
• Create your own delete button, working with JavaScript. This is not advised, as your solution will not work for users without JavaScript.

All the best,
Alex Gyoshev
the Telerik team

[Steve]

Thank you very much, it works.  I installed the new release and I still have 2 problems.

1- When I click edit button, the grid call the action from the main controller, not the one I specified in the Update("") option.
2- When I edit the row, the second column is not right positions (see image attached).

Thank you

[Atanas Korchev]

Hello Steve,

We are not sure what the problem may be. I suggest you send us a sample project.

Regards,
Atanas Korchev
the Telerik team

[Steve]

Hi,

   Here is the sample project (take SampleGridRowPositionTelerik.zip):
http://cid-a0fab1b6e24545bc.office.live.com/browse.aspx/Samples

=> To reproduce point #1:
1- Click on members tab
2- Click Edit on the first row and you'll see the member  editing
3- Click edit on the first row in bottom grid (competences) and if you put a breakpoint, you'll see that the main controller is called (Member), not the grid controller (competences)

=> To reproduce point #2:
1- Click on members tab
2- Click Details on the first row, you'll see the competence screen
3- Click the Edit image on the first row and you'll see the positioning problem.

Thank you very much for your help
Steve

[Alex Gyoshev]

Hello Steve,

Regarding your first issue, the Members/Edit is hit, because the same page is being reloaded (i.e. editing a member competences). The clean and easy solutions are that you either use an AJAX-bound grid, or that you have a separate form for editing member competences.

The second problem is easily fixed by adding the following line to the competences grid:
    .ClientEvents(events => events.OnLoad("function(e) { $(this).find('table').css('table-layout', 'fixed'); }"))

We are considering adding the above line to the assembly -- it fixes the editing layout in non-scollable grids that have widths on all columns set (such as yours). That said, as a general rule of thumb, you should leave one of the columns without width -- this way it will take up all the available space when the page is resized.

Kind regards,
Alex Gyoshev
the Telerik team

[Steve]

Hi,

    Thank you very much for your help.  the correction you proposed to correct positionning works perfectly.  However, concerning editing, I cannot change my binding to Ajax (even if I really would like it), because of this problem: http://blogs.telerik.com/blogs/posts/10-01-25/resolving_circular_references_when_binding_the_mvc_grid.aspx
The correct it, I will have to change my model and it will bit a lot of work.  I changed my grid to be on another page and it works.

Thank you
Steve