Telerik Grid 客户端行选择
我已经在 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" />
I've researched these questions thoroughly on Stackoverflow and on Telerik but still have not figured out the solution to these questions. Here's what I am trying to do. I have a RadGrid control that is databound using Linq. Based on the user's row selection I'd like to query additional information from the database and drop it into another control (let's assume that other control is a Rad Listview for the moment). I'd like to do this all clientside without having to post the whole page back to the server. Separately I'm trying to put a button on the page to send the row selection back to the server to trigger some action in the code-behind.
I'd love it if someone could show me how to do the following:
- Get the user row selection using Javascript and populate key values from that selection in another control (Using Telerik client-side row selection, not the usual asp.net select link)
- Make an Ajax request using the key value(s) from the previous question to retrieve some additional information from the database. I'm assuming that I will be using Linq on the server side to handle this request. Refresh another control to display that info.
- Put a button on the page to post the key value from the first question back to the server where it will be caught and stored in a variable.
I realize there's a fair amount of overlap in items 1-3 above but I hope that by breaking it out as I did I'll be better able to understand the mechanics of how client and server side code interacts in an asp.net + telerik environment.
Here are some related posts that I found helpful:
//I'd post other links my my SO reputation score does not permit me to do so
Here's some code from my page. The relevant key value from my grid is the package tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the Header
<!-- 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" />
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您谈论的是真正的客户端脚本，网格应该将选择传递给 Web 服务，并通过其客户端 API 填充下一个控件（如果 RadListView 支持客户端绑定，我不确定确实如此）。这绝对是可能的，但比下面的解决方案要做更多的工作。但是：
如果您无论如何都想回发到服务器，为什么要在客户端填充列表视图呢？任何客户端填充的数据都会丢失（因为它不存储在视图状态中），因此如果您回发到服务器来存储变量，则客户端绑定没有帮助。自从您进行 telerik 以来，最简单的方法是在网格上设置
ClientSettings.EnablePostBackOnRowClick="true"，并在标记中设置ClientSettings.Selecting.AllowRowSelect="true"或代码。然后，将这两个控件包装在 RadAjaxPanel 中，以便当回发发生时，您可以通过代码来处理它。当点击网格的行时，它会发回，事件都在服务器端工作，值存储在您的变量中（只要它存储在会话，缓存，视图状态中），然后您可以填充列表视图。
HTH。
If you are talking true client-side scripting, the grid should pass off the selection to a web service, and populate the next control via its client-side API (if the RadListView supports client-side binding, which I'm not sure that it does). It's definitely possible, but a lot more work than the solution below. However:
If you want to postback to the server anyway, why populate the listview on the client-side? Any client-side populated data is lost (because it isn't stored in viewstate), and so client-side binding doesn't help if you are posting back to the server to store a variable. The easiest way since you are doing telerik is to set the
ClientSettings.EnablePostBackOnRowClick="true"on the grid, and theClientSettings.Selecting.AllowRowSelect="true"in markup or code. Then, Wrap these two controls in a RadAjaxPanel, so that when the postback happens, you can handle it all through code.When clicking on the row of the grid, it posts back, the events all work on the server side, the value is stored in your variable (as long as its stored in session, cache, viewstate), and then you can populate the listview.
HTH.