Freezing Edit/Update-Cancel in RadGrid

7 posts, 0 answers
  1. Deepak Vasudevan
    Deepak Vasudevan avatar
    82 posts
    Member since:
    May 2010

    Posted 18 Feb 2012 Link to this post

    Dear Telerik Team,

    I am using RadGrid and a few splitter tricks for display and editing of large amount of data. In Edit mode, when the user keeps tabbing, the SAVE goes out of focus. Now the user has to click the right end of scrollbar to make the the Save appear all over again.

    I am looking out to see if I can freeze the column that shows Update/Cancel (similar to the examples/demo shared out in http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-freeze-columns-in-radgrid.aspx)

    How to make the column that shows Update/Cancel as Frozen? 

  2. Deepak Vasudevan
    Deepak Vasudevan avatar
    82 posts
    Member since:
    May 2010

    Posted 21 Feb 2012 Link to this post

    Looks like this is a bug in Telerik RadGrid as indicated in the thread http://www.telerik.com/community/forums/aspnet-ajax/grid/frozen-column-is-not-working-for-grid-if-tab-is-use-for-navigate.aspx

    Is some one from Telerik team available to comment with a working solution containing the workaround please?

  3. Galin
    Admin
    Galin avatar
    461 posts
    Member since:
    Sep 2012

    Posted 23 Feb 2012 Link to this post

    Hi Deepak,

    There is a workaround of your issue. On the tab event the data container is scrolling with changing the focus of the elements. Therefore, you should add a onScroll handler to this container. Additionally, the observer have to scroll the main scrollBar in the RadGrid.

    Use the following JavaScript function

    function onGridLoad(sender, args)
    {
        var frozenScroll = $get(sender.get_id() + "_Frozen");
        var allColumns = sender.get_masterTableView().get_columns();
        var scrollLeftOffset=0;
        var allColumnsWidth = new Array;
      
        for (var i = 0; i < allColumns.length; i++)
        {
            allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;
        }
      
        $get(sender.get_id() + "_GridData").onscroll = function(e)
        {
            for (var i = 0; i < allColumns.length; i++)
            {
                if(!allColumns[i].get_visible())
                {
                    scrollLeftOffset += allColumnsWidth[i];
                }
            }
            var thisScrollLeft = this.scrollLeft;
            this.scrollLeft = 0;
            if(thisScrollLeft>0)
                frozenScroll.scrollLeft =  thisScrollLeft + scrollLeftOffset;
            scrollLeftOffset = 0;
        }
    }


    I have prepared a sample page with this functionality. Please find it in the attached file and let me know how it goes.

    Also, please note this is a workaround and still is unsupported scenario. However, our developers are investigating the scenario and they are looking for possible resolution.


    Greetings,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  4. Deepak Vasudevan
    Deepak Vasudevan avatar
    82 posts
    Member since:
    May 2010

    Posted 23 Feb 2012 Link to this post

    Dear Galin,

    The solution seems to be fine with IE 9 and Firefox but gives bizarre errors with IE 8 and 7. Any clues?

  5. Galin
    Admin
    Galin avatar
    461 posts
    Member since:
    Sep 2012

    Posted 28 Feb 2012 Link to this post

    Hi Deepak,

    Could you modify my test project to demonstrate the error and sent it back to me?

    Looking forward to your reply.

    Regards,
    Galin
    the Telerik team

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  6. Deepak Vasudevan
    Deepak Vasudevan avatar
    82 posts
    Member since:
    May 2010

    Posted 28 Feb 2012 Link to this post

    Dear Galin,

    The test project as-it-is can be tested for that scenario also. Use IE developer toolbar to change browser mode to IE7 to see the result.

  7. Galin
    Admin
    Galin avatar
    461 posts
    Member since:
    Sep 2012

    Posted 05 Mar 2012 Link to this post

    Hi Deepak,

    The issue is replicate on our side. Therefore, I have modified the script by adding a IE7 condition in the JS function

    function OnGridCreated(sender, args)
    {
        var frozenScroll = $get(sender.get_id() + "_Frozen");
        var allColumns = sender.get_masterTableView().get_columns();
        var scrollLeftOffset = 0;
        var allColumnsWidth = new Array;
        var grid = sender.get_element();
     
        for(var i = 0; i < allColumns.length; i++)
        {
            allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;
        }
     
        $get(sender.get_id() + "_GridData").onscroll = function (e)
        {
            for(var i = 0; i < allColumns.length; i++)
            {
                console.log(grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[0].style.display)
                if(!allColumns[i].get_visible())
                {
                    scrollLeftOffset += allColumnsWidth[i];
                }
                if($telerik.isIE7)
                {
                    var thisColumn = grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[i];
                    console.log(thisColumn.style.display);
                    if (thisColumn.style.display == "none")
                    {
                        scrollLeftOffset += parseInt(thisColumn.style.width);
                    }
                }
            }
            var thisScrollLeft = this.scrollLeft;
            if(thisScrollLeft > 0)
                frozenScroll.scrollLeft = thisScrollLeft + scrollLeftOffset + 200;
            this.scrollLeft = 0;
            scrollLeftOffset = 0;
        }
    }

    Please check it out and let me know how it goes.

    Greetings,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Back to Top