2011-04-11 73 views
0

我已經在Stackoverflow和Telerik上深入研究了這些問題,但還沒有找到解決這些問題的方法。這是我想要做的。我有一個使用Linq的數據綁定的RadGrid控件。基於用戶的行選擇,我想從數據庫中查詢更多信息並將其放入另一個控件(讓我們假設其他控件目前是Rad Listview)。我想這樣做所有的客戶端,而不必將整個頁面發回到服務器。另外,我試圖在頁面上放置一個按鈕,將行選擇發送回服務器以觸發代碼隱藏中的某些操作。Telerik Grid客戶端行選擇

我喜歡它,如果有人能告訴我如何做到以下幾點:

  1. 使用Javascript獲取用戶行選擇,而在另一個控制填充從選擇鍵的值(使用Telerik的客戶端排選擇,而不是通常的asp.net選擇鏈接)
  2. 使用上一個問題的關鍵值創建一個Ajax請求,從數據庫中檢索一些附加信息。我假設我將在服務器端使用Linq來處理這個請求。刷新另一個控件以顯示該信息。
  3. 在頁面上放置一個按鈕,將第一個問題的關鍵值發送回服務器,並將其存儲在變量中。

我意識到在上面的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" /> 

回答

1

如果您正在談論真正的客戶端腳本,網格應將選擇傳遞給Web服務,並通過其客戶端API填充下一個控件(如果RadListView支持客戶端綁定,那麼我我不確定它的確如此)。這絕對是可能的,但比下面的解決方案更多的工作。但是:

如果你想回發到服務器,爲什麼在客戶端填充listview?任何客戶端填充的數據都會丟失(因爲它不存儲在視圖狀態中),所以如果您發回服務器以存儲變量,則客戶端綁定無效。自從您使用telerik以來,最簡單的方法是在網格上設置ClientSettings.EnablePostBackOnRowClick="true",並在標記或代碼中設置ClientSettings.Selecting.AllowRowSelect="true"。然後,將這兩個控件包裝在一個RadAjaxPanel中,這樣當回發發生時,您可以通過代碼處理所有這些。

當點擊網格行時,它會回傳,事件都在服務器端工作,值存儲在您的變量中(只要它保存在session,cache,viewstate中),然後您可以填充列表視圖。

HTH。

+0

我認爲我感興趣的不是真正的客戶端腳本。使用您提出的解決方案,您可以給我一個關於如何完成以下任務的代碼示例。假設您正在實施包含網格的網絡郵件界面,該網格在顯示所選消息的詳細信息的框的頂部列出消息。您的方法是否能夠刷新消息詳細信息,而無需在回發中重新加載整個頁面? – hughesdan 2011-04-11 17:02:54

+0

是的,但實際上,用RadAjaxPanel包裝這兩個控件仍然會將數據發回到頁面,所以它不會在回發中節省很多。 RadAjaxPanel仍將其內容和視圖狀態相關數據發佈到服務器。所以這樣,將想要自動更新的控件包裝到RadAjaxPanel中(這很像UpdatePanel示例)或使用RadAjaxManager。查看他們的演示網站以瞭解如何使用:http://demos.telerik.com/aspnet-ajax/ajax/examples/common/fileupload/defaultcs.aspx – 2011-04-11 17:58:48