Change RenderMode According to Current Window Size

The below example demonstrates how to change RadMenu RenderMode, based on the size of current window (view). The change will occur on resize of window, when the given breakpoint is reached. Within the below implementation, for widths below 1000px RenderMode is set to "Mobile". For widths above this value RenderMode is "Lightweight".

<%--The RadAjaxManager initiates AJAX postback each time RenderMode needs to be changed--%>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" ClientIDMode="Predictable">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<%--Include a RadStyleSheetManager to your page--%>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<%--This Menu switches depending on the breakpoint that is set in the JavaScript code--%>
<div>
    <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
</div>

// Breakpoint is set to 1000px
var breakPointsWidth = 1000;

var $ = $telerik.$;
var $T = Telerik.Web.UI;

var ajaxManager;
var bigResolution;
var isInLightweight;
var isInMobile;

function pageLoad() {
    var menu = $find('RadMenu1');

    // Identify the current RadMenu RenderMode
    var currentRenderMode = menu.get_renderMode();
    isInLightweight = currentRenderMode === $T.RenderMode.Lite;
    isInMobile = currentRenderMode === $T.RenderMode.Mobile;

    ajaxManager = $find('RadAjaxManager1');

    verifyRenderModeAgainsResolution();
}

$(window).resize(function () {
    verifyRenderModeAgainsResolution();
});

function verifyRenderModeAgainsResolution() {
    // Identify current window size
    bigResolution = ($(window).width() > breakPointsWidth);
    if ((bigResolution && !isInLightweight) || (!bigResolution && !isInMobile)) {
        changeRenderMode();
    }
}

function changeRenderMode() {
    // Initiate AJAX request using RadAjaxManager
    ajaxManager.ajaxRequest(bigResolution);
    isInMobile = !isInMobile;
    isInLightweight = !isInLightweight;
}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (Boolean.Parse(e.Argument))
    {
        RadMenu1.RenderMode = RenderMode.Lightweight;
    }
    else
    {
        RadMenu1.RenderMode = RenderMode.Mobile;
    }
}

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
    If [Boolean].Parse(e.Argument) Then
        RadMenu1.RenderMode = RenderMode.Lightweight
    Else
        RadMenu1.RenderMode = RenderMode.Mobile
    End If
End Sub

See Also

• Render Modes

• Mobile Rendering