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

【问题标题】：Telerik ASP.Net Radgrid show / hide filtersTelerik ASP.Net Radgrid 显示/隐藏过滤器
【发布时间】：2014-09-17 07:51:08
【问题描述】：

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

我正在使用Command Item Template 来提供正在出现的显示/隐藏按钮，但是当我单击该按钮以使用ShowHideFilters Javascript 方法使用grid.get_masterTableView() 函数显示或隐藏过滤器时，它找不到网格对象上的get_masterTableView() 方法。

知道为什么缺少此方法或更好的替代方法来实现我需要的行为吗？

Telerik Radgrid Client API

来自 Telerik API 的 JavaScript 示例

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

页面

<%@ 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>

背后的代码

在 Page_Init 中从头开始构建网格

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

添加项目模板

grid.MasterTableView.CommandItemTemplate = New RadGridCommandItemFilterTemplate

【问题讨论】：

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

【解决方案1】：

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

在函数 getMasterTableView 中，您使用 $find 但我猜您的 id 错误。此外，如果此函数在 javascript 文件中，则 "" 将不会被解析为正确的 id。它必须在 aspx 文件中才能这样做。

在函数 ShowHideFilters 中使用错误的函数 getElementById 将返回 DOM 对象而不是 Telerik 对象。另请注意，您的网格具有“TestGrid”ID。

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

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

【讨论】：

我不能使用 $find 方法，因为组件是在运行时从后面的代码创建的。没有
我已经更新了答案，也许代码 sn-p 对你有帮助
无论如何，请确保设置网格的 ID，以编程方式创建的控件需要这些 ID，以便它们可以在回发后加载其 ViewState。不要把他们这一代留给机会和框架。另外，添加一个“return false;”如果您不希望它回发，请在按钮客户端处理程序中声明（我没有看到处理它的代码，所以我认为不需要它并且您希望在客户端完成此操作）。

【解决方案2】：

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

【讨论】：