Radcontextmenu w/Radgrid Newbie Q

5 posts, 1 answers
  1. Nimesh
    Nimesh avatar
    24 posts
    Member since:
    Dec 2007

    Posted 09 May 2012 Link to this post

    Can someone post a link or code to guide me to learn the following? I want to do 2 distinct things, separately when the right click of teh radcontext menu.
    1. how to use a value or datakeyvalue from a RadGrid with a radcontextmenu to incorporate it into the NavigateUrl of the radcontext menu item. I'd like to place the value into a querystring and go to another page.
    2. Not as important, but can I open up a modal pop up window from the radcontextmenu and also reference the datakeyname and/or a cell value to populate controls in the window from a database.

    Any help would be greatly appreciated, I'm getting exhausted from the searching and not getting anywhere. Just point me in the right direction!

    Regards, Nimesh Jagota
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 May 2012 Link to this post

    Hello Nimesh,

    Here is the sample code based on this demo to access DataKeyNames on ItemClick event.
    aspx:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
       <Windows>
          <telerik:RadWindow ID="RadWindow1" runat="server">
             <ContentTemplate>
                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
              </ContentTemplate>
           </telerik:RadWindow>
       </Windows>
    </telerik:RadWindowManager>
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
      <MasterTableView DataKeyNames="OrderID" >
       <Columns>
         <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID" HeaderText="OrderID"></telerik:GridBoundColumn>
        </Columns>
       </MasterTableView>
       <ClientSettings>
          <ClientEvents OnRowContextMenu="RowContextMenu" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadContextMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" OnItemClick="RadMenu1_ItemClick">
       <Items>
          <telerik:RadMenuItem Text="Add" />
          <telerik:RadMenuItem Text="Edit" />
        </Items>
    </telerik:RadContextMenu>
    JS:
    <script type="text/javascript">
        function RowContextMenu(sender, eventArgs) {
            var menu = $find("<%=RadMenu1.ClientID %>");
            var evt = eventArgs.get_domEvent();
            menu.show(evt);
    }
    </script>
    C#:
    protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
    {
      foreach (GridDataItem item in grdCampaignStatus.MasterTableView.Items)
      {
        string v = item.GetDataKeyValue("OrderID").ToString();//accessing the datakeynames
        RadMenuItem menu = RadMenu1.FindItemByText("Add");
        menu.NavigateUrl = "Categories.aspx?categoryID=" + v;
        RadWindow1.VisibleOnPageLoad = true;
        TextBox txt = (TextBox)RadWindow1.ContentContainer.FindControl("TextBox1");//passing the datakeynames to the textbox in RadWindow.
        txt.Text = v;
      }
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nimesh
    Nimesh avatar
    24 posts
    Member since:
    Dec 2007

    Posted 11 May 2012 Link to this post

    Sorry this did not work correctly. The when I right click the context menu after the grid initially loads, the "Edit" item does not display anything from the generated navigateURL in the codebehind, but it does cause the entire grid to postback and reload. Once it does that, then the Edit item in the context menu contains a navigateURL with a datakeyname, but not from the row that was initially selected before the postback. With 5000 records in the Grid, I can't tell which row, but its not from the first page for sure.

    The radwindow part is not relevant, I really just want a context menu item navigateURL to have the datakeyvalue of the radgrid row that I selected so it navigates to the web page with the correct querystring value. Is it possible that someone could refine this answer for me? I suspect taht this can be done client side, hopefully without causing a needless postback.

    Thanks very much for your attempt Shinu!

    Regards, Nimesh
  5. Nimesh
    Nimesh avatar
    24 posts
    Member since:
    Dec 2007

    Posted 11 May 2012 Link to this post

    Just in case anyone would like to have the answer, I did resolve my own problem. I had to guess the set_navigateurl aspect. Now can someone post how to open a radwindow (without causing a postback on the radgrid)?
    <
    telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
      
            <telerik:RadCodeBlock runat="server" ID="radCodeBlock">
                <script type="text/javascript">
                    function showFilterItem() {
                        $find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();
                    }
                    function hideFilterItem() {
                        $find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
                    }
                    function RowContextMenu(sender, eventArgs) {
                        var NavigateUrl;
                        var grid = window["<%= RadGrid1.ClientID %>"];
                        var masterTableView = grid.MasterTableView;
                        var menu = $find("<%=RadContextMenu1.ClientID %>");
                        //document.getElementById("<%= Label1.ClientID %>").innerHTML = eventArgs.getDataKeyValue("ReservationID");
                        NavigateUrl = document.getElementById("<%= Label1.ClientID %>").innerHTML = eventArgs.getDataKeyValue("ReservationID");
                        var evt = eventArgs.get_domEvent();
                        var menuItem = menu.findItemByText("Edit");
                        menuItem.set_navigateUrl("Reservation.aspx?ReservationID=" + NavigateUrl);
                        menu.show(evt);
                    }
      
                </script>
            </telerik:RadCodeBlock>
      
      
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="500" Height="600px" AllowFilteringByColumn="True" 
            AllowPaging="True" AllowSorting="True" DataSourceID="SqlDsGetRetReservations" 
            GridLines="None" ShowGroupPanel="True" Skin="Windows7" 
            AutoGenerateColumns="False" EnableLinqExpressions="false">
            <PagerStyle Mode="Slider"></PagerStyle>
            <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" 
                ReorderColumnsOnClient="True">
                <ClientEvents OnRowContextMenu="RowContextMenu" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
            <MasterTableView DataSourceID="SqlDsGetRetReservations" ClientDataKeyNames="ReservationID" DataKeyNames="ReservationID"  AllowFilteringByColumn="true">
                <Columns>
                    <telerik:GridHyperLinkColumn DataNavigateUrlFormatString="~/Reservation.aspx?ReservationID={0}"  FilterControlWidth="50px" DataNavigateUrlFields="ReservationID" DataTextFormatString="{0}" DataTextField="ReservationID" ItemStyle-Width="100px" HeaderText="Resid" SortExpression="ReservationID" UniqueName="ResID">                
                    </telerik:GridHyperLinkColumn>
                    <telerik:GridBoundColumn DataField="DeptID" FilterControlWidth="50px" ItemStyle-Width="100px" HeaderText="DeptID" SortExpression="DeptID" UniqueName="DeptID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Chairperson" HeaderText="Chairperson" AutoPostBackOnFilter="false" SortExpression="Chairperson" UniqueName="Chairperson">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Passcode" FilterControlWidth="50px" ItemStyle-Width="100px" HeaderText="Passcode" SortExpression="Passcode" UniqueName="Passcode">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="PasscodeM" FilterControlWidth="50px" ItemStyle-Width="100px" HeaderText="PasscodeM" SortExpression="PasscodeM" UniqueName="PasscodeM">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName">
                    </telerik:GridBoundColumn>
                </Columns>
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                    <ExpandCollapseColumn ButtonType="ImageButton" Visible="True" UniqueName="ExpandColumn">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
            </MasterTableView>
        </telerik:RadGrid>
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnItemClick="RadContextMenu1_ItemClick" Skin="Windows7">
            <Targets>
                <telerik:ContextMenuControlTarget ControlID="RadGrid1" />
            </Targets>
            <Items>
                <telerik:RadMenuItem Text="Add" />
                <telerik:RadMenuItem Text="Edit" />
            </Items>
        </telerik:RadContextMenu>
    Regards, Nimesh
  6. Answer
    rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 15 May 2012 Link to this post

    Take a look at this article:
    http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html
    It explains three different ways to open a RadWindow via JavaScript. You can subscribe to any client-side event you need (e.g. rowClick for the grid, ItemClick for the context menu, etc.).
    This demo features a scenario that uses a RadWindow for editing a RadGrid, so you may find it useful as well: http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017