[Solved] Dynamically loading and filtering a mvc grid inside tabstrip

[Murali]

Hi,
We are using telerik mvc tabstrip and mvc grids. We have  2 tabs in the tabstrip and each of the tabstrip loads a mvc grid on load. By default, one of the grids contains displays the complete data as returned from server. The other grid is also bound to the same view model but needs to show filtered data which is a  sunbet of the data when the second tab is clicked and this grid is loaded.

The code for loading and selecting tabs is shown below:
staticlists.cshtml



<script type="text/javascript">
    function onSelect(e) {

        var tabstrip = $("#TabStrip").data("tTabStrip");
        var item = $("li", tabstrip.element)[$("#itemIndex").val()];
        tabstrip.select(item);

    }

    function OnLoad(e) {
        var grid = $("#MyStaticListGrid").data("tgrid");
        alert(grid);
    }
     
   </script>



 @model  IEnumerable<CdcSoftware.Pivotal.ThinClient.Common.ViewBag.MetaqueryViewModel>
                       

@(Html.Telerik().TabStrip()
        .Name("TabStrip")
    .SelectedIndex(1)
    
    .ClientEvents(events =>  events
        .OnSelect("onSelect")
        .OnLoad("OnLoad"))
            
    .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>);
               
        })
                                         
      
Grid 1 view:

staticlistgrid.cshtml



<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)
                         )



  Grid 2 view:
@model  IOrderedEnumerable<CdcSoftware.Pivotal.ThinClient.Common.ViewBag.MetaqueryViewModel>
           
               
            
             @(Html.Telerik().Grid(Model)

                                .Name("MyStaticListsGrid")
                                                  .Columns(columns =>
                                                  {

                                                      columns.Bound(o => o.Name).Width(120).Title("Static List Name");
                                                      if (ViewData["AllSearches"].ToString() != "false") columns.Bound(o => o.ListType);

                                                  })
                                                 .DataBinding(dataBinding => dataBinding.Ajax().Select("_CustomBinding",
                                                                                "Metaquery"))
                                .HtmlAttributes(new { style = "text-align:left" })
                                
                                .Sortable(sorting => sorting
                                        .SortMode(GridSortMode.SingleColumn))
                                  .Scrollable(scroll => scroll.Height("385px"))
                                 
                                  
                         )


 How can I dynamically load "MyStaticListsGrid" when "My Static Lists" tab is clicked and how do I filter this grid on "Permission" field?

Regards,
Murali

[Atanas Korchev]

Hello Murali,

 What do you mean by dynamically loading a tab? Perhaps you need to load it on demand with Ajax? If this is the case you can check this code library project which shows how to load a grid inside a tabstrip on demand.

 To filter the grid you can use its Filterable method:

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Filterable(filtering => filtering.Filters(filters => 
        {
            filters.Add(o => o.ContactName).StartsWith("Paul").And().EndsWith("Wilson");
        }))
%>

Regards,
Atanas Korchev
the Telerik team

[Murali]

Hi Atanas,
Tabs need not be loaded dynamically. I have to load the frid dynamically on click of the tab.  Also on loading the grid, i need to filter it contents. I need to do this on the client side and hence need to identify the grid inside the tabstrip on the client side using jquery or javascript. How do I identify the grid inside the tab on the client side? How do i do client side filtering on this grid?

[Atanas Korchev]

Hi Murali,

 You should subscribe to the OnSelect event of the tabstrip. Then you can use the grid client-side API to obtain the instance of the grid client side object and then call the filter method to filter it.

Greetings,
Atanas Korchev
the Telerik team