简体   繁体   English

Telerik Grid客户端行选择

[英]Telerik Grid Client-Side Row Selection

I've researched these questions thoroughly on Stackoverflow and on Telerik but still have not figured out the solution to these questions. 我已经在Stackoverflow和Telerik上彻底研究了这些问题,但仍然没有找到解决这些问题的方法。 Here's what I am trying to do. 这就是我想要做的。 I have a RadGrid control that is databound using Linq. 我有一个使用Linq进行数据绑定的RadGrid控件。 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). 根据用户的行选择,我想从数据库中查询其他信息,并将其放入另一个控件中(假设当前其他控件是Rad Listview)。 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: 如果有人可以向我展示如何执行以下操作,我将非常乐意:

  1. 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) 使用Javascript获取用户行选择,并在另一个控件中填充该选择的键值(使用Telerik客户端行选择,而不是通常的asp.net选择链接)
  2. Make an Ajax request using the key value(s) from the previous question to retrieve some additional information from the database. 使用上一个问题的键值发出Ajax请求,以从数据库中检索一些其他信息。 I'm assuming that I will be using Linq on the server side to handle this request. 我假设我将在服务器端使用Linq来处理此请求。 Refresh another control to display that info. 刷新另一个控件以显示该信息。
  3. 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. 我意识到上面的1-3中存在很多重叠,但是我希望通过像我一样突破,可以更好地理解asp.net + telerik中客户端和服务器端代码如何交互的机制。环境。

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 //我会发布其他链接,因此我的SO信誉得分不允许我这样做

Here's some code from my page. 这是我页面上的一些代码。 The relevant key value from my grid is the package tag. 我的网格中的相关键值是package标签。

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

        <SelectedItemStyle BackColor="White" />

  <SelectedItemStyle BackColor="White" /> 

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). 如果您说的是真正的客户端脚本,则网格应将选择内容传递给Web服务,并通过其客户端API填充下一个控件(如果RadListView支持客户端绑定,那么我不确定它确实)。 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? 如果仍然要回发到服务器,为什么要在客户端填充listview? 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. 客户端填充的所有数据都会丢失(因为它没有存储在viewstate中),因此如果您将其回发到服务器以存储变量,则客户端绑定将无济于事。 The easiest way since you are doing telerik is to set the ClientSettings.EnablePostBackOnRowClick="true" on the grid, and the ClientSettings.Selecting.AllowRowSelect="true" in markup or code. 自进行Telerik以来,最简单的方法是在网格上设置ClientSettings.EnablePostBackOnRowClick="true" ,并在标记或代码中设置ClientSettings.Selecting.AllowRowSelect="true" Then, Wrap these two controls in a RadAjaxPanel, so that when the postback happens, you can handle it all through code. 然后,将这两个控件包装在RadAjaxPanel中,以便在发生回发时,可以通过代码处理所有这些控件。

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. 当单击网格的行时,它回发,所有事件都在服务器端起作用,该值存储在变量中(只要将其存储在会话,缓存,viewstate中),然后就可以填充列表视图。

HTH. HTH。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM