This is a migrated thread and some comments may be shown as answers.

Heirarchy grid expand buttons not visible

7 Answers 130 Views
Grid
This is a migrated thread and some comments may be shown as answers.
MFitzpatrick
Top achievements
Rank 1
MFitzpatrick asked on 20 May 2011, 05:55 PM
Hi-

I am using a nested view radgrid that is being populated through a web service. I am using scrolling rather than paging. When I populate the data source for the grid, the expand buttons do not display for records that require scrolling to be visible. Does anyone know why this is happening and have a solution? Any help would be appreciated. I will attach a screen shot and code.
<script type="text/javascript" language="javascript">
            //<![CDATA[
 
            var gridResults;
             
            function pageLoad(sender, eventArgs) {
                //QueryResultsGrid();
 
                $(document).ready(function() {
 
                    var ddlTitles = $find("<%=ddlTitles.ClientID %>");
                    ddlTitles.requestItems();
                    var ddlStatuses = $find("<%=ddlStatuses.ClientID %>");
                    ddlStatuses.requestItems();
                    var ddlDepartments = $find("<%=ddlDepartments.ClientID %>");
 
                    ddlDepartments.trackChanges();
                    ddlDepartments.get_items().clear();
                    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                    comboItem.set_text("All Departments");
                    comboItem.set_value(-1);
                    ddlDepartments.get_items().add(comboItem);
                     
                    $get("gridZone").style.display = "block";
 
                    QueryResultsGrid();
                });
                
            }
 
            function OnCalendarViewChangedFrom(sender, args) {
 
                var tooltipManager = $find("<%=rttmStartDate.ClientID %>");
                if (tooltipManager._tooltips) {
                    tooltipManager._disposeToolTips();
                    tooltipManager._tooltips = [];
                }
 
                tooltipManager.tooltipify(sender.get_element());
            }
 
            function OnCalendarViewChangedTo(sender, args) {
 
                var tooltipManager = $find("<%=rttmEndDate.ClientID %>");
                if (tooltipManager._tooltips) {
                    tooltipManager._disposeToolTips();
                    tooltipManager._tooltips = [];
                }
 
                tooltipManager.tooltipify(sender.get_element());
            }
 
            function SetContextItems(sender, eventArgs) {
 
                var context = eventArgs.get_context();
 
                context["loginKey"] = $get("<%=hfLoginKey.CLientID %>").value;
 
            }
 
            function TxtEndDate_DateSelected(sender, eventArgs) {
 
                if (!sender.isEmpty()) {
                    QueryDdlDepartments();
                }
 
            }
             
            function GetStartTime() {
 
                var txtStartTime = $find('<%=txtStartTime.ClientId %>');
                var txtStartDate = $find('<%=txtStartDate.ClientId %>');
                if (!txtStartDate.isEmpty()) {
 
                    var startDate = txtStartDate.get_selectedDate();
                    startDate.setHours(0);
                    startDate.setMinutes(0);
                    if (!txtStartTime.isEmpty()) {
 
                        var startTime = txtStartTime.get_selectedDate();
                        startDate.setHours(startTime.getHours());
                        startDate.setMinutes(startTime.getMinutes());
 
                    }
                    return startDate;
 
                }
                else {
 
                    return null;
                }
 
            }
 
 
            function GetEndTime() {
 
                var txtEndTime = $find('<%=txtEndTime.ClientId %>');
                var txtEndDate = $find('<%=txtEndDate.ClientId %>');
                if (!txtEndDate.isEmpty()) {
 
                    var endDate = txtEndDate.get_selectedDate();
                    endDate.setHours(0);
                    endDate.setMinutes(0);
                    //                if (endTime.getHours() == 0 && endTime.getMinutes() == 0) {
                    //                    endDate.setDate(endDate.getDate() + 1);
                    //                }
                    if (!txtEndTime.isEmpty()) {
 
                        var endTime = txtEndTime.get_selectedDate();
 
                        endDate.setHours(endTime.getHours());
                        endDate.setMinutes(endTime.getMinutes());
                    }
 
                    return endDate;
 
                }
                else {
 
                    return null;
                }
            }
 
            function QueryDdlDepartments() {
 
                var ddlDepartment = $find("<%= ddlDepartments.ClientID %>");
                var txtEndDate = $find('<%=txtEndDate.ClientId %>');
 
                var loadingPanel = $find("<%=rlpAvailable.ClientID %>");
 
                if (!txtEndDate.isEmpty()) {
 
                    if (loadingPanel) {
 
                        loadingPanel.show("<%=ddlDepartments.ClientID %>");
                    }
 
                    var endDate = txtEndDate.get_selectedDate();
                    endDate.setHours(0);
                    endDate.setMinutes(0);
                    var loginKey = $get("<%=hfLoginKey.ClientID %>").value;
 
                    $.ajax({
                        type: 'POST',
                        url: '../Services/WhoIsAvailableServices.asmx/GetDepartments',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({
                            loginKey: loginKey,
                            endDate: endDate
                        }),
                        dataType: 'json',
                        success: QueryDdlDepartments_Callback,
                        error: WAServiceFailure
                    });
 
 
                }
                else {
                    ddlDepartment.clearItems();
 
                }
            }
 
            function QueryDdlDepartments_Callback(results) {
 
 
                var loadingPanel = $find("<%=rlpAvailable.ClientID %>");
                if (loadingPanel) {
 
                    loadingPanel.hide("<%=ddlDepartments.ClientID %>");
                }
 
                var ddlDepartments = $find("<%=ddlDepartments.ClientID %>");
                ddlDepartments.trackChanges();
                ddlDepartments.get_items().clear();
 
                var comboItems = results.d;
 
                for (var i = 0; i < comboItems.length; i++) {
 
                    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                    comboItem.set_text(comboItems[i].Text);
                    comboItem.set_value(comboItems[i].Value);
                    ddlDepartments.get_items().add(comboItem);
 
                }
 
                ddlDepartments.commitChanges();
            }
 
            function WAServiceFailure(HTTPResponse) {
                var loadingPanel = $find("<%=rlpAvailable.ClientID %>");
                if (loadingPanel) {
 
                    loadingPanel.hide("<%=pnlAvailable.ClientID %>");
                }
                oWin = window.radalert("An internal error has occurred. Error message: " + HTTPResponse.responseText
                                    + " Please try your request again. " +
                                    "If this error persists, please contact technical support.",
                            null, null, "An Error Occurred!");
                oWin.get_popupElement().style.zIndex = "10000";
 
                return false;
            }
 
            function QueryResultsGrid() {
 
                var startTime = GetStartTime();
 
                var endTime = GetEndTime();
                var loadingPanel = $find("<%=rlpAvailable.ClientID %>");
                if (loadingPanel) {
 
                    loadingPanel.show("<%=pnlAvailable.ClientID %>");
                }
 
                var ddlDepartment = $find("<%=ddlDepartments.ClientID %>");
                var ddlTitle = $find("<%=ddlTitles.ClientID %>");
                var ddlStatus = $find("<%=ddlStatuses.ClientID %>");
 
                var deptId = ddlDepartment.get_value();
                if (deptId == "") {
                    deptId = 0;
                }
 
                var titleId = ddlTitle.get_value();
                if (titleId == "") {
                    titleId = 0;
                }
                var statusId = ddlStatus.get_value();
                if (statusId == "") {
                    statusId = 0;
                }
                var loginKey = $get("<%=hfLoginKey.ClientID %>").value;
                 
                $.ajax({
                    type: 'POST',
                    url: '../Services/WhoIsAvailableServices.asmx/GetAvailableUsers',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify({
                        loginKey: loginKey,
                        startTime: startTime,
                        endTime: endTime,
                        deptId: deptId,
                        titleId: titleId,
                        statusId: statusId
                    }),
                    dataType: 'json',
                    success: QueryResultsGrid_Callback,
                    error: WAServiceFailure
                });
 
                return false;
            }
 
            function QueryResultsGrid_Callback(results) {
             
                var grid = $find("<%= rgAvailable.ClientID %>");
                var masterTable = grid.get_masterTableView();
                 
                masterTable.set_dataSource(results.d);
                masterTable.dataBind();
                masterTable.set_virtualItemCount(0);
                 
                gridResults = results.d;
             
                // clear tooltips
 
//                var tooltipManager = $find("<%=rttmRgAvailable.ClientID %>");
//                tooltipManager._targetControls.clear();
                 
                var loadingPanel = $find("<%=rlpAvailable.ClientID %>");
                if (loadingPanel) {
 
                    loadingPanel.hide("<%=pnlAvailable.ClientID %>");
                }
            }
 
            function RgAvailable_OnCommand(sender, eventArgs) {
 
                debugger;
                var masterTable = sender.get_masterTableView();
 
                if (eventArgs.get_commandName() == "Sort") {
                    eventArgs.set_cancel(true);
                    SortGrid(masterTable);
                     
                }
 
            }
 
            function SortGrid(masterTable) {
             
                var loadingPanel = $find("<%=rlpAvailable.ClientID %>");
                if (loadingPanel) {
 
                    loadingPanel.show("<%=pnlAvailable.ClientID %>");
                }
                var sortExpression = GetSortOrder(masterTable);
                if (sortExpression) {
 
                    var sortField = sortExpression.get_fieldName();
                    var sortOrder = sortExpression.get_sortOrder();
 
                    SortGridData(sortField, sortOrder);
 
                }
                masterTable.set_dataSource(gridResults);
                masterTable.dataBind();
                loadingPanel.hide("<%=pnlAvailable.ClientID %>");
            }
                     
 
            function SortGridData(sortField, sortOrder) {
 
                switch (sortField) {
 
 
                    case "UserName":
                        gridResults.sort(sortByUserName);
                        break;
                    case "Title":
                        gridResults.sort(sortByTitle);
                        break;
                    case "Status":
                        gridResults.sort(sortByStatus);
                        break;
                    case "HireDate":
                        gridResults.sort(sortByHireDate);
                        break;
                    case "Email":
                        gridResults.sort(sortByEmail);
                        break;
                    case "Text":
                        gridResults.sort(sortByText);
                        break;
 
                }
 
                if (sortOrder == 2) {
                    gridResults.reverse();
                }
                 
            }
 
            function sortByUserName(a, b) {
 
                var x = a.UserName;
                var y = b.UserName;
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
 
            }
 
            function sortByTitle(a, b) {
                var x = a.Title;
                var y = b.Title;
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                 
            }
 
            function sortByStatus(a, b) {
                var x = a.Status;
                var y = b.Status;
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
 
            }
 
            function sortByEmail(a, b) {
                var x = a.Email;
                var y = b.Email;
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            }
 
            function sortByText(a, b) {
                var x = a.Text;
                var y = b.Text;
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            }
 
            function sortByHireDate(a, b) {
 
                var x = new Date(a.HireDateString);
                var y = new Date(b.HireDateString);
 
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            }
             
            function GetSortOrder(tableView) {
 
                var sortExpressions = tableView.get_sortExpressions();
                var sortExpression = new Telerik.Web.UI.GridSortExpression();
                 
                //obtain the values from the GridSortExpression properties
                if (sortExpressions.get_count() > 0) {
                    sortExpression = sortExpressions.getItem(0);
                }
                return sortExpression;
            }
 
            function RgAvailable_OnRowDataBound(sender, row) {
                 
                var rowItem = row.get_item();
                var gridDataItem = row.get_dataItem();
                var tooltip = gridDataItem.Tooltip;
                var cell1 = sender.get_masterTableView()
                                  .getCellByColumnUniqueName(rowItem, "UserNameColumn");
                AddTooltip(cell1, tooltip);
 
                var cell2 = sender.get_masterTableView()
                                  .getCellByColumnUniqueName(rowItem, "TitleColumn");
                AddTooltip(cell2, tooltip);
                var cell3 = sender.get_masterTableView()
                                  .getCellByColumnUniqueName(rowItem, "StatusColumn");
                AddTooltip(cell3, tooltip);
                var cell4 = sender.get_masterTableView()
                                  .getCellByColumnUniqueName(rowItem, "HireColumn");
                AddTooltip(cell4, tooltip);
                var cell5 = sender.get_masterTableView()
                                  .getCellByColumnUniqueName(rowItem, "PhoneColumn");
                AddTooltip(cell5, tooltip);
 
            }
 
            function AddTooltip(element, message) {
                 
                var tooltipManager = $find("<%=rttmRgAvailable.ClientID %>");
 
                if (!tooltipManager) return;
 
                //Find the tooltip for this element if it has been created
                var tooltip = tooltipManager.getToolTipByElement(element);
 
                //Create a tooltip if no tooltip exists for such element
                if (!tooltip) {
 
                    tooltip = tooltipManager.createToolTip(element);
                     
                }
 
                tooltip.set_content(message);
 
            }
             
            //]]>
     
        </script>

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="WhoIsAvailable.aspx.vb"
    Inherits="Scheduler_WhoIsAvailable" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title>Who Is Available</title>
    <link href="../Styles/form.css" rel="stylesheet" type="text/css" />
    <!--[if IE ]>
    <link href="../Styles/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 8 ]>
    <link href="../Styles/ie8.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 7 ]>
    <link href="../Styles/ie7.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 6 ]>
    <link href="../Styles/ie6.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <style type="text/css">
        .availableWrapper
        {
            width: 100%;
            margin: 0;
            padding:0;
            background-color: Transparent;
            max-width: 100%;
            height:100%;
             
        }
        .boxAvailable
        {
            clear: both;
            width: 700px;
            margin: 0 auto 0;
        }
        .loading
        {
            background-color: #fff;
            height:100%;
            width:100%;
            top:-10px;
        }
 
    </style>
</head>
<body  style="background-image: url('../Images/quickApprovalBG.gif'); background-repeat: repeat;padding:0;margin:0;">
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="rsmAvailable" runat="server">
    </telerik:RadScriptManager>
    <uc:ControlDecorator ID="ControlDecorator" runat="server" />
    <telerik:RadWindowManager ID="rwAvailable" runat="server">
    </telerik:RadWindowManager>
    <telerik:RadAjaxLoadingPanel ID="rlpAvailable" runat="server" MinDisplayTime="400" IsSticky="true"
                  CssClass="RadLoadingPanel">
    </telerik:RadAjaxLoadingPanel>
     
    <%--<telerik:RadAjaxManager ID="ramAvailable" runat="server" DefaultLoadingPanelID="rlpAvailable">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="cmdPostBack" EventName="Click">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgAvailable" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rgAvailable">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rttmRgAvailable" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>--%>
    <asp:Panel ID="pnlAvailable" runat="server" CssClass="availableWrapper" >
        <div class="boxAvailable">
            <asp:HiddenField ID="hfLoginKey" runat="server" />
            <asp:HiddenField ID="hfGridResults" runat="server" />
            <div class="title">
                Who is Available?
            </div>
            <asp:Button ID="cmdPostBack" runat="server" CssClass="invisibleButton" />
            <div style="text-align: left; height: 30px; width:700px; background-image: url('../Images/CopySchedulesHeader.gif');
                background-repeat: repeat;  margin-bottom: 0px; border-top: solid 1px #688caf;
                border-left: solid 1px #688caf; border-right: solid 1px #688caf;">
                <div class="left2Column" style="width: 340px; margin-top: 4px;" id="zoneStartDate">
                    <telerik:RadToolTipManager ID="rttmStartDate" runat="server" Skin="Hay" CssClass="RadToolTipStyle"
                        ToolTipZoneID="zoneStartDate" AutoTooltipify="true">
                    </telerik:RadToolTipManager>
                    <asp:Label ID="lblStartDate" runat="server" AssociatedControlID="txtStartDate">Start of Span*:</asp:Label>
                    <telerik:RadDatePicker ID="txtStartDate" runat="server" Width="100px" Skin="Office2007"
                        ToolTip="Select the beginning date and time for which you would like to query available users.">
                        <Calendar runat="server" ID="calStartDate" ClientEvents-OnCalendarViewChanged="OnCalendarViewChangedFrom">
                        </Calendar>
                        <ShowAnimation Type="Fade" Duration="500" />
                        <HideAnimation Type="Fade" Duration="500" />
                    </telerik:RadDatePicker>
                    <telerik:RadTimePicker runat="server" ID="txtStartTime" Width="100px" ToolTip="Select the beginning date and time for which you would like to query available users.">
                        <TimePopupButton Visible="true" />
                        <TimeView ID="TimeView1" runat="server" Columns="4" ShowHeader="false" StartTime="00:00"
                            EndTime="23:59" Interval="00:30" />
                    </telerik:RadTimePicker>
                </div>
                <div class="left2Column" style="width: 340px; margin-top: 4px;" id="zoneEndDate">
                    <telerik:RadToolTipManager ID="rttmEndDate" runat="server" Skin="Hay" CssClass="RadToolTipStyle"
                        ToolTipZoneID="zoneEndDate" AutoTooltipify="true">
                    </telerik:RadToolTipManager>
                    <asp:Label ID="lblEndDate" runat="server" AssociatedControlID="txtEndDate">End of Span*:</asp:Label>
                    <telerik:RadDatePicker ID="txtEndDate" runat="server" Width="100px" ToolTip="Select the ending date and time for which you would like to query available users.">
                        <ClientEvents OnDateSelected="TxtEndDate_DateSelected" />
                        <Calendar runat="server" ID="calEndDate" ClientEvents-OnCalendarViewChanged="OnCalendarViewChangedTo">
                        </Calendar>
                        <HideAnimation Type="Fade" Duration="500" />
                        <ShowAnimation Type="Fade" Duration="500" />
                    </telerik:RadDatePicker>
                    <telerik:RadTimePicker runat="server" ID="txtEndTime" Width="100px" ToolTip="Select the ending date and time for which you would like to query available users.">
                        <TimePopupButton Visible="true" />
                        <TimeView ID="TimeView2" runat="server" Columns="4" ShowHeader="false" StartTime="00:00"
                            EndTime="23:59" Interval="00:30" />
                    </telerik:RadTimePicker>
                </div>
            </div>
            <div id="zoneParms2" style="text-align: left; height: 30px; width:700px; background-image: url('../Images/CopySchedulesHeader.gif');
                background-repeat: repeat; margin-bottom: 0px; border-left: solid 1px #688caf;
                border-right: solid 1px #688caf;">
                <telerik:RadToolTipManager ID="rttpZoneParms2" runat="server" Skin="Hay" CssClass="RadToolTipStyle"
                    ToolTipZoneID="zoneParms2" AutoTooltipify="true">
                </telerik:RadToolTipManager>
                <div style="margin-left: 15px; float: left; margin-top: 4px;">
                    <telerik:RadComboBox ID="ddlDepartments" runat="server" CausesValidation="false"
                        Label="Department:" EmptyMessage="All Departments" ToolTip="Select a department to filter results to only users that are assigned to that department.">
                    </telerik:RadComboBox>
                </div>
                <div style="margin-left: 15px; float: left; margin-top: 4px;">
                    <telerik:RadComboBox ID="ddlTitles" runat="server" CausesValidation="false" Label="Title:"
                        EnableLoadOnDemand="true" EmptyMessage="All Titles" OnClientItemsRequesting="SetContextItems"
                        ToolTip="Select a title to filter results to only users that are assigned to that title.">
                        <WebServiceSettings Path="../Services/WhoIsAvailableServices.asmx" Method="GetTitles" />
                    </telerik:RadComboBox>
                </div>
                <div style="margin-left: 15px; float: left; margin-top: 4px;">
                    <telerik:RadComboBox ID="ddlStatuses" runat="server" CausesValidation="false" Label="Status:"
                        EnableLoadOnDemand="true" EmptyMessage="All Statuses" OnClientItemsRequesting="SetContextItems"
                        ToolTip="Select a status to filter results to only users that are assigned to that status.">
                        <WebServiceSettings Path="../Services/WhoIsAvailableServices.asmx" Method="GetStatuses" />
                    </telerik:RadComboBox>
                </div>
            </div>
            <div id="gridZone" style="display:none;">
            <telerik:RadGrid ID="rgAvailable" runat="server" AutoGenerateColumns="false" Width="700px"
                AllowSorting="true" Height="400px" EnableViewState="false">
                <ClientSettings EnablePostBackOnRowClick="false" EnableRowHoverStyle="true" >
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" ></Scrolling>
                    <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
                    <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" ResizeGridOnColumnResize="false" />
                    <ClientEvents  OnCommand="RgAvailable_OnCommand" OnRowDataBound="RgAvailable_OnRowDataBound"
                       
                     />
                     
                </ClientSettings>
                <MasterTableView ClientDataKeyNames="UserId" TableLayout='Fixed' Width="680px"
                     AllowMultiColumnSorting="false" HierarchyLoadMode="Client" ExpandCollapseColumn-Display="false"
                      
                >  
                     
                    <NoRecordsTemplate>
                        No Records Found
                    </NoRecordsTemplate>
                    <NestedViewTemplate >
                        <div class="form">
                            <telerik:RadScheduler ID="rsAvailable" runat="server" Height="200px" Width="650px"
                                DayStartTime="00:00:00" DayEndTime="23:59:59" ShowFooter="false" ShowAllDayRow="false"
                                DataKeyField="SysID" DataSubjectField="Subject" DataDescriptionField="Description"
                                DataStartField="Start" DataEndField="End" AllowEdit="false" AllowDelete="false"
                                AllowInsert="false" AppointmentStyleMode="Default" GroupingDirection="Horizontal"
                                MultiDayView-UserSelectable="false"  SelectedView="MultiDayView" WeekView-GroupingDirection="Horizontal"
                                MonthView-UserSelectable="false" WeekView-UserSelectable="false" DayView-UserSelectable="false" 
                                 
                            >
                                 
                            </telerik:RadScheduler>
                        </div>
                    </NestedViewTemplate>
                    <Columns>
                        <telerik:GridExpandColumn UniqueName="ExpandColumn" Display='true'     
                                 HeaderText=""
                                  HeaderStyle-Width="20px"
                                 ></telerik:GridExpandColumn>
                        <telerik:GridBoundColumn UniqueName="UserNameColumn" HeaderText="User" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" DataField="UserName"
                            HeaderStyle-Width="130px" HeaderStyle-Wrap="false" SortExpression="UserName"
                            HeaderStyle-Font-Underline="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="TitleColumn" HeaderText="Title" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" DataField="Title"
                            HeaderStyle-Width="130px" HeaderStyle-Wrap="false" SortExpression="Title"
                            HeaderStyle-Font-Underline="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="StatusColumn" HeaderText="Status" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" DataField="Status"
                            HeaderStyle-Width="60px" HeaderStyle-Wrap="false" SortExpression="Status"
                            HeaderStyle-Font-Underline="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="HireColumn" HeaderText="Hire Date" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" DataFormatString="{0:d}"
                            DataField="HireDate" HeaderStyle-Width="80px" HeaderStyle-Wrap="false"
                            SortExpression="HireDate" HeaderStyle-Font-Underline="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridImageColumn UniqueName="EmailColumn" HeaderText="Email" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
                            HeaderStyle-Width="40px" DataType="System.String" DataImageUrlFields="Email"
                            HeaderStyle-Wrap="false" SortExpression="Email" HeaderStyle-Font-Underline="true"
                            DataAlternateTextField="emailAddress" ImageAlign="Middle" ImageHeight="16px"
                            ImageWidth="16px" DataImageUrlFormatString="../Images/{0}.gif">
                        </telerik:GridImageColumn>
                        <telerik:GridImageColumn UniqueName="TextColumn" HeaderText="Text" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
                            HeaderStyle-Width="40px" DataType="System.String" DataImageUrlFields="Text" HeaderStyle-Wrap="false"
                            SortExpression="Text" HeaderStyle-Font-Underline="true" ImageHeight="25px" ImageWidth="25px"
                            DataImageUrlFormatString="../Images/{0}.gif" DataAlternateTextField="cellPhone">
                        </telerik:GridImageColumn>
                        <telerik:GridBoundColumn UniqueName="PhoneColumn" HeaderText="Phone #" ItemStyle-Wrap="false"
                            ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" DataField="Phone" AllowSorting="false"
                             HeaderStyle-Width="100px" HeaderStyle-Wrap="false" HeaderStyle-Font-Underline="false">
                        </telerik:GridBoundColumn>
                         
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
            <telerik:RadToolTipManager ID="rttmRgAvailable" AutoTooltipify="false" 
                RelativeTo="Element" BorderWidth="1" BorderColor="White" BorderStyle="Ridge"
                runat="server" OffsetX="0"  OffsetY="0"
                HideDelay="500" AutoCloseDelay="60000" Width="400px"
                EnableShadow="true" Animation="None" Font-Names="Time New Roman" CssClass="RadToolTipStyle"
                 >
                
            </telerik:RadToolTipManager>
            </div>
            <input type="button" value="Query" onclick="javascript:QueryResultsGrid(); return false;" />
             
        </div>
    </asp:Panel>
    </form>
</body>
</html>


7 Answers, 1 is accepted

Sort by
0
Marin
Telerik team
answered on 26 May 2011, 08:25 AM
Hi,

 This happened because the grid has to loaded the data for the child records after scrolling. Please have a look at this help topic describing how to configure virtual scrolling/paging in RadGrid. Besides setting the virtualItemCount, you should also set  EnableVirtualScrollPaging to true and you may need to handle the OnScroll client event for the grid in  order to fetch additional records when scrolling to the end. AllowCustomPaging  should also be set to true if you use VirtualItemCount. Live demo is available here.

All the best,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
MFitzpatrick
Top achievements
Rank 1
answered on 26 May 2011, 01:16 PM
Thanks for the reply

Mike
0
sat
Top achievements
Rank 1
answered on 05 Dec 2013, 09:31 PM
Hi Team,

Can't the reported scenario by MFitzpatrick be done without the virtual scrolling/paging technique? Because we follw the client side data binding and the records are default to 100 rows but the Expand/Collapse button is visible only for the first 11 records and we don't the scrolling/paging technique employed.

Thank you,
0
Marin
Telerik team
answered on 09 Dec 2013, 03:00 PM
Hi,

The issue is not directly related to the virtualScrolling / paging feature of the control. It is caused because in the case of client-side binding the grid by default loads the default number of items specified by its pageSize. If you are using standard paging in the grid, you should set the page size to be equal to the number of items displayed initially in the control. This way it should be able to properly render images for all records shown on a current page of the grid.

Regards,
Marin
Telerik
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 the blog feed now.
0
sat
Top achievements
Rank 1
answered on 10 Dec 2013, 05:37 PM
Hi,

But I see the number of records are displayed as n+1 where n is the page size. I get 51 records when the page size is 50.
Also, is there a way to get the grid display all the records as bounded - like I don't the paging to be implemented, but just want the records to flow through the page/grid.

Thank you,
0
sat
Top achievements
Rank 1
answered on 11 Dec 2013, 04:24 PM
Does the 2013 version support the client side binding of Detail Tables - the client side binding of Hierarchical Grid View?
0
Marin
Telerik team
answered on 13 Dec 2013, 03:30 PM
Hi,

If you don't have paging in the grid it should display all the records returned by the service in case of client-side binding.
Client-side binding in case of hierarchy and DetailTables is currently not supported by the control.
Additional information and sample custom implementations can be found in the following links:
http://blogs.telerik.com/vladimirenchev/posts/08-09-09/how-to-telerik-radgrid-master-detail-client-side-data-binding-using-linq-to-sql-and-webservice.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/is-it-possible-to-create-a-nested-grid-thorugh-client-code.aspx

Regards,
Marin
Telerik
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 the blog feed now.
Tags
Grid
Asked by
MFitzpatrick
Top achievements
Rank 1
Answers by
Marin
Telerik team
MFitzpatrick
Top achievements
Rank 1
sat
Top achievements
Rank 1
Share this question
or