This is a migrated thread and some comments may be shown as answers.

Rad Menu and Rad Window

6 Answers 120 Views
Menu
This is a migrated thread and some comments may be shown as answers.
SKande
Top achievements
Rank 2
SKande asked on 30 Aug 2013, 09:09 PM

Hello,

  I ahve a radwindow and rad menu and I am populating the radmenu dynamically f and on click of a particular child item i need to open a radwindow but when ever clicks on the rad menu options the rad window is opened for two seconds and closed how to stop the postback generated by radMenu.

6 Answers, 1 is accepted

Sort by
0
SKande
Top achievements
Rank 2
answered on 30 Aug 2013, 09:11 PM
Only on a particular menu option i need to open a rad window but the problem is when ever user clicks on the option the rad windows and closes in 2 seconds and go for a postback. How to stop postback for that particular option.
0
User
Top achievements
Rank 2
answered on 01 Sep 2013, 01:48 PM
Hi,

One suggestion is you can try to open the radwindow on client side click event of RadMenu(ie OnClientItemClicking/OnClientItemClicked).
Thanks.
0
Accepted
Shinu
Top achievements
Rank 2
answered on 02 Sep 2013, 06:02 AM
Hi JJ,

The RadWindow is opened for a few seconds and then disappears due to the postback generated by the RadMenu and RadMenu postback happens when you subscribe to the OnItemClick server-side event. You can display the RadWindow in two ways. You can either disable the RadWindow postback and display the RadWindow from client side or you can open the RadWindow from server side code so that the postback wont interrupt. Please have a look into the following code I tried which works fine at my end.

ASPX:
<telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClicking="OnClientItemClicking"
    OnItemClick="RadMenu1_ItemClick">
    <Items>
        <telerik:RadMenuItem runat="server" Text="Open">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Open From Server">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Open From Client">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Edit">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>
<telerik:RadWindow ID="RadWindow1" runat="server" Width="400px" Height="400px" NavigateUrl="http://www.telerik.com">
</telerik:RadWindow>

C#:
protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
{
    if (e.Item.Text == "Open From Server")
    {
        RadWindow1.VisibleOnPageLoad = true;
    }
}

JavaScript:
<script type="text/javascript">
    function OnClientItemClicking(sender, args) {
        if (args.get_item().get_text() == "Open From Client") {
            var radwindow = $find('<%=RadWindow1.ClientID %>');
            radwindow.show();
            args.set_cancel(true);
        }
    }
</script>

Thanks,
Shinu.
0
SKande
Top achievements
Rank 2
answered on 03 Sep 2013, 02:44 PM
Thank you Shinu It works fine now but one issue I have dropdowns and grid in the radwindow when ever user selects any option it goes for a postback user can view radwindow closing and opening after postback creating a flicker effect how can we solve this does radwindow supports ajax
0
Shinu
Top achievements
Rank 2
answered on 04 Sep 2013, 10:32 AM
Hi JJ,

This issue can be resolved using a RadAjaxPanel. Please have a look at the following full code I tried to achieve your scenario.

ASPX:
<div>
    <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClicking="OnClientItemClicking"
        OnItemClick="RadMenu1_ItemClick">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Open">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Open From Server">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Open From Client">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Edit">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    <telerik:RadWindow ID="RadWindow1" runat="server" Width="400px" Height="400px" ReloadOnShow="true">
        <ContentTemplate>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <telerik:RadDropDownList ID="RadDropDownList1" runat="server" AutoPostBack="true"
                    OnSelectedIndexChanged="RadDropDownList1_SelectedIndexChanged">
                    <Items>
                        <telerik:DropDownListItem runat="server" Text="Select" Value="-1" Selected="true" />
                        <telerik:DropDownListItem runat="server" Text="France" Value="0" />
                        <telerik:DropDownListItem runat="server" Text="Brazil" Value="1" />
                        <telerik:DropDownListItem runat="server" Text="USA" Value="2" />
                    </Items>
                </telerik:RadDropDownList>
                <br />
                <br />
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource1">
                </telerik:RadGrid>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    SelectCommand="select CustomerID, CompanyName, City, Country from [Customers];">
                </asp:SqlDataSource>
            </telerik:RadAjaxPanel>
        </ContentTemplate>
    </telerik:RadWindow>
</div>

C#:
protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
{
    if (e.Item.Text == "Open From Server")
    {
        RadWindow1.VisibleOnPageLoad = true;
    }
}
protected void populateGrid(string countryName)
{
    if (countryName.Equals("Select"))
    {
        SqlDataSource1.SelectCommand = "select CustomerID, CompanyName, City, Country from [Customers];";
        RadGrid1.Rebind();
    }
    else
    {
        SqlDataSource1.SelectCommand = "select CustomerID, CompanyName, City, Country from [Customers] where Country='" + countryName + "';";
        RadGrid1.Rebind();
    }
}
protected void RadDropDownList1_SelectedIndexChanged(object sender, Telerik.Web.UI.DropDownListEventArgs e)
{
    string selectedItem = RadDropDownList1.SelectedText;
    populateGrid(selectedItem);
}

JavaScript:
<script type="text/javascript">
    function OnClientItemClicking(sender, args) {
        if (args.get_item().get_text() == "Open From Client") {
            var radwindow = $find('<%=RadWindow1.ClientID %>');
            radwindow.show();
            args.set_cancel(true);
        }
    }
</script>

Hope this helps,
Shinu.
0
SKande
Top achievements
Rank 2
answered on 04 Sep 2013, 02:07 PM
HEllo Shinu Thanks for the response it works exactly the way i wanted but my main page a update panel inwhic my user control is present inside a radsplitter now when i am using ajax panel it is not allowing mew to add ajax panel and the main page is full of user controls with update panels can we use ajax panel in ma user control and update panel in main page. If I want to go to ajax panel do i need to remove all the update panels in main page.
Tags
Menu
Asked by
SKande
Top achievements
Rank 2
Answers by
SKande
Top achievements
Rank 2
User
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Share this question
or