Telerik ASP.Net Radgrid显示/隐藏过滤器

时间:2014-07-25 12:39:30

标签: javascript asp.net vb.net telerik radgrid

我在运行时基于传入的配置构建ASP.Net Telerik Radgrid,因此我的ASPX页面上没有radgrid标记。我正在尝试实现功能,我可以在网格的标题中添加一个按钮来显示或隐藏列过滤器。

我正在使用Command Item Template提供显示/隐藏按钮,但是当我点击按钮以使用grid.get_masterTableView() Javascript方法显示或隐藏过滤器时使用Telerik Radgrid Client API 函数无法在网格对象上找到ShowHideFilters方法。

知道为什么缺少这种方法或者是实现我需要的行为的更好的替代方法吗?

{{3}}

来自Telerik API的JavaScript示例

get_masterTableView()

网页

function getMasterTableView() {
    var grid = $find("<%=RadGrid1.ClientID %>");
    var masterTableView = grid.get_masterTableView();              
}  

代码

在Page_Init

中从头开始构建网格
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ShowGrid.aspx.vb" Inherits="ShowGrid" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <form id="ShowGrid" runat="server">

        <telerik:RadScriptManager ID="ScriptManager" runat="server">
        </telerik:RadScriptManager>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfigureGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfigureGrid" LoadingPanelID="AjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server"/>

        <asp:SqlDataSource ID="PrimaryDataSource" runat="server"/>
    </form>

    <script type="text/javascript">

        function ShowHideFilters()
        {
            var grid = document.getElementById("ConfigureGrid")
            if (grid)
            {
                var masterTableView = grid.get_masterTableView();
                window.alert(masterTableView.id)
            }

            window.alert(grid.id)
        }

    </script>

</body>
</html>

项目模板

Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init

    Try
        BuildConfiguration()
        CreateTitleObject()
        CreateRadFilter()
        LoadDataSource()
        CreateRadGrid()
    Catch ex As Exception
        CreateExceptionDisplay(ex)
    End Try

End Sub

添加项目模板

Friend Class RadGridCommandItemFilterTemplate
    Implements ITemplate

    Protected showHideFilterButton As Button

    Public Sub New()
        MyBase.New()
    End Sub

    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
        showHideFilterButton = New Button
        showHideFilterButton.EnableTheming = True
        showHideFilterButton.ID = "showHideFilterButton"
        showHideFilterButton.Text = "Show / Hide Filters"
        showHideFilterButton.CommandName = "ShowHideFilters"
        showHideFilterButton.OnClientClick = "ShowHideFilters()"
        container.Controls.Add(showHideFilterButton)
    End Sub

End Class

2 个答案:

答案 0 :(得分:1)

请检查您是否有正确的网格ID以及是否使用$ find方法。提供的代码有点乱,我不确定调用哪个部分。

在函数getMasterTableView中你使用$ find但我猜错了你的id。此外,如果此功能在javascript文件中,那么&#34;&lt;%= RadGrid1.ClientID%&gt;&#34;不会解决纠正身份的问题。它必须在aspx文件中才能这样做。

在ShowHideFilters函数中使用错误函数getElementById将返回DOM对象而不是Telerik。还请注意您的网格有&#34; TestGrid&#34;标识。

更新: 要获取主表,您需要使用find方法。如果你想要更通用的解决方案,那么我建议你在你的按钮上添加简单的css类。然后在onLoad事件中为这些按钮添加处理程序。如果你有jQuery元素放在网格中,那么你可以使用以下函数动态定位网格:

function getParentGrid($element) {
    var $parentGrid = $element.closest("div.RadGrid");
    var parentGridId = $parentGrid[0].id;
    return  window.$find(parentGridId);
}

答案 1 :(得分:0)

在Telerik支持的帮助下,我想出了这个。

项目模板

Friend Class RadGridCommandItemFilterTemplate
    Implements ITemplate

    Public showHideFilter As ImageButton
    Public bannerTitle As Label

    Private gridClientID As String
    Private showFilter As Boolean = False
    Private title As String = String.Empty

    Public Sub New()
        MyBase.New()
    End Sub

    Public Sub New(gridClientID As String, showfilter As Boolean, title As String)
        MyBase.New()
        Me.gridClientID = gridClientID
        Me.showFilter = showfilter
        Me.title = title
    End Sub

    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn

        If Not String.IsNullOrWhiteSpace(title) Then
            bannerTitle = New Label With {.Text = title, .CssClass = "title"}
            container.Controls.Add(bannerTitle)
        End If

        If showFilter Then
            showHideFilter = New ImageButton With {.ID = "showHideFilter",
                                                 .CommandName = "ShowHideFilters",
                                                 .CssClass = "searchButton"}

            showHideFilter.Attributes.Add("onclick", (Convert.ToString("setFilter('") & gridClientID) + "'); return false;")

            container.Controls.Add(showHideFilter)
        End If

    End Sub

End Class

Java脚本

<script type="text/javascript">

    function pageLoad(sender, args) {
        setFilter('ConfigureGrid');
    }

    function setFilter(gridClientID) {
        var grid = $find(gridClientID);
        if (grid.get_masterTableView().get_isFilterItemVisible()) {
            grid.get_masterTableView().hideFilterItem();
        }
        else {
            grid.get_masterTableView().showFilterItem()
        }
    }
</script>