[Help] Problem about pressing tab key, Horizontal scroll of the gridview's header doesn't work

[Truong]

In footer of the gridview, I have some textboxs. When I use horizontal scroll,
then header and footer will move on following this horizontal scroll.
But when I use tab key to move to next textbox (instead of using horizontal scroll) then footer, header and items don't move on following.
Please help me to resolve this problem.
Thank!!!

[Pavlina]

Hi Truong,

Can you please specify if you have set the RadGrid1.ClientSettings.Scrolling.FrozenColumnsCount property to a value greater than 0?

Please note that when frozen columns are used, tabbing between the textboxes in an inline edit form is not supported out-of-the-box, because the frozen columns will be scrolled together with the non-frozen. In selected scenarios, this functionality can be achieved if you subscribe to the textboxes' focus events and scroll a specific <div> with Javascript. This <div> has a client ID of "..._Frozen" where "..." is the RadGrid client ID. When doing this, you should take into account the current scroll position, and the width of the column that should be hidden/shown.

Kind regards,
Pavlina
the Telerik team

[Charles]

is there any example code for this workaround of scrolling the div's with '...frozen' ???

[Pavlina]

Hi Charles,

The frozen columns functionality is implemented by hiding the RadGrid "real" scrollbar (used with the scrolling with static headers) and using a "fake" one, which triggers some columns to be hidden and shown, depending on the scrollbar position. However, when you start tabbing through the textboxes, you are beggining to scroll the complete RadGrid data area, including the frozen columns. In other words, this is the same as scrolling the "real" hidden scrollbar. This is the cause tabbing and frozen scrolling to be not supported.

However, there is a workaround which works in a few scenarios. You should keep in mind that this is a custom code which is not universal and it will not work in all scenarios:

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++)
        {
            if (!allColumns[i].get_visible())
            {
                scrollLeftOffset += allColumnsWidth[i];
            }
            if ($telerik.isIE7)
            {
                var thisColumn = grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[i];
                if (thisColumn.style.display == "none")
                {
                    scrollLeftOffset += parseInt(thisColumn.style.width);
                }
            }
        }
        var thisScrollLeft = this.scrollLeft;
        if (thisScrollLeft > 0)
            frozenScroll.scrollLeft = thisScrollLeft + scrollLeftOffset + 300;
        this.scrollLeft = 0;
        scrollLeftOffset = 0;
    }
}

 

Regards,
Pavlina
Telerik

[MRa]

This works fine on item edit, is there any way i could apply this when a row is inserted or copied?

[Eyup]

Hello Mery,

Can you please open a support ticket to send us a very basic sample runnable web site demonstrating the behavior? Thus, we will be able to figure out your specific scenario and suggest a proper solution.

Regards,
Eyup
Telerik

[Charles]

Pavlina,

Thanks for the sample code. Unfortunately, even with using the mouse to scroll, we were never able to develop a 'usable' solution as there were just too many instances of columns being inaccessible or hidden from view. 

We have abandoned the use of the frozen columns and will probably not revisit them until we have more time to fully develop a workable solution.

Thanks,

Charlie

[Max]

I have same problems. But i dont understand that javascript code. My code skill not well.
Can you explain javascript to me?
--------------------------------------------------------
RadGrid ID==>RadGridSalList

   protected void Time_TextChanged(object sender, EventArgs e)
        {

    TextBox a = (TextBox)sender;
  GridDataItem Item = (GridDataItem)a.NamingContainer;
  if (a.ID == "TBCWYearVal" || a.ID == "TBCWNYearVal")
            {
                ((TextBox)Item.FindControl("TBCYearVal")).Text = #blabla.ToString();


            }
if (a.ID == TBNTimeHour )
            {
                 ((Literal)Item.FindControl("LTNTimeVal")).Text = #blabla.ToString();


            }
if (a.ID == TBOTimeHour)
            {
                 ((Literal)Item.FindControl("LTOTimeVal")).Text = #blabla.ToString();


            }