Grid Mouse Wheel Scroll Problem

[Kartikey]

In our project we are using a splitter and inside it we are having a RadGrid on half of the part and a RadSchedular on the other half, depending on the requirement, functionality has to be something like that on Scroll  of Schedular the contents of the Grid should get scrolled in parallel.
Now the following <ClientSettings >has been added for the Grid -

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

and on OnScroll ClientEvent the following javascript is called which is responsible for calculating the Scroll Position and binding it together

<ClientEvents OnScroll="ScrollGrid" OnColumnResized="ColumnResized" OnColumnShown="ColumnShown" />

Script : 

var isInGridScrolling = false;
function ScrollGrid(sender, args) {
var scrollTop = args.get_scrollTop();
isInGridScrolling = true;
$telerik.getElementByClassName(document.body, "rsContentScrollArea").scrollTop = scrollTop;
 isInGridScrolling = false;
}

Additionaly on Page load the following script is getting called -
  

function contentPageLoad() {
       $addHandler($telerik.getElementByClassName(document.body, "rsContentScrollArea"), "scroll", function (e) {
         if (!isInGridScrolling) {
             var RadGrid1 = $find("<%= SPGrid.ClientID %>");
             RadGrid1.GridDataDiv.scrollTop = e.target.scrollTop;
         }
     });

In the Schedular we are just including the tag OverflowBehavior="Scroll" , Now the Grid contents are succesfully getting scrolled with the Schedular scrollbar, but the mousewheel scroll is only working when the cursor is above the Schedular, how can the mousewheel scroll work for Grid as well ?

It will be very grateful if anyone can provide me help on the topic, feel free to contact me in case of any clarity is required
 

[Venelin]

Hi Kartikey,

I have modified a bit your code and it is working on my side.

JavaScript:

(function () {

    var $ = $telerik.$;

    Sys.Application.add_load(function () {
        $("#<%= RadScheduler1.ClientID %>")
            .find(".rsContentScrollArea").on("scroll", function (e) {
                var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
                RadGrid1.GridDataDiv.scrollTop = e.target.scrollTop;
            });
    });
})();

var isInGridScrolling = false;
function onScroll(sender, args) {
    console.log(args);
    var scrollTop = args.get_scrollTop();
    isInGridScrolling = true;
    $telerik.getElementByClassName(document.body, "rsContentScrollArea").scrollTop = scrollTop;
    isInGridScrolling = false;
}

and the utilized example markup

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" />
        <ClientEvents OnScroll="onScroll" />
    </ClientSettings>
</telerik:RadGrid>

<br />
<br />
<telerik:RadScheduler runat="server" ID="RadScheduler1" Skin="Metro" Height="450" OverflowBehavior="Auto"
    SelectedView="WeekView" ShowFooter="false" SelectedDate="2012-01-31" TimeZoneOffset="03:00:00"
    DayStartTime="08:00:00" DayEndTime="21:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday"
    EnableDescriptionField="true" AppointmentStyleMode="Default">
    <WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
    <AdvancedForm Modal="true"></AdvancedForm>
    <TimelineView UserSelectable="false"></TimelineView>
    <AgendaView UserSelectable="true" />
    <ResourceStyles>
        <telerik:ResourceStyleMapping Type="Calendar" Text="Personal"
            BorderColor="#abd962" />
        <telerik:ResourceStyleMapping Type="Calendar" Text="Work"
            BorderColor="#25a0da" />
    </ResourceStyles>
    <ResourceHeaderTemplate>
        <div class="rsResourceHeader<%# Eval("Text") %>">
            <%# Eval("Text") %>
        </div>
    </ResourceHeaderTemplate>
    <TimeSlotContextMenuSettings EnableDefault="true" />
    <AppointmentContextMenuSettings EnableDefault="true" />
    <Localization HeaderWeek="Work week" />
</telerik:RadScheduler>

Here is the result: http://screencast.com/t/g23uBMT4Iny.

Note: the solutions relies on jQuery, so make sure that you have jQuery in your application.

Regards,
Venelin
Telerik

[Kartikey]

But in my project we don't have neither required the scroll bar in the RadGrid. Below given is the code snippet for the RadGrid used - 

<telerik:RadPane ID="RadPane1" runat="server" Height="100%" Scrolling="None" MinWidth="200"
      OnClientCollapsing="CollapseToMinWidth" OnClientBeforeExpand="ExpandFromMinWidth">
      <telerik:RadGrid ID="SPGrid" runat="server" AutoGenerateColumns="False" CellSpacing="0"
          GridLines="None" EnableHeaderContextMenu="true" OnItemCommand="SPGrid_ItemCommand"
          OnItemDataBound="SPGrid_ItemDataBound" AllowFilteringByColumn="true" Height="100%"
          Width="100%" Skin="Simple" AllowSorting="true" >
          <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="Reorder"
              AllowColumnHide="true" EnableAlternatingItems="false">
              <Resizing AllowColumnResize="true" AllowResizeToFit="true" ResizeGridOnColumnResize="true" />
              <ClientEvents OnScroll="ScrollGrid" OnColumnResized="ColumnResized" OnColumnShown="ColumnShown" />
              <Scrolling AllowScroll="true" UseStaticHeaders="true" />
              <ClientMessages ColumnResizeTooltipFormatString="" />
          </ClientSettings>
          <HeaderContextMenu Enabled="true">
          </HeaderContextMenu>
          <MasterTableView DataKeyNames="OrderID,UniqueID" TableLayout="Fixed">
              <Columns>......

PFA for better clarity

[Venelin]

Hi Kartikey,

Could you please clarify what exactly do you mean by "we don't have neither required the scroll bar in the RadGrid"? As far as I can understand, you don't want a scroll bar for RadGrid, but it in the provided markup there is AllowScroll="true" UseStaticHeaders="true" and the whole client logic is based on that. It is impossible to scroll a container without allowing scroll. The only option is to use a dirty hack like setting higher width for RadGrid and also set overflow: hidden; to the div that holds it. The visual effect will be that grid's scrollbar will be hidden/overlapped by grid's container.

Regards,
Venelin
Telerik

[Kartikey]

Yes , but that code is responsible for inclusion of horizontal scrollbar in the Grid

[Venelin]

Hi,

The scroll bars appear because data flows off the container. If you don't want to display a horizontal scroll bar, then make sure the data doesn't overflow i.e. the total width of all columns does not exceed the width of the grid.
 
Regards,
Venelin
Telerik