RadMultiPage causing PostBack & slowness of page rendering

[Mohammad]

We are using Telerik control in our page & we use RadMultiPage control along with RadPageView and RadTreeView

 

We use to transfer Item from Left multipage to Right as shown in the figure (query.jpg), via drag & drop or select an item from Left & click on button to add that item on right side.

 

Every time we do this it is causing post back of the page. Can you look into the code & help us in stopping

The postback of the page

 

<asp:Content ID="FormContentPlace" ContentPlaceHolderID="FormContentPlaceHolder" runat="server">
<telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" />
<link href="../Skins/AdhocReports/TreeView.AdhocReports.css" rel="Stylesheet" type="text/css" />
<link href="../Skins/AdhocReports/Grid.AdhocReports.css" rel="Stylesheet" type="text/css" />
<link href="../Skins/Vista2009/Grid.Vista2009.css" rel="Stylesheet" type="text/css" />
<link href="../Skins/Office2009/Dock.Office2007.css" rel="Stylesheet" type="text/css" />
<link href="../Skins/Office2009/TabStrip.Office2007.css" rel="Stylesheet" type="text/css" />
    <![if !(IE)]>
        <link href="../Styles/AdhocReports.css" rel="stylesheet" type="text/css"/>
    <![endif]>
    <![if (IE)]>
        <link href="../Styles/AdhocReportsIE6.css" rel="stylesheet" type="text/css"/>
    <![endif]>
    <link href="../Skins/GIRadWindow/GIRadWindow/Window.GIRadWindow.css" rel="stylesheet" type="text/css" />
    <link href="../Skins/GIRadWindow/Window.css" rel="stylesheet" type="text/css" />

        <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script src="../Scripts/window.size.js" type="text/javascript"></script>
            <script src="../Scripts/RadGrid.js" type="text/javascript"></script>
    <script src="../Scripts/SysActions.js" type="text/javascript"></script>
    <script src="../Scripts/DisableTextSelect.js" type="text/javascript" ></script>
            <script type="text/javascript">
                /* <![CDATA[ */

                var gridId = "<%= TemplatesRadGrid.ClientID %>";
                var gridId1 = "<%= GeoUnitsRadGrid.ClientID %>";
                var gridId2 = "<%= BusUnitsRadGrid.ClientID %>";
                var gridId3 = "<%= EmpClassRadGrid.ClientID %>";

                 function EnablePostback(target) {
                    var existing = document.getElementById('jscript');
                    if (existing == null) {
                        var newelement = document.createElement('input');
                        newelement.setAttribute('id', 'jscript');
                        newelement.setAttribute('name', 'jscript');
                        newelement.setAttribute('value', 'yes');
                        newelement.setAttribute('type', 'hidden');
                        document.getElementById(target).appendChild(newelement);
                    }
                }

                function isMouseOverGrid(target)
                {
                    parentNode = target;
                    while (parentNode != null)
                    {
                        if (parentNode.id == gridId)
                        {
                            return parentNode;
                        }
                        parentNode = parentNode.parentNode;
                    }

                    return null;
                }

                function onNodeDragging(sender, args)
                {
                    var target = args.get_htmlElement();

                    if(!target) return;

                    if (target.tagName == "INPUT")
                    {
                        target.style.cursor = "hand";
                    }

                    var grid = isMouseOverGrid(target)
                    if (grid)
                    {
                        grid.style.cursor = "hand";
                    }
                }

                function dropOnHtmlElement(args)
                {
                 if(droppedOnInput(args))
                 return;

                 if(droppedOnGrid(args))
                 return;
                }

                function droppedOnGrid(args)
                {
                 var target = args.get_htmlElement();

                 while(target)
                 {
                     if(target.id == gridId || target.id == gridId1 || target.id == gridId2 || target.id == gridId3)
                     {
                        args.set_htmlElement(target);
                        return;
                     }

                    target = target.parentNode;
                 }
                 args.set_cancel(true);
                }

                function droppedOnInput(args)
                {
                 var target = args.get_htmlElement();
                    if (target.tagName == "INPUT")
                    {
                        target.style.cursor = "default";
                        target.value = args.get_sourceNode().get_text();
                        args.set_cancel(true);
                        return true;
                    }
                }

                function dropOnTree(args)
                {
                    var text = "";

                    if(args.get_sourceNodes().length)
                    {
                        var i;
                        for(i=0; i < args.get_sourceNodes().length; i++)
                        {
                            var node = args.get_sourceNodes()[i];
                            text = text + ', ' +node.get_text();
                        }
                    }
                }

                function clientSideEdit(sender, args)
                {
                 var destinationNode = args.get_destNode();

                 if(destinationNode)
                 {
                 var firstTreeView = $find('tvAvailableTemplates');


                        firstTreeView.trackChanges();

                        var sourceNodes = args.get_sourceNodes();
                 for (var i = 0; i < sourceNodes.length; i++)
                 {
                            var sourceNode = sourceNodes[i];
                            sourceNode.get_parent().get_nodes().remove(sourceNode);

                            if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);
                            if(args.get_dropPosition() == "above")     insertBefore(destinationNode, sourceNode);
                            if(args.get_dropPosition() == "below")     insertAfter(destinationNode, sourceNode);
                 }
                 destinationNode.set_expanded(true);
                 firstTreeView.commitChanges();
                 }
                }

                function insertBefore(destinationNode, sourceNode)
                {
                 var destinationParent = destinationNode.get_parent();
                 var index = destinationParent.get_nodes().indexOf(destinationNode);
                 destinationParent.get_nodes().insert(index, sourceNode);
                }

                function insertAfter(destinationNode, sourceNode)
                {
                 var destinationParent = destinationNode.get_parent();
                 var index = destinationParent.get_nodes().indexOf(destinationNode);
                 destinationParent.get_nodes().insert(index+1, sourceNode);
                }

                function onNodeDropping(sender, args)
                {
                 var dest = args.get_destNode();

                    if (dest)
                    {
                        var clientSide = false;

                        if(clientSide)
                        {

                            clientSideEdit(sender, args);
                            args.set_cancel(true);
                            return;
                        }

                        dropOnTree(args);
                    }else{
                        dropOnHtmlElement(args);
                    }
                }

                function onRowDropping(sender, args)
                    {
                        args.set_cancel(false);
                    }

                 function buttonMouseOver(sender,args){
                    //do nothing
                 }

        /* ]]> */

            </script>

        </telerik:RadScriptBlock>
    <style type="text/css">

        .loadingPanel
        {
            background: url(../Skins/GIRadWindow/GIRadWindow/Window/loading.gif) center center no-repeat ;
            background-color:#fff;
            position:absolute;
            width:100%;
            height:100%;
            text-align:center;
            vertical-align:middle;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10fff000,endColorstr=#10fff000);
            opacity:0.7;
            -moz-opacity:0.7;
        }

        .buttonDiv
        {
            position: relative !important;
        }
    </style>


<telerik:RadAjaxManager ID="RadAjaxManagerControl" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="TemplatesRadGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TemplatesRadGrid" LoadingPanelID="GridLoadingPanel"/>
                <telerik:AjaxUpdatedControl ControlID="tvAvailableTemplates"/>
                <telerik:AjaxUpdatedControl ControlID="AddButton"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="tvAvailableTemplates">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="tvAvailableTemplates" />
                <telerik:AjaxUpdatedControl ControlID="TemplatesRadGrid" LoadingPanelID="GridLoadingPanel"/>
                <telerik:AjaxUpdatedControl ControlID="AddButton"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="AddButton">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="tvAvailableTemplates" />
                <telerik:AjaxUpdatedControl ControlID="TemplatesRadGrid" LoadingPanelID="GridLoadingPanel"/>
                <telerik:AjaxUpdatedControl ControlID="AddButton"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<table>
<tr><td><div><asp:ValidationSummary ID="ValidationSummaryControl" runat="server" CssClass="Error" /></div></td></tr>
</table>

    <table style="height: 390px; table-layout: fixed;" id="outerdiv">
        <tr>
            <td width="45%" valign="top">
                <div class="LabelBold" style="margin-bottom: 10px; margin-top: 10px">
                    <gi:TranslationLabel runat="server" Text="Available Templates on the left can be dragged to the selected Templates on the right."
                        LabelID="AvailTemplatesIncluded" ID="TemplatesIncludedLabel1" CssClass="LabelBold"></gi:TranslationLabel>
                </div>
            </td>
            <td width="10%" class="imgBtnTable" align="center">
            </td>
            <td width="45%" valign="top">
                <div class="LabelBold" style="margin-bottom: 10px; margin-top: 10px">
                    <gi:TranslationLabel runat="server" Text="Template(s) Included" LabelID="TemplatesIncluded"
                        ID="TemplatesIncludedLabel" CssClass="LabelBold">
                    </gi:TranslationLabel>
                    <gi:TranslationValidator ID="cvTemplates" runat="server" LabelID="TemplateValidation"
                        ErrorMessage="Please select at least 1 plan type." CssClass="Error" OnServerValidate="cvTemplates_ServerValidate"
                        Display="Dynamic" EnableClientScript="False"> *</gi:TranslationValidator><br />
                     <br />
                </div>
            </td>
        </tr>
        <tr>
            <td width="45%" valign="top">
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Office2007" EnableEmbeddedSkins="false"
                    MultiPageID="RadMultiPage1" border="0" Style="width: 98%;" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab Text="Templates available">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <div id="tabframe" style="border-style: none; border-width: thin; overflow: auto;
                    width: 98%">
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" EnableViewState="true">
                        <telerik:RadPageView ID="RadPageView1" runat="server" EnableViewState="true">
                            <asp:Label ID="Label1" runat="server" Text="<br /><br />There are no columns to select for criteria."
                                Visible="False"></asp:Label>
                            <telerik:RadTreeView ID="tvAvailableTemplates" runat="server" CheckBoxes="false" EnableViewState="true"
                                CheckChildNodes="true" TriStateCheckBoxes="false" Skin="AdhocReports" EnableDragAndDrop="True"
                                CausesValidation="False" OnNodeDrop="tvAvailableTemplates_HandleDrop" OnClientNodeDropping="onNodeDropping"
                                OnClientNodeDragging="onNodeDragging" MultipleSelect="true" onmouseover="this.style.cursor='move'"
                                EnableDragAndDropBetweenNodes="true" EnableEmbeddedSkins="false" Height="300px">
                            </telerik:RadTreeView>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </div>
            </td>

[Dimitar Terziev]

Hi Mohammad,

A possible reason for the post-back which occurs upon drag and drop is the fact that you are handling the server-side OnNodeDrop event. As I'm seeing you are adding rows to the RadGrid in the aforementioned server-side event. In such case it's necessary to make a request to the server.

Best wishes,
Dimitar Terziev
the Telerik team