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

[Solved] Heirarchy grid expand buttons not visible

7 Answers 301 Views

Grid

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

MFitzpatrick asked on 20 May 2011, 05:55 PM

expandbuttonsmissing.png

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 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 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

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.

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.

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