Rad Menu and Rad Window

[SKande]

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.

[SKande]

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.

[User]

Hi,

One suggestion is you can try to open the radwindow on client side click event of RadMenu(ie OnClientItemClicking/OnClientItemClicked).
Thanks.

[Shinu]

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.

[SKande]

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

[Shinu]

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.

[SKande]

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.