from classic RadGrid to ASP.NET AJAX RadGrid

[Ripunjay]

Hi,
I am facing issues while converting my application from classic RadControl to ASP.NET AJAX radcontrol.
My requirement is that on row click of one grid (dgProductGroup in the below code snippet, I need to update dgProduct).
Earliler I was using the below code in my ASPX page:

<radA:RadAjaxManager
            ID="RadAjaxManager1"
            runat="server">
        <AjaxSettings>
            <radA:AjaxSetting AjaxControlID="dgproductGroups">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="dgProducts" LoadingPanelID = "loadProducts" />
                    <radA:AjaxUpdatedControl ControlID="dgFileList" LoadingPanelID = "loadFileDetails" />
                </UpdatedControls>
            </radA:AjaxSetting>
            <radA:AjaxSetting AjaxControlID="dgProducts">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="dgFileList" LoadingPanelID = "loadFileDetails" />
                </UpdatedControls>
            </radA:AjaxSetting>
            <radA:AjaxSetting AjaxControlID="dgFileList">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="dgFileList" LoadingPanelID = "loadFileDetails" />
                </UpdatedControls>
            </radA:AjaxSetting>
            <radA:AjaxSetting AjaxControlID="btnShowObsolete">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="dgFileList" LoadingPanelID = "loadFileDetails" />
                </UpdatedControls>
            </radA:AjaxSetting>
            <radA:AjaxSetting AjaxControlID="btnObsolete">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="dgFileList" LoadingPanelID = "loadFileDetails" />
                </UpdatedControls>
            </radA:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnResponseReceived = "OnAjaxDataReceived" OnRequestStart = "OnAjaxDataSentStart"/>
    </radA:RadAjaxManager>
    <radA:AjaxLoadingPanel
            id="loadProducts"
            style="width:320px;padding-top:30px;"
            runat="server">
        <asp:Image
            ID="Image2"
            ImageUrl="~/RadControls/AJAX/Skins/Default/MSN_Blue.gif"
            AlternateText="Loading"
            BorderWidth="0px"
            Runat="server">
        </asp:Image>
    </rada:AjaxLoadingPanel>
    <radA:AjaxLoadingPanel
            id="loadFileDetails"
            style="width:320px;padding-top:130px;"
            runat="server">
        <asp:Image
            ID="Image3"
            ImageUrl="~/RadControls/AJAX/Skins/Default/MSN_Blue.gif"
            AlternateText="Loading"
            BorderWidth="0px"
            Runat="server">
        </asp:Image>
    </rada:AjaxLoadingPanel>

And this was the javascript part.

function OnAjaxDataReceived()
    {
        if(dgProductsDisabled = true)
        {
            EnableGrid('ctl00_CntPlHolder_dgProducts');
            dgProductsDisabled = false;
        }

        EnableGrid('ctl00_CntPlHolder_dgproductGroups');
    }

function OnAjaxDataSentStart()
    {
        //PRODUCTS DATAGRID WILL NOT BE DISABLED WHEN THE PRODUCT GROUPS GRID's ROW IS SELECTED
        if(dgProductsDisabled = true)
        {
            DisableGrid('ctl00_CntPlHolder_dgProducts');
        }

        //DISABLING THE PRODUCT GROUPS DATAGRID UNTIL THE DATA IS RECIEVED FROM THE SERVER THROUGH RAD AJAX
        DisableGrid('ctl00_CntPlHolder_dgproductGroups');
    }

function EnableGrid(gridClientID)
    {
        window[gridClientID].AjaxRequest("dgproductGroups", "");
    }

    function DisableGrid(gridClientID)
    {
        try
        {
            gridCtrl = window[gridClientID];
            gridCtrl.Control.disabled = "disabled";
            gridCtrl.ClientSettings.Selecting.AllowRowSelect = false;
            gridCtrl.ClientSettings.Resizing.AllowColumnResize = false;
            gridCtrl.ClientSettings.Resizing.AllowRowResize = false;
            gridCtrl.ClientSettings.AllowColumnsReorder = false;
            gridCtrl.ClientSettings.AllowDragToGroup = false;
            gridCtrl.ClientSettings.EnablePostBackOnRowClick = false;

            var links = gridCtrl.Control.getElementsByTagName("a");
            var images = gridCtrl.Control.getElementsByTagName("img");
            var inputs = gridCtrl.Control.getElementsByTagName("input");
            var sortButtons = gridCtrl.Control.getElementsByTagName("span");

            for(var i = 0; i < links.length; i++)
            {
                links[i].href = "";
                links[i].onclick = function()
                {
                    return false;
                }
            }

            for(var i = 0; i < images.length; i++)
            {
                images[i].onclick = function()
                    {
                        return false;
                    }
            }
            for(var i = 0; i < sortButtons.length; i++)
            {
                sortButtons[i].onclick = function()
                {
                    return false;
                }
            }

            for(var i = 0; i < inputs.length; i++)
            {
                switch(inputs[i]. type)
                {
                    case "button":
                        inputs[i].onclick = function()
                        {
                            return false;
                        }
                        break;

                    case "checkbox":
                        inputs[i].disabled = "disabled";
                        break;
                    case "radio":
                        inputs[i].disabled = "disabled";
                        break;
                    case "text":
                        inputs[i].disabled = "disabled";
                        break;
                    case "password":
                        inputs[i].disabled = "disabled";
                        break;
                    case "image":
                        inputs[i].onclick = function()
                        {
                            return false;
                        }
                        break;
                    case "file":
                        inputs[i].disabled = "disabled";
                        break;

                    default:
                    break;
                }
            }

            var scrollArea = document.getElementById(gridCtrl.ClientID + "_GridData");

            if(scrollArea)
            {
                scrollArea.disabled = "disabled";
            }
        }
        catch(e)
        {
            alert(e);
        }
    }

With the new Rad Ajax, I either get error that object does not support the method (in javascript EnableGrid function) or the grid fails to load and I only see the loading image.
Can you please help me in this upgrade.

Thanks,
Ripunjay

[Sebastian]

Hello Ripunjay,

I think that the implementation from this help topic will help you attain the functionality you are after, i.e. how to enable/disable our web grid. Basically, it is ported solution from RadGrid for ASP.NET to ASP.NET AJAX. Examine the code snippets from the article and utilize the same logic for your scenario.

Best regards,
Sebastian
the Telerik team