Can someone show me how to dynamically populate the content in a tab when click on a link from a grid. For example,
if I have 5 rows on a grid and each row has different UserId. If I click on say "Row A" it should show a tab with "user A" content and if I click on "Row B", it should show "user B" content.
I have looked at the tab strip function "LoadContentFrom" but don't how to assign a value dynamically to it:
.LoadContentFrom(Url.Action(
"GetUserDetails", "User", new {userId=_UserId}))
where _UserId should get dynamically from the grid.
Thanks
Nathan
3 Answers, 1 is accepted
You can use this online demo as a base. Please note how the id of data item is retrieved on the client - View tab, the javascript code placed in
Html.Telerik().ScriptRegistrar()
.OnDocumentReady(() =>...
Once you have the id, you can generate an url to the Action which will get the id as a paramenter and set ViewData[''] with the id. Hence you can use ViewData . to set the id in the LoadContentFrom like so:
.LoadContentFrom(Url.Action("GetUserDetails", "User", new {userId=ViewData["UserId"]}))Regards,
Georgi Krustev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
I have looked at the grid example that uses Html.Telerik().ScriptRegistrar(). However, it doesn't fit what i'm looking for as the related grid has a "rebind" method that allows you to bind clientside value to it.
This is what I've done so far, i created a grid and a client side event "onrowDatabound"
<script type="text/javascript">
function
onRowDataBound(e) {
var customerNameCell = e.row.children[0];
$(customerNameCell).click(
function() {
alert(e.dataItem.CustomerId); //Where do i go from here? can you please show me an example
});
$(customerNameCell).html(
"<a href=\"#\">" + $(customerNameCell).html() + "</a>");
}
</script>
<div id="grid">
<%
Html.Telerik().Grid(Model)
.Name(
"CustomerGrid")
.Columns(columns =>
{
columns.Add(c => c.Name).Title(
"Name").Width(200);
})
.ClientEvents(events => events.OnRowDataBound(
"onRowDataBound"))
.Ajax(ajax => ajax.Action(
"_GetCustomers", "Customer"))
.Filterable()
.Scrollable(scrolling => scrolling.Height(500)).Render();
%></div>
<div id="tab">
<%
Html.Telerik().TabStrip()
.Name(
"TabStrip")
.Items(parent =>
{
parent.Add()
.Text(
"Customer Details")
.LoadContentFrom(Url.Action(
"GetCustomer", "Customer", new {customerId=ViewData["CustomerId"]}));
parent.Add()
})
.Render();
%>
</div>
Thanks
After the "TODO" point you can use jQuery ajax request to the server, passing the UserID. The URL should point to an Action, which will return user control with TabStrip. The tabstrip in the user control will be generated dynamically depending on the passed UserID. The other option is to reload the content of the already rendered tabstrip. If this is the case, you still should use jQuery ajax request and change the content of the tab by yourself.
Regards,
Georgi Krustev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.