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

[Solved] Editing Grid in TabStrip causes new tab to be selected

1 Answer 113 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.

Jon asked on 10 Aug 2011, 03:41 PM

I have an editable grid in a tab strip. Edit mode on the grid is pop-up. Grid is in tab #2. When I click the add new record button, page refreshes and tab #1 is selected. How can I prevent this from happening?

@{Html.Telerik().TabStrip()
.Name("TabStrip")
.Effects(fx => fx.Expand()
.Opacity()
.OpenDuration(200)
.CloseDuration(200))
.Items(tabstrip =>
{
tabstrip.Add()
.Text("Details");

//TODO: Commitment details here (editable)

//TODO: Balance Summary (grid or display fields, read-only)


tabstrip.Add()
.Text("Funding/Budget")

.Content(

@<text>
<fieldset>
<legend>Funds</legend>
@(Html.Telerik().Grid(Model.FundCommitments)
.Name("FundsGrid")
.ClientEvents(action => action.OnEdit("onEdit"))
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
.Columns(columns => {
columns.Bound(o => o.FiscalYear);
columns.Bound(o => o.Fund.Name);
columns.Bound(o => o.Amount);
columns.Bound(o => o.Fund.CurrentBalance);
})
.Editable(editing => editing.Mode(GridEditMode.PopUp).TemplateName("CreateFundTemplate"))
.DataBinding(dataBinding => dataBinding
.Server()
.Insert("Create", "CommitmentDetail")
.Update("Save", "CommitmentDetail")
.Delete("Delete", "CommitmentDetail")
)
.DataKeys(key => key.Add(o => o.Id))
.Pageable()
.Sortable()
.Filterable()
)
</fieldset>
</text>
//TODO: fund details contains grid of indexes that has add option
);

tabstrip.Add()
.Text("Transactions");

tabstrip.Add()
.Text("Documents");
})
.Render();}

1 Answer, 1 is accepted

answered on 10 Aug 2011, 04:06 PM

I just fixed this. Here's what I did

@{Html.Telerik().TabStrip()
.Name("TabStrip")
.Effects(fx => fx.Expand()
.Opacity()
.OpenDuration(200)
.CloseDuration(200))
.Items(tabstrip =>
{
tabstrip.Add()
.Text("Details");

//TODO: Commitment details here (editable)

//TODO: Balance Summary (grid or display fields, read-only)


tabstrip.Add()
.Text("Funding/Budget")

.Content(

@<text>
<fieldset>
<legend>Funds</legend>
@(Html.Telerik().Grid(Model.FundCommitments)
.Name("FundsGrid")
.ClientEvents(action => action.OnEdit("onEdit"))
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
.Columns(columns => {
columns.Bound(o => o.FiscalYear);
columns.Bound(o => o.Fund.Name);
columns.Bound(o => o.Amount);
columns.Bound(o => o.Fund.CurrentBalance);
})
.Editable(editing => editing.Mode(GridEditMode.PopUp).TemplateName("CreateFundTemplate"))
.DataBinding(dataBinding => dataBinding
.Server()
.Insert("Create", "CommitmentDetail")
.Update("Save", "CommitmentDetail")
.Delete("Delete", "CommitmentDetail")
)
.DataKeys(key => key.Add(o => o.Id))
.Pageable()
.Sortable()
.Filterable()
.ServerBinding(binding => binding.Action("Details", "Commitment", new { tabIndex =1, commitmentId = Model.Id}))
)
</fieldset>
</text>
//TODO: fund details contains grid of indexes that has add option
);

tabstrip.Add()
.Text("Transactions");

tabstrip.Add()
.Text("Documents");
})
.SelectedIndex((int)ViewData["tabIndex"])
.Render();}

Notice I added .ServerBinding thing. Also, set .SelectedIndex on tabstrip. Also had to modify the Detail action in my controller.

public ViewResult Details(int? tabIndex, int id)
{
ViewData["tabIndex"] = tabIndex ?? 0;
Commitment commitment = db.Commitments.Single(c => c.Id == id);
return View(commitment);
}

This passes back the tab index to the controller which sends it back out to the view in the ViewData where the selected tab index can be maintained.