Telerik Grid 客户端行选择答案

【问题标题】：Telerik Grid Client-Side Row SelectionTelerik Grid 客户端行选择
【发布时间】：2011-04-11 16:00:13
【问题描述】：

我在 Stackoverflow 和 Telerik 上彻底研究了这些问题，但仍未找到解决这些问题的方法。这就是我想要做的。我有一个使用 Linq 进行数据绑定的 RadGrid 控件。基于用户的行选择，我想从数据库中查询其他信息并将其放入另一个控件中（假设其他控件是 Rad Listview）。我想在所有客户端都执行此操作，而不必将整个页面发布回服务器。另外，我正在尝试在页面上放置一个按钮，以将行选择发送回服务器以触发代码隐藏中的某些操作。

如果有人可以告诉我如何执行以下操作，我会很高兴：

使用 Javascript 获取用户行选择并在另一个控件中从该选择填充键值（使用 Telerik 客户端行选择，而不是通常的 asp.net 选择链接）
使用上一个问题中的键值发出 Ajax 请求，以从数据库中检索一些附加信息。我假设我将在服务器端使用 Linq 来处理这个请求。刷新另一个控件以显示该信息。
在页面上放置一个按钮，将第一个问题中的键值发送回服务器，然后将其捕获并存储在变量中。

我意识到上面的 1-3 项有相当多的重叠，但我希望通过像我所做的那样分解它，我将能够更好地理解客户端和服务器端代码如何在 asp 中交互的机制。 net + telerik 环境。

以下是一些我认为有帮助的相关帖子：

//我会发布其他链接，但我的 SO 声誉评分不允许我这样做

这是我页面中的一些代码。我的网格中的相关键值是包标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这是标题

     <!-- Begin Navigation --> 
     <div id="navigation"> 

           This is the Navigation        

     </div> 
     <!-- End Navigation --> 

     <!-- Begin Faux Columns --> 
     <div id="faux"> 

           <!-- Begin Left Column --> 
           <div id="leftcolumn"> 

                 This is the left column

                 <telerik:RadTreeView ID="RadTreeView1" Runat="server" Skin="Telerik">
                     <Nodes>
                         <telerik:RadTreeNode runat="server" Expanded="True" Text="My Account">
                             <Nodes>
                                 <telerik:RadTreeNode runat="server" Text="Inventory">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Protection Plan">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Addresses">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Profile">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Alert Preferences">
                                 </telerik:RadTreeNode>
                             </Nodes>
                         </telerik:RadTreeNode>
                         <telerik:RadTreeNode runat="server" Text="Supplies">
                         </telerik:RadTreeNode>
                     </Nodes>
                 </telerik:RadTreeView>

           </div> 
           <!-- End Left Column --> 

           <!-- Begin Content Column --> 
           <div id="content"> 

                This is the main body where the inventory stuff goes

                <form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <%--Needed for JavaScript IntelliSense in VS2010--%>
        <%--For VS2008 replace RadScriptManager with ScriptManager--%>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
    //Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
        ontabclick="RadTabStrip1_TabClick" SelectedIndex="2" AutoPostBack="True" 
        Skin="Vista">
        <Tabs>
            <telerik:RadTab runat="server" Text="Pending">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="In Storage">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Returned" Selected="True">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>


    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" 
        CellSpacing="0" GridLines="None" AutoGenerateColumns="False" 
        Skin="Vista" Width="654px">
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            <ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected"></ClientEvents>
        </ClientSettings>

<Columns>
    <telerik:GridClientSelectColumn FilterControlAltText="Filter column column" 
        UniqueName="column0" CommandName="SelectRow">
    </telerik:GridClientSelectColumn>
    <telerik:GridBoundColumn DataField="Tag" 
        FilterControlAltText="Filter column2 column" HeaderText="Tag" 
        UniqueName="column1">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Name" 
        FilterControlAltText="Filter column3 column" HeaderText="Name" 
        UniqueName="column3">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Received" DataType="System.DateTime" 
        EmptyDataText="Not Received" FilterControlAltText="Filter column4 column" 
        HeaderText="Received" UniqueName="column4" DataFormatString="{0:MM/dd/yy}">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Shipped" EmptyDataText="In Storage" 
        FilterControlAltText="Filter column5 column" HeaderText="Shipped" 
        UniqueName="column5" DataFormatString="{0:MM/dd/yy}">
    </telerik:GridBoundColumn>
    <telerik:GridRatingColumn FilterControlAltText="Filter column1 column" 
        HeaderText="Condition" ItemCount="3" UniqueName="column1">
    </telerik:GridRatingColumn>
</Columns>

        <SelectedItemStyle BackColor="White" />

【问题讨论】：

标签： c# asp.net ajax telerik

【解决方案1】：

如果您正在谈论真正的客户端脚本，则网格应该将选择传递给 Web 服务，并通过其客户端 API 填充下一个控件（如果 RadListView 支持客户端绑定，我是不确定是否如此）。这绝对是可能的，但比下面的解决方案要多得多。然而：

如果你想回发到服务器，为什么要在客户端填充列表视图？任何客户端填充的数据都会丢失（因为它没有存储在视图状态中），因此如果您要回发到服务器以存储变量，客户端绑定将无济于事。自从您使用 Telerik 以来，最简单的方法是在网格上设置 ClientSettings.EnablePostBackOnRowClick="true"，并在标记或代码中设置 ClientSettings.Selecting.AllowRowSelect="true"。然后，将这两个控件包装在一个 RadAjaxPanel 中，这样当回发发生时，您可以通过代码来处理。

当点击网格的行时，它会回发，事件都在服务器端工作，值存储在你的变量中（只要它存储在会话，缓存，视图状态中），然后你可以填充列表视图。

HTH。

【讨论】：

我认为我感兴趣的不是真正的客户端脚本。使用您提出的解决方案，您能否给我一个代码示例，说明您将如何完成以下操作。假设您正在实现 webmail 界面，该界面由一个网格组成，该网格在一个框顶部列出了消息，该框显示了所选消息的详细信息。您的方法是否可以在不重新加载回发时重新加载整个页面的情况下刷新消息详细信息？
是的，但实际上，用 RadAjaxPanel 包装这两个控件仍然会将数据发送回页面，因此不会为您节省很多回发。 RadAjaxPanel 仍将其内容和与视图状态相关的数据发布到服务器。因此，通过这种方式，将要自动更新的控件包装在 RadAjaxPanel 中（这很像 UpdatePanel 示例）或使用 RadAjaxManager。查看他们的演示站点以了解如何使用：demos.telerik.com/aspnet-ajax/ajax/examples/common/fileupload/…