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

Grid inside a tabstrip visualization problem

0 Answers 51 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
raphael
Top achievements
Rank 1
raphael asked on 23 Nov 2012, 01:13 PM
Hi,
I have a rendering problem with my grid that I nested in a tabstrip, I can't understand where the problem is.

When I try to show both command buttons Edit and Delete the grid splits in 2 as you can see on the image gridProblem.
If I just show the edit command the grid show as expected like on image GridOk.
The problem is still there when I try to only show the delete command.

here is the code I wrote on the cshtml page

<div>
@using (Html.BeginForm("Edit", "Creditor", FormMethod.Post))
{
    @Html.ValidationSummary()
  
    Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Creditore")
                .Content(@<text>
                    <fieldset>
                        my field set
                    </fieldset>
                </text>);
  
            tabstrip.Add()
                .Text("Indirizzo")
                .Content(@<text>
                    <fieldset>
                        @Html.EditorFor(model => model.Address)
                    </fieldset>
                </text>);
  
            tabstrip.Add()
                .Text("Informazioni")
                .Content(@<text>
                    <fieldset>
                            my field set
                    </fieldset>
                </text>);
            tabstrip.Add()
                        .Text("Pagamento")
                        .Content(@<text>
                            @RenderGrid(Model)
                        </text>);
        })
        .SelectedIndex(0)
        .Render();    
}
</div>
@helper RenderGrid(ZygosMVC.Areas.BaseData.CreditorModel model)
    {
        Html.Telerik().Grid(model.BankPostLinks)
            .Name("BankPost")
            .DataKeys(k => k.Add(r => r.BankPostId).RouteKey("BankPostId"))
            .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.BareImage).ImageHtmlAttributes(new { style = "margin-left:0" }))
            .Columns(columns =>
            {
                columns.Bound(bp => bp.PaymentType.Description).Width(90);
                columns.Bound(bp => bp.AccountNumber).Width(160);
                columns.Bound(bp => bp.IBAN).Width(160);
                columns.Command(commands =>
                    commands.Delete().ButtonType(GridButtonType.BareImage)
                    );
            })
            .DataBinding(dataBinding => dataBinding.Ajax()
                                            .Select("Index", "Creditor")
                                            .Insert("Insert", "BankPost")
                                            .Update("Update", "BankPost")
                                            .Delete("Delete", "BankPost"))
            .Render();
    }

Can somebody tell me what i'm doing wrong?

Raphael
Tags
TabStrip
Asked by
raphael
Top achievements
Rank 1
Share this question
or