Button Open Context Menu

[Brian]

I am trying to open the context menu of a DetailTable in the MasterTableView. There is only 1 table and it has the columns that we want the users to select columns. Honestly, this should be something out of coding, like as header option. RIght clicking is not something the user would know, unless told. A button is perfectly normal. So i tried a button and it doesnt open the Context Menu of the GridTableView nested in the MasterTableView

 

 

 

 

<telerik:RadButton runat="server" AutoPostBack="false" OnClientClicked="ShowMenu" Text="Column Chooser" RenderMode="Lightweight" />

 

<telerik:RadGrid runat="server" ID="RadGridMembers"...

    <MasterTableView runat="server".... 

       <DetailTables>

           <telerik:GridTableView Name="MemberDetailTable"....

</telerik:GridTableView>

</DetailTables>
</MasterTableView>
</telerik:RadGrid>

 

 

 

 

[Brian]

and script

 

            function ShowMenu() {               
                var RadGrid = $find("<%=RadGridMembers.ClientID %>");
                var grid = RadGrid.get_detailTables()[0];
                grid.get_headerMenu().show(window.event);
            }

[Eric R | Senior Technical Support Engineer]

Hi Brian,

The window.event is only available in Internet Explorer which might be part of the issue depending on which browser is in use. The other part is the use of the client-side objects in the event handler. Let me explain in more detail below. 

Grid Client-Side Objects

The GridTableView client-side object doesn't contain a method for get_headerMenu(). This means we'll have to start at the top and drill-down to the right object. The columns object is a good location for displaying the header context menu.

Additionally, the args.get_domEvent method can be used for the event input.

See the following code snippet for an example of how to do this on the OrderID column for the Declarative Relation Hierarchy demo.

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript">
        function OnClientClicked(sender, args) {
            var event = args.get_domEvent();
            var grid = $find("<%=RadGrid1.ClientID %>");
            //get all detail tables in the hierarchy
            var detailTablesArray = grid.get_detailTables();

            //get all the columns in the first detail table
            var columns = detailTablesArray[0].get_columns();
            for (var i = 0; i < columns.length; i++) {
                // switch on a specific column, here we'll use OrderID
                if (columns[i].get_uniqueName() == "OrderID") {
                    // show the context header menu
                    columns[i].showHeaderMenu(event, 75, 20);
                }
            }
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadButton1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadButton ID="RadButton1" runat="server" Text="Show OrderID Context Menu" OnClientClicked="OnClientClicked"></telerik:RadButton>
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" OnPreRender="RadGrid1_PreRender" ShowStatusBar="true"
    DataSourceID="SqlDataSource1" runat="server" AutoGenerateColumns="False" PageSize="7"
    AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True" GridLines="None">
    <PagerStyle Mode="NumericPages"></PagerStyle>
    <MasterTableView EnableHierarchyExpandAll="true" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True">
        <DetailTables>
            <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
                EnableHeaderContextMenu="true"
                runat="server">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID"></telerik:GridRelationFields>
                </ParentTableRelation>
                <DetailTables>
                    <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="OrderID" DataSourceID="SqlDataSource3" Width="100%"
                        runat="server">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID"></telerik:GridRelationFields>
                        </ParentTableRelation>
                        <Columns>
                            <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                DataField="UnitPrice" UniqueName="UnitPrice">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                DataField="Quantity" UniqueName="Quantity">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                DataField="Discount" UniqueName="Discount">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                        </SortExpressions>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                        DataField="OrderID" UniqueName="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                        DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
                        DataField="Freight" UniqueName="Freight">
                    </telerik:GridBoundColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                </SortExpressions>
            </telerik:GridTableView>
        </DetailTables>
        <Columns>
            <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                DataField="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                DataField="ContactName" UniqueName="ContactName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                DataField="CompanyName" UniqueName="CompanyName">
            </telerik:GridBoundColumn>
        </Columns>
        <SortExpressions>
            <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
        </SortExpressions>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
    runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
    runat="server">
    <SelectParameters>
        <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string"></asp:SessionParameter>
    </SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NortwindConnection %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Order Details] where OrderID = @OrderID"
    runat="server">
    <SelectParameters>
        <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32"></asp:SessionParameter>
    </SelectParameters>
</asp:SqlDataSource>

Wrapping Up

Another great reference is the Grid ContextMenu demo which illustrates opening the menu at the header and the row level. For more details on client-side events, see the Grid Client-Side Programming documentation.

Please let me know if you need any additional information. Thank you for choosing UI for ASP.NET AJAX.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik