[Solved] Virtual scrolling problem

[Michael]

I'm evaluating Telerik's Rad Controls for my company. We are currently using ComponentArt but aren't satisfied with it.  I've been looking into the Rad controls. I really like what I've been able to accomplish using the RadControls with minimal effort. However, I'm having trouble getting the virtual scrolling to work at all.  I can get the scroll bar to appear. If I use paging the scroll bar will work for a single page, but not for the whole returned data set and it will not automatically go back and pull the next set of data like the yahoo-style example.  I'm sure I'm doing something wrong but haven't figured it out.

I'm using .net 3.5 and c# and asp.net AJax Rad Grid Control.  My datasource is a collection List.
I've been using the demos: Virtual scrolling and paging as guidance.  My final goal would be to have my app use the Yahoo-style scrolling. However, I'd like to get both types to work.

Any guidance on this would be appreciated.

Code posted below:
ASPX:

                       <telerik:RadGrid ID="RadGrid1" Skin="Office2007" Width="97%"
                            AllowSorting="True" AllowPaging="True" PageSize="15"
                         OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="True"
                            GridLines="None" ShowGroupPanel="True" runat="server">
                          <MasterTableView Width="100%" AllowMultiColumnSorting="true" DataKeyNames="RecNo"
                                AutoGenerateColumns="False" AllowPaging="true"
                                AllowCustomPaging="True">
                                <RowIndicatorColumn>
                                <HeaderStyle Width="20px"></HeaderStyle>
                                </RowIndicatorColumn>

                                <ExpandCollapseColumn>
                                <HeaderStyle Width="20px"></HeaderStyle>
                                </ExpandCollapseColumn>
                                <Columns>
                                    <telerik:GridBoundColumn DataField="RecNo" Display="false" Visible="false" UniqueName="recno"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="CompanyId" HeaderText="Company"
                                        UniqueName="column1">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="DrafterUserId" HeaderText="Drafter User Id"
                                        UniqueName="column2">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="IssueNumber" HeaderText="Issue"
                                        UniqueName="column3">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="OrderNumber" HeaderText="Order Number"
                                        UniqueName="column4">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="DwgCode" HeaderText="Drawing Code"
                                        UniqueName="column5">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Base" HeaderText="Base"
                                        UniqueName="column6">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="UserId" HeaderText="User Id"
                                        UniqueName="column7">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="DrawingNumber" HeaderText="Drawing Num."
                                        UniqueName="column8">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridDateTimeColumn DataField="DraftStartDt" DataType="System.DateTime"
                                        HeaderText="Draft Start Date" UniqueName="column9">
                                    </telerik:GridDateTimeColumn>
                                </Columns>
                                <PagerStyle Visible="False" />
                            </MasterTableView>
                            <HeaderContextMenu Skin="Office2007" EnableTheming="True">
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                            </HeaderContextMenu>
                            <PagerStyle Mode="NextPrevAndNumeric" Visible="false"  />
                            <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True"
                                ReorderColumnsOnClient="True" ColumnsReorderMethod="Reorder" >
                                <Scrolling AllowScroll="true" UseStaticHeaders="true"  ScrollHeight="100%" SaveScrollPosition="true" EnableVirtualScrollPaging="true"/>
                                <Resizing AllowColumnResize="true" />
                            </ClientSettings>
                            <FilterMenu EnableTheming="True" Skin="Office2007">
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </FilterMenu>
                        </telerik:RadGrid>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"
                        LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px" Transparency="25" >
        <img alt="Loading..." src='images/Grid/spinner.gif' style="border: 0px;" />
    </telerik:RadAjaxLoadingPanel>

C# code behind:

.........
protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = buildGridData();
            //throw new NotImplementedException();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            MenuHeader.BuildBaseMenu();
        }

        public List<Issue> GetIssList()
        {
            List<Issue> tmpiss = Issue.getByCompanyId(23);
            issues = tmpiss;
            return tmpiss;
        }

        private List<Issue> buildGridData()
        {
            return GetIssList();

        }

...........

[Vlad]

Hi Michael,

You can use ObjectDataSource, LinqDataSource, EnityDataSource or any other DataSourceControl with server-side paging support to accomplish this.

I've made for you small demo using ObjectDataSource - you can find the application attached.

Kind regards,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

I looked at the attatched zip file. I do have one question to start with.  Is there a code behind page for the default.aspx.  It would seem that since this is making a sever side call that there would be a corresponding server side event. But there wasn't a  aspx.cs (code behind) in the zip file

thanks

[Michael]

After further review of the default.aspx page, I found your sever-side scripting.  If I'm understanding what you've done correctly.  I actually need to keep track of where I'm at in the  <List> or any dataset for that matter so I can go and grab the next set of  records from the <List> when scrolling down. Is that correct? 

[Sebastian]

Hi Michael,

As my colleague Vlad explained, the solution is not dependant on the type of the data source you have - you can either use a data source control or supply the source data intercepting the NeedDataSource event of the grid. The solution illustrates that you need to intercept the OnScroll client event of the grid to determine whether the scroll has reached the bottom and then initiate an ajax request and change the page size of the grid.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

Thank you. I have things working using an ObjectDataSource at this time. One piece that I was missing was in the RadManager having the RadManager update the grid

[Michael]

Using the yahoo type virtual scrolling on a Grid and having the ability to insert records, I'd like the ability to scroll to the inserted record. I have reviewed the demos and added the appropriate javascript and server side functions, however it didn't work.  I'm thinking th reason it doesn't work is that the returned dataset only has the current number of records relative to scroll position. So if you're near the top of the record list and the inserted record is not within that list it can't be found to be selected then scrolled to.   Is this possible?  Any examples on how to accomplish it?  Thanks

[Iana Tsolova]

Hi Michael,

Indeed after inserting new record to the database, I suggest that you refresh the grid data source with the newly updated data.

Regarded your previous question:
When the grid or any other control is being updated in the AjaxRequest server event handler of the RadAjaxManager, this control should be added as updated control in the ajax settings with ajax initiator - the manager. Otherwise the control will not be rendered with the new changes displayed. Find more information in the below articles:

http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html
http://www.telerik.com/help/aspnet-ajax/ajxaddajaxrequesttoclientevent.html

I hope this helps.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.