Freezing Edit/Update-Cancel in RadGrid

10 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
    507 posts
    Member since:
    Dec 2014

    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
    507 posts
    Member since:
    Dec 2014

    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
    507 posts
    Member since:
    Dec 2014

    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.

  8. Dhamodharan
    Dhamodharan avatar
    286 posts
    Member since:
    Sep 2010

    Posted 11 Nov in reply to Galin Link to this post

    Hi Galin,

    I checked your code. this is working fine. but i want these functionality in EditMode="inplace". i added these code in your code
    <MasterTableView TableLayout="Fixed" EditMode="InPlace" CommandItemDisplay="Top">

    But in Editmode Tab functionality is not working. but without editmode tab functionality working fine. how we fix this issue in edit mode. please let us know ASAP.

    Thanks in Advance,
    Dhamu

  9. Galin
    Admin
    Galin avatar
    507 posts
    Member since:
    Dec 2014

    Posted 13 Nov Link to this post

    Hi Dhamodharan,

    I tested the provided workaround in Edit Mode and it works as expected. For reference please check out the attached sample page.

    Regards,
    Galin
    Telerik

     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     

  10. Dhamodharan
    Dhamodharan avatar
    286 posts
    Member since:
    Sep 2010

    Posted 14 Nov in reply to Galin Link to this post

    Hi Galin,

    I do not know why it has same issue. it think it may be browser issue. but i chagned your code and it is working fine. Thanks again.

    Changed $get(sender.get_id() + "_GridHeader").onscroll = function (e). it is seems good. Thanks your respnse.

Back to Top