Rank 1
Hi,
I am quite new in working with Telerik and the current project that I am working is an MVC project that uses Telerik UI components for the frontend.
What I am aiming for is having several Views with each of them implementing a grid component. In the grid I have imported a list of items that can each be edited and deleted. The editing functionality uses the pop up component. However, the client is requesting that when the edit pop up opens the process of editing would be divided into two different windows/tabs meaning that in the pop up the user could navigate back and forth. That is because the entities that are being editing are large so for a more user friendly solution the client wants to divide the editing process.
So far I have not yet come across a straight forward solution to implement something like this. When in comes to implementation for a simple one tab Pop up it seems simple however if I want to introduce several tab solution, it seems to be easier to just go pure javaScript way as I am struggling mixing Telerik and my own scripts.
I hope I making my issue clear! I would like apologize if this seems like non-problem for the pros, cause unfortunately I am not one...
Regards
Juste
1 Answer, 1 is accepted
Hello Justina,
I would recommend integrating the TabStrip component into the Grid's Popup editor template.
For example:
- Create a custom Popup editor template for the Grid:
@(Html.Kendo().Grid <GridViewModel>()
.Name("grid")
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomPopupEditor"))
...
) - Add a new View in the ~/Views/Shared/EditorTemplates/ folder with name "CustomPopupEditor.cshtml". Define the TabStrip component and define the desired editors in the Content() option of the respective tab.
//CustomPopupEditor.cshtml
@model GridViewModel
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Personal Inforamtion")
.Content(@<text>
<div class="k-edit-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="k-edit-field">
@Html.Kendo().TextBoxFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="k-edit-label">
@Html.LabelFor(model => model.BirthDate)
</div>
<div class="k-edit-field">
@Html.Kendo().DatePickerFor(model => model.BirthDate)
@Html.ValidationMessageFor(model => model.BirthDate)
</div>
</text>);
tabstrip.Add().Text("Details")
.Content(@<text>
<div class="k-edit-label">
@Html.LabelFor(model => model.PersonalNumber)
</div>
<div class="k-edit-field">
@Html.Kendo().NumericTextBoxFor(model => model.PersonalNumber)
@Html.ValidationMessageFor(model => model.PersonalNumber)
</div>
</text>);
tabstrip.Add().Text("Another tab")
.Content(@<text>
....
</text>);
})
.SelectedIndex(0)
)As a result, the editors will be split into different tabs for a better look and feel, and all fields will be submitted together through the Update Action of the Grid:
Let me know if this suggestion works for you.
Regards,
Mihaela
Progress Telerik