Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Grid Clientside functions from Masterpage

1 Answer 119 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Farhan
Top achievements
Rank 1
Farhan asked on 23 Sep 2011, 03:55 PM
Hi,
   I have been stuck on this problem for a couple of days and even with trying everything havnt been able to resolve this. I am using a Masterpage and content pages with RadGrid. I have read its better to put a RadAjaxManager on the main page and use RadAjaxmanagerproxy on each page. I have some common functions like the Show/Hide filters functionality as shown in the demos. Instead of having these and other Grid client side events I want to put  these common client side event in the Masterpage or preferably in an external js file but when i take them out and put them in the Masterpage it just does not let me access the Grid client side events like .get_MasterTableView() . Can someone from Telerik please show with an example how to access the grid and the grids clientside events in the Masterpage? Also can I call the functions  (showFilterItem() /hideFilterItem()) like showFilterItem(gridID)  and pass the GridClient ID to the masterpage somehow? I have these filter options on every page and dont want to repeat these and other client side events on every page or hard code the GridID (GridProducts, GridOrders etc) in the function like i am doing below, can someone show me by code example please how to pass in the Grid ID on every page to the master page to access the grid from there?

Note*: I did var grid = $('[id$=GridProducts]')[0];   in the Masterpage javscript since Masterpages changes the ID of the grid and it becomes something like ct100_Masterpagecontent_productGrid.

Please give an example in code on how to do this since im sure having common client side functionality is a common request and would hopefully others as well. Thanks in advance!


ON MASTER PAGE JAVASCRIPT: 
  
 <script type="text/javascript">
  
        function showFilterItem(grid) {
                  
                //This finds the grid object but I cannot access  get_masterTableView() functions 
                var grid = $('[id$=GridProducts]')[0];
                  
              //Throws error Object reference not found???
                grid.get_masterTableView().showFilterItem();
            }
  
            function hideFilterItem(grid) {
                                           //Throws error cant find get_masterTableView() ??
                       grid.get_masterTableView().hideFilterItem();   
            }
  
    </script>
  
  
  
CONTENT PAGE HTML 
  
 <div style="text-align:center">
          <br />
          
             Show Filters:<input id="rad1" type="radio" name="showHideGroup" checked="checked" onclick="showFilterItem()" /><label for="rad1">Yes</label>
                          <input id="rad2" type="radio" name="showHideGroup"  onclick="hideFilterItem()" /><label for="rad2">No</label>
  
         </div>

1 Answer, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 23 Sep 2011, 05:49 PM
Hello,

Please try with below code snippet.

Site1.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="TelerikTest.Web.NewFolder1.Site1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>


Site1.master.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace TelerikTest.Web.NewFolder1
{
    public partial class Site1 : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
    }
}


WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TelerikTest.Web.NewFolder1.WebForm1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <script src="JScript1.js" type="text/javascript"></script>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function showFilterItem() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                ShowFilter(grid);
            }
 
            function hideFilterItem() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                HideFilter(grid);
 
            }
        </script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div style="text-align: center">
            <br />
            Show Filters:<input id="rad1" type="radio" name="showHideGroup" checked="checked"
                onclick="showFilterItem()" /><label for="rad1">Yes</label>
            <input id="rad2" type="radio" name="showHideGroup" onclick="hideFilterItem()" /><label
                for="rad2">No</label>
        </div>
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true"
            OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace TelerikTest.Web.NewFolder1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            dynamic data = new[] {
                new { ID = 1, Name ="Name1"},
                new { ID = 2, Name = "Name2"},
                new { ID = 3, Name = "Name3"},
                new { ID = 4, Name = "Name4"},
                new { ID = 5, Name = "Name5"}
            };
            RadGrid1.DataSource = data;
        }
    }
}


JScript1.js
function HideFilter(grid) {
    grid.get_masterTableView().hideFilterItem();
}
function ShowFilter(grid) {
    grid.get_masterTableView().showFilterItem();
}

Let me know if any concern.

Thanks,
Jayesh Goyani
Tags
Grid
Asked by
Farhan
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Share this question
or