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

[Solved] Grid inside a tabstrip not submitting

4 Answers 129 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.

raphael asked on 28 Jun 2012, 09:18 AM

Hello,
can someone tell me how to submit a form that contains a tabstrip, that on a tabpage has a grid and on the other different pages with fields?
what happens when I insert the grid in my tab the submit button stops to fire, looking at the html code I noticed that the page generated nested forms.
Which is the right approach to save the data on my tab pages?

here is a simplified example of my view, but i have more tab pages.

<div>

@using (Html.BeginForm("Edit", "Creditor", FormMethod.Post))

{

@Html.ValidationSummary(true)

Html.Telerik().TabStrip()

.Name("TabStrip")

.Items(tabstrip =>

{

tabstrip.Add()

.Text("Creditore")

.Content(@<text>

<fieldset>

@Html.HiddenFor(model => model.CreditorId)

<div class="editor-label">

@Html.LabelFor(model => model.LastName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.LastName)

@Html.ValidationMessageFor(model => model.LastName)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.FirstName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.FirstName)

@Html.ValidationMessageFor(model => model.FirstName)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.VatCode)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.VatCode)

@Html.ValidationMessageFor(model => model.VatCode)

</div>

</fieldset>

</text>);

tabstrip.Add()

.Text("Pagamento")

.Content(@<text>

@RenderGrid(Model)

</text>);

})

.SelectedIndex(0)

.Render();

<p><br />

<input type="submit" value="Save" />

@Html.ActionLink("Back to List", "Index", new { id = ViewContext.RouteData.Values["id"] })

</p>

}

</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.Edit().ButtonType(GridButtonType.BareImage);

commands.Delete().ButtonType(GridButtonType.BareImage);

}

);

})

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("Index", "Creditor")

.Insert("Insert", "BankPost")

.Update("Update", "BankPost")

.Delete("Delete", "BankPost"))

.Scrollable(s => s.Height(200))

.Editable(editing => editing.Mode(GridEditMode.PopUp))

.ClientEvents(events => events

.OnLoad("onLoad")

.OnDataBound("onDataBound")

.OnEdit("onEdit")).Render();

}

4 Answers, 1 is accepted

answered on 26 Sep 2012, 03:06 PM

Hi jerome,

looking around for day I just did something like that, it isn't clean but at least it work.
I hide the grid when I insert a new master, and I show the grid when I edit it (because i miss the foreign key for the grid detail)

on the edit save button I added a call to javascript

<input type="submit" value="Save" onclick="submitData()" />

then I added the script that just validates my fields and submits the form

function submitData() {

var form = $(document.forms[0]);

if (form.data('unobtrusiveValidation').validate()) {

form.submit();

}

I'm sorry but I couldn't find any better way.
maybe you when the user goes on the tab with the grid you save via jquery the master data so that you have the foreign key for the details in the grid.

If you find a cleaner way to do it please let me know I would really appriciate it!

Raphael

Accepted