The code is as shown below:
<
script type="text/javascript">
function onSelect(e) {
var tabstrip = $("#TabStrip").data("tTabStrip");
var item = $("li", tabstrip.element)[$("#itemIndex").val()];
tabstrip.select(item);
}
</script>
@model
IEnumerable<CdcSoftware.Pivotal.ThinClient.Common.ViewBag.MetaqueryViewModel>
@(Html.Telerik().TabStrip()
.Name(
"TabStrip")
.SelectedIndex(1)
.ClientEvents(events => events
.OnSelect(
"onSelect"))
.Items(tabs =>
{
tabs.Add()
.Text(
"My Static Lists")
.Content(@<text>
@Html.Partial(
"MyStaticListGrid")
</text>);
tabs.Add()
.Text(
"All Static Lists")
.Content(@<text>
@Html.Partial(
"StaticListGrid")
</text>);
})
)
On click of "My Static Lists" tab I need to load MyStaticListGrid dynamically. How do i do that?
Regards,
Murali
3 Answers, 1 is accepted
I am not sure what you mean by loading the grid dynamically. Could you please clarify?
Kind regards,Atanas Korchev
the Telerik team
Rank 1
I have two grids loaded on two tabs of a tabstrip. The requirement is on the first load of the tab, when the default tab is displayed, the grid loaded on this tab should display the complete data from the model to which it is bound. when i click on the second tab, the grid that is loaded on this tab, should display a subset of data that is displayed in the grid loaded on the first tab click. For this, I have bound both the grids to the same view model and tried to apply filter on the second grid load to display the filtered data. The problem is that the filter is not working and the second grid is also displaying the entire data instead of filtered data.
The code is as follows:
staticlists.cshtml - This page loads the tab and the grids on it
<
script type="text/javascript">
function onSelect(e) {
var tabstrip = $("#TabStrip").data("tTabStrip");
var item = $("li", tabstrip.element)[$("#itemIndex").val()];
tabstrip.select(item);
}
</script>
@model
IEnumerable<CdcSoftware.Pivotal.ThinClient.Common.ViewBag.MetaqueryViewModel>
@(Html.Telerik().TabStrip()
.Name(
"TabStrip")
.SelectedIndex(1)
.ClientEvents(events => events
.OnSelect(
"onSelect"))
.Items(tabs =>
{
tabs.Add()
.Text(
"My Static Lists")
.Content(@<text>
@Html.Partial(
"MyStaticListGrid")
</text>);
tabs.Add()
.Text(
"All Static Lists")
.Content(@<text>
@Html.Partial(
"StaticListGrid")
</text>);
})
)
staticlistsgrid.cshtml - This page loads the first grid (on default tab display )
<
script type="text/javascript">
function onLoad() {
$(
'tr', this).live('dblclick', function (e) {
var $tr = $(this);
alert(
'double click ' + $tr.text());
})
}
</
script>
@model
IOrderedEnumerable<CdcSoftware.Pivotal.ThinClient.Common.ViewBag.MetaqueryViewModel>
@(Html.Telerik().Grid(Model)
.Name(
"StaticListGrid")
.Columns(columns =>
{
columns.Bound(o => o.Name).Width(120).Title(
"Static List Name");
if (ViewData["AllSearches"].ToString() != "false") columns.Bound(o => o.ListType);
columns.Bound(o => o.Permission);
columns.Bound(o => o.CreatedByEmployeeName);
columns.Bound(o => o.CreateDate);
columns.Bound(o => o.EditedByEmployeeName);
columns.Bound(o => o.EditDate);
})
//.DataBinding(dataBinding => dataBinding.Server().Select(
// "_CustomBinding",
// "Metaquery"))
.ClientEvents(events => events.OnLoad(
"onLoad"))
.DataBinding(dataBinding => dataBinding.Ajax().Select(
"_CustomBinding",
"Metaquery"))
.HtmlAttributes(
new { style = "text-align:left" })
//.RowAction(row =>
// {
// row.HtmlAttributes["style"] = "font-weight: normal; font-size:1em; font-family:times;";
// })
.Sortable(sorting => sorting
.SortMode(
GridSortMode.SingleColumn))
.Scrollable(scroll => scroll.Height(
"385px"))
.EnableCustomBinding(
true)
)
mystaticlistsgrid.cshtml - This grid should show filtered content when i click on the second tab. but filter is not working
<
script type="text/javascript">
function onLoad() {
$(
'tr', this).live('dblclick', function (e) {
var $tr = $(this);
alert(
'double click ' + $tr.text());
})
}
</
script>
@model
IOrderedEnumerable<CdcSoftware.Pivotal.ThinClient.Common.ViewBag.MetaqueryViewModel>
@(Html.Telerik().Grid(Model)
.Name(
"StaticListGrid")
.Columns(columns =>
{
columns.Bound(o => o.Name).Width(120).Title(
"Static List Name");
if (ViewData["AllSearches"].ToString() != "false") columns.Bound(o => o.ListType);
columns.Bound(o => o.Permission);
columns.Bound(o => o.CreatedByEmployeeName);
columns.Bound(o => o.CreateDate);
columns.Bound(o => o.EditedByEmployeeName);
columns.Bound(o => o.EditDate);
})
//.DataBinding(dataBinding => dataBinding.Server().Select(
// "_CustomBinding",
// "Metaquery"))
.ClientEvents(events => events.OnLoad(
"onLoad"))
.DataBinding(dataBinding => dataBinding.Ajax().Select(
"_CustomBinding",
"Metaquery"))
.HtmlAttributes(
new { style = "text-align:left" })
//.RowAction(row =>
// {
// row.HtmlAttributes["style"] = "font-weight: normal; font-size:1em; font-family:times;";
// })
.Sortable(sorting => sorting
.SortMode(
GridSortMode.SingleColumn))
.Scrollable(scroll => scroll.Height(
"385px"))
.EnableCustomBinding(
true)
)
How do i show filtered data when i click the second tab?
Regards,
Murali
To filter a grid on the client-side you should use the filter method. You can call it in the OnSelect event of the tabstrip.
Atanas Korchev
the Telerik team