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

Load Tab dynamically from Grid

3 Answers 69 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.
telaron
Top achievements
Rank 1
telaron asked on 22 Feb 2010, 05:39 AM
Hi,

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

Sort by
0
Georgi Krustev
Telerik team
answered on 22 Feb 2010, 10:24 AM
Hi telaron,

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.
0
telaron
Top achievements
Rank 1
answered on 24 Feb 2010, 12:13 AM
Hi Georgi,

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

 

 

 



0
Georgi Krustev
Telerik team
answered on 26 Feb 2010, 08:44 AM
Hello Nathan,

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.
Tags
TabStrip
Asked by
telaron
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
telaron
Top achievements
Rank 1
Share this question
or