[Solved] No Form Tag Around Delete Button In Grid Row One

[lmf232s]

Im having an issue where the first row of the grid is displaying stacked buttons. The edit button sits on top of the delete button and if you view the source it appears that the form tag is not being rendered around the first delete button. Well, there is a difference between the source and what firebug outputs. This is only for the first row of the grid, every row after that does display correctly.

Let me show you. I have also attached an image to show you what im looking at.

Grid:

<%= Html.Telerik().Grid(Model.Details)
    .Name("TestDetails")
    .Footer(false)
    .DataKeys(keys => keys.Add(c => c.TaxBatchDetailId))
    .DataBinding(dataBinding => dataBinding.Server()
            .Update("Save", "Grid")
            .Delete("Delete", "Grid"))
    .Columns(columns =>
    {
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Delete();
        }).Width(210).Title("Commands");
    })
%>

View Source (Has a form tag around the delete button):

<div class="t-widget t-grid" id="TestDetails">
    <table cellspacing="0">
        <colgroup><col style="width:210px" /></colgroup>
        <thead class="t-grid-header">
            <tr>
                <th class="t-last-header t-header" scope="col">Commands</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="t-last">
                    <a class="t-grid-action t-button t-state-default t-grid-edit" href="/Batch/Edit/10?TestDetails-mode=edit">Edit</a>
                    <form action="/Grid/Delete/10" class="t-grid-actions" method="post">
                        <div>
                            <input name="TaxBatchDetailId" type="hidden" value="10" />
                            <button class="t-grid-action t-button t-state-default t-grid-delete" type="submit">Delete</button>
                        </div>
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Firebug (Does not contain the form tag):

<div class="t-widget t-grid" id="TestDetails">
    <table cellspacing="0">
        <colgroup><col style="width: 210px;"></colgroup>
        <thead class="t-grid-header">
            <tr>
                <th class="t-last-header t-header" scope="col">Commands</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="t-last">
                    <a class="t-grid-action t-button t-state-default t-grid-edit" href="/Batch/Edit/10?TestDetails-mode=edit">Edit</a>
                    <div>
                        <input name="TaxBatchDetailId" value="10" type="hidden">
                        <button class="t-grid-action t-button t-state-default t-grid-delete" type="submit">Delete</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Style Sheet Registrar:

<%= Html.Telerik()
    .StyleSheetRegistrar()
    .DefaultGroup(group => group
    .Add("telerik.common.css")
    .Add("telerik.web20.css"))
%>

Browsers Tested:
Firefox 3.6.8
IE 8.0.76

Telerik Download:
Telerik_Extensions_for_ASPNET_MVC_2010_2_825_OpenSource_hotfix


Im not sure if this is an issue on my end or not. Any Ideas?

[Atanas Korchev]

Hello lmf232s,

Could you reproduce this problem in our online demos? If yes - could you show us the required steps? If not - please send us a sample project showing the problem you are experiencing.

Regards,
Atanas Korchev
the Telerik team

[lmf232s]

Sorry Atanas,

It was an issue on my end but well worth noting. The issue was a side effect of having a form tag wrapped around the grid. Not 100% sure why this is the result but once I removed the form that was wrapping the grid everything fell back into place.

Just a design issue of moving from one view to another and overlooking the original form tag.

Thanks,
lmf232s

[jeff]

Thanks for answering this, I just had the same issue and sure enough my grids where inside the form tag. I just wish I had found it sooner, I just wasted a couple of hours on this.

in short to reproduce
create an edit view
add a grid below the generated properties and inside the form tag
and now the first command button that is inside a form tag doesn't work.