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

[Solved] RadGrid columns stuttering when we scroll from one page to the next

3 Answers 114 Views

Grid

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

Avi asked on 05 May 2014, 08:45 AM

Hi, here is a video which summarizes the issue: http://screencast.com/t/fDUE7XVGs

We are changing the grid header dynamically.

Here is a code snippet with the settings (the rest of the code for the page appears below, this is line 666):
<Virtualization EnableVirtualization="true" ItemsPerView="50" InitiallyCachedItemsCount="200" LoadingPanelID="LoadingPanel" />

We are having trouble figuring out how to prevent the columns from momentarily resizing (that's what I mean by "stutter") each time we scroll down far enough to get to the next page.

Any help would be greatly appreciated.

Thanks,
Adam

Here is the rest of the code for the page:

001.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManageUsers.aspx.cs" Inherits="UserMgmt_ManageUsers" %>

002.

003.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

004.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

006.<head id="Head1" runat="server">

007. <title>OCC LLMS</title>

008. <!--

010.

011.Created By: Sreedhar N

012.Created On: 30/03/2010

013.

014.Description:

015.This page is used to display all users point tracking.

016.

017.-->

018. <link type="text/css" href="../buttonstyles/css/jquery.ui.all.css" rel="stylesheet" />

019. <link type="text/css" href="../buttonstyles/css/demos.css" rel="stylesheet" />

020. <script type="text/javascript" src="../buttonstyles/scripts/jquery-1.4.2.js"></script>

021. <script type="text/javascript" src="../buttonstyles/scripts/jquery.ui.core.js"></script>

022. <script type="text/javascript" src="../buttonstyles/scripts/jquery.ui.widget.js"></script>

023. <script type="text/javascript" src="../buttonstyles/scripts/jquery.ui.button.js"></script>

024. <script type="text/javascript" src="../buttonstyles/scripts/buttoncall.js"></script>

025. <link type="text/css" href="../alertstyles/alertstyle.css" rel="stylesheet" />

026. <link type="text/css" href="../css/Blue/Grid.css" rel="stylesheet" />

027. <script type="text/javascript" src="../alertstyles/alerts.js"></script>

028. 

029. <style type="text/css">

030. .RadGrid_Blue th:first-child {

031. border-left: 1px solid #97a1aa !important;

032. }

033.

034. .RadGrid_Blue .rgRow td:first-child, .RadGrid_Blue .rgAltRow td:first-child {

035. border-left: 1px solid #97a1aa !important;

036. padding: 0 0px !important;

037. }

038.

039. .rgHeaderWrapper .rgHeaderDiv {

040. margin-right: 16px !important;

041. }

042.

043. .rgDataWrap {

044. margin-top: -1px !important;

045. }

046.

047.

#RadGrid1_ctl00_ctl03_ctl01_ChangePageSizeLinkButton, #RadGrid1_ctl00_ctl03_ctl01_ChangePageSizeTextBox_wrapper, #RadGrid1_ctl00_ctl03_ctl01_ChangePageSizeLabel {

048. display: none;

049. }

050.

051.

.RadGrid_Blue, .RadGrid_Blue .rgMasterTable, .RadGrid_Blue .rgDetailTable, .RadGrid_Blue .rgGroupPanel table, .RadGrid_Blue .rgCommandRow table, .RadGrid_Blue .rgPager table, .GridToolTip_Blue {

052. border-collapse: separate !important;

053. border-bottom: solid 0px #97a1aa !important;

054. }

055.

056. DIV.RadGrid_Blue {

057. border-bottom-color: #97A1AA !important;

058. border-top-color: #97A1AA !important;

059. border-right-color: #97A1AA !important;

060. border-left-color: #97A1AA !important;

061. }

062.

063. #RadGrid1_ctl00_TopPager {

064. border-left: 1px solid #97a1aa !important;

065. }

066.

067. .rgNoRecords div {

068. text-align: center !important;

069. font-weight: bold;

070. }

071.

072. .RadGrid_Blue {

073. width: 100% !important;

074. }

075.

076. .RadGrid .rgMasterTable {

077. width: 100% !important;

078. }

079. </style>

080. <script language="javascript" type="text/javascript">

081.

082. function ShowCourseRecord(link) {

083. parent.openAjaxpopup(link, 1000, 800, 'User Courses', 'big');

084. }

085.

086. function ShowInstanceRecord(link) {

087. parent.openAjaxpopup(link, 1000, 800, 'User Instances', 'big');

088. }

089. function ShowUser(link) {

090. parent.openAjaxpopup(link, 1000, 800, 'View User Profile', 'big');

091. }

092.

093.

094. function showPleaseWait() {

095. document.getElementById('PleaseWait').style.display = 'block';

096. }

097. </script>

098. <script language="javascript" type="text/javascript">

099.

100.

101. function CompletionCriteria() {

102. // alert(document.getElementById('notification_C_rdViewpdwn').value);

103. if (document.getElementById('notification_C_rdViewpdwn').value == "0") {

104. document.getElementById('notification_C_rdViewpdwn').visible = false;

105. document.getElementById('notification_C_trviewName').style.display = '';

106. document.getElementById('notification_C_txtTemname').value = '';

107. }

108. else {

109. document.getElementById('notification_C_trviewName').style.display = "none";

110. document.getElementById('notification_C_txtTemname').value = document.getElementById('notification_C_rdViewpdwn').value;

111. }

112. }

113. function test() {

114. if (document.getElementById('notification_C_txtTemname').value == "") {

115. var notification = $find("RadNotification1");

116. setTimeout(function () {

117. notification.show();

118. }, 0);

119. return false;

120. } else {

121. return true;

122. }

123. }

124.

125. function AlertmsgforuserInstance(msg) {

126. document.getElementById('hdmsgtext').value = msg;

127. document.getElementById('imgreload').click();

128. }

129. </script>

130. 

131. <script type="text/javascript">

132. var selected = {};

133. var selected1 = {};

134.

135.

136. function RadGrid1_RowSelected(sender, args) {

137. if (args._domEvent.type) {

138. var ID = args.getDataKeyValue("Id");

139. document.getElementById('selectedids').value = document.getElementById('selectedids').value + ID + ',';

140. //alert(ID);

141. }

142.

143. }

144.

145. function RadGrid1_RowDeselected(sender, args) {

146. if (args._domEvent.type) {

147. var ID = args.getDataKeyValue("Id");

148. var str = document.getElementById('selectedids').value; // = document.getElementById('deselectedids').value + ID + ',';

149. str = str.replace(ID, "0")

150. document.getElementById('selectedids').value = str;

151. }

152. }

153.

154. function GridCreated(sender, eventArgs) {

155.

156. //sender.add_rowCreated(RowCreated);

157. //var masterTable = sender.get_masterTableView();

158. ////check whether all items on the active page are selected

159. ////if (masterTable.get_selectedItems().length == masterTable.get_pageSize()) {

160.

//    /*find the checkbox in the header of the GridClientSelectColumn and set checked state for it - will work with AllowMultiRowSelection = true only!*/

161. // var gridHeader = masterTable.get_element().getElementsByTagName("TH")[0];

162. // for (var i = 0; i < gridHeader.childNodes.length; i++) {

163. // if (gridHeader.childNodes[i].id.indexOf("columnSelectCheckBox") > -1) {

164. // gridHeader.childNodes[i].checked = "true";

165. // //alert(gridHeader.childNodes[i]);

166. // }

167. // }

168. //}

169.

170.

171. //Resize();

172. }

173.

174. function RadGrid1_RowDataBound(sender, args) {

175.

176. var link = args.get_item().findElement("lblSRACompleted");

177. var sracompliant = args.get_dataItem()["IsSRACompliant"];

178. var issrarequired = args.get_dataItem()["IsSRARequired"];

179.

180. //Start accredited required

181. //debugger;

182. //required

183. var AccreditedRequired = args.get_dataItem()["AccreditedRequired"];

184. var lblaccreditedRequired = args.get_item().findElement("lblAccreditedRequired");

185. if (AccreditedRequired != null && AccreditedRequired != "0")

186. lblaccreditedRequired.innerText = AccreditedRequired;

187.

188. //required expalnation

189. var AccreditedPointsExplanation = args.get_dataItem()["AccreditedPointsExplanation"];

190. var lblAccOverrideExplanationtxt = args.get_item().findElement("lblAccOverrideExplanationtxt");

191. if (AccreditedPointsExplanation != null && AccreditedPointsExplanation != "")

192. lblAccOverrideExplanationtxt.innerText = AccreditedPointsExplanation;

193.

194. //non accreditated completed

195. var nonacccompleted = args.get_dataItem()["AccreditedCompleted"];

196. if (nonacccompleted == "0")

197. args.get_item().get_cell("AccreditedCompleted").innerText = "";

198.

199. //accreditated compliant

200. var acccompliant = args.get_dataItem()["AccCompliant"];

201. var acccrsmarkimg = args.get_item().findElement("ImgACCCrossMark")

202. var accrightmarkimg = args.get_item().findElement("ImgACCRightMark")

203. if (AccreditedRequired != null && AccreditedRequired != "0") {

204. if (acccompliant == "No") {

205. acccrsmarkimg.style.display = "";

206. accrightmarkimg.style.display = "none";

207. } else if (acccompliant == "Yes") {

208. accrightmarkimg.style.display = "";

209. acccrsmarkimg.style.display = "none";

210. }

211. }

212.

213. //End accredited required

214.

215. //Start non accreditated

216. var NonAccreditedRequired = args.get_dataItem()["NonAccreditedRequired"];

217. var lblnonaccreditedRequired = args.get_item().findElement("lblNonAccreditedRequired");

218. if (NonAccreditedRequired != null && NonAccreditedRequired != "0")

219. lblnonaccreditedRequired.innerText = NonAccreditedRequired;

220.

221.

222. //non accreditated completed

223. var nonacccompleted = args.get_dataItem()["NonAccreditedCompleted"];

224. if (nonacccompleted == "0")

225. args.get_item().get_cell("NonAccreditedCompleted").innerText = "";

226.

227. //required expalnation

228. var NonaccreditedPointsExplanation = args.get_dataItem()["NonaccreditedPointsExplanation"];

229. var lblNonAccOverrideExplanationtxt = args.get_item().findElement("lblNonAccOverrideExplanationtxt");

230. if (NonaccreditedPointsExplanation != null && NonaccreditedPointsExplanation != "")

231. lblNonAccOverrideExplanationtxt.innerText = NonaccreditedPointsExplanation;

232.

233. //non accreditated compliant

234. var noncompliant = args.get_dataItem()["NonCompliant"];

235. var noncrsmarkimg = args.get_item().findElement("ImgNONCrossMark")

236. var nonrightmarkimg = args.get_item().findElement("ImgNONRightMark")

237. if (NonAccreditedRequired != null && NonAccreditedRequired != "0") {

238. if (noncompliant == "No") {

239. noncrsmarkimg.style.display = "";

240. nonrightmarkimg.style.display = "none";

241. } else if (noncompliant == "Yes") {

242. nonrightmarkimg.style.display = "";

243. noncrsmarkimg.style.display = "none";

244. }

245. }

246. //End non Accreditated

247.

248. //SRA course mgmt

249. var crsmarkimg = args.get_item().findElement("ImgSRACrossMark")

250. var rightmarkimg = args.get_item().findElement("ImgSRARightMark")

251. if (sracompliant == "No") {

252. crsmarkimg.style.display = "";

253. rightmarkimg.style.display = "none";

254. } else if (sracompliant == "Yes") {

255. rightmarkimg.style.display = "";

256. crsmarkimg.style.display = "none";

257. }

258.

259. if (issrarequired == "" || issrarequired == null || sracompliant == "Yes")

260. args.get_item().get_cell("DeadlineDays").innerText = "";

261.

262. var sracoursedeadline = args.get_dataItem()["SRACourseDeadLine"];

263.

264. if (sracoursedeadline) {

265. //alert(sracoursedeadline);

266. var dt = new Date(sracoursedeadline);

267. var formatedDate = dt.format("dd mmm yyyy")

268.

269. //alert(formatedDate);

270. if (formatedDate == "NaN NaNNaN NaN") {

271. args.get_item().get_cell("SRACourseDeadLine").innerText = "";

272. }

273.

274. }

275.

276. //End SRA

277.

278. //user profile link

279. var userid = args.get_dataItem().Id;

280. var userviewlnk = args.get_item().findElement("Userpopuplink");

281. userviewlnk.setAttribute("onclick", "ShowUser('UserMgmt/ViewUser_Tab.aspx?UserId=" + userid + "&Count=1&FromAdvancedSearch=true')");

282.

283. //online courses

284. var useronlinecrslnk = args.get_item().findElement("anchrOnlineCourses");

285. useronlinecrslnk.innerText = args.get_dataItem()["UserCourses"];

286. useronlinecrslnk.setAttribute("onclick", "ShowCourseRecord('CourseMgmt/UserCourses.aspx?UserId=" + userid + "')");

287.

288. //offline activities

289. var userofflineactlnk = args.get_item().findElement("anchrOfflineActivities");

290. userofflineactlnk.innerText = args.get_dataItem()["UserInstance"];

291. userofflineactlnk.setAttribute("onclick", "ShowInstanceRecord('CPD/Instances/UserInstances.aspx?UserId=" + userid + "')");

292.

293. }

294.

295.

296. </script>

297.</head>

298.<body>

299. <form id="form1" runat="server">

300. <asp:HiddenField ID="selectedids" runat="server" />

301. <asp:HiddenField ID="Deselectedids" runat="server" />

302. <asp:HiddenField ID="SelAllChecked" runat="server" Value="No" />

303. <asp:HiddenField runat="server" ID="hdmsgtext" />

304. <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" ScriptMode="Release" />

305. <asp:SiteMapPath ID="SiteMapPath1" runat="server" SkinID="crum" />

306. <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="False"

307. StartingNodeUrl="~/Default.aspx" />

308. <div class="title_holder">

309. <h1>

310. <asp:Label ID="lblHead" runat="server" Text="List All Users"></asp:Label></h1>

311. <%-- <div class="note_holder">

312.

313. </div>--%>

314. <asp:ImageButton ID="imgreload" ImageUrl="~/Images/spacer.gif" runat="server" CausesValidation="false"

315. OnClick="imgreload_Click" />

316. </div>

317. <div class="holder">

318. <table cellpadding="0" cellspacing="5" class="gridmenu">

319. <tr>

320. <td>

321. <div class="left">

322. <telerik:RadSearchBox runat="server" ID="rdSearchBox" CssClass="searchBox" Width="200"

323. DropDownSettings-Height="300" EmptyMessage="Search" Filter="StartsWith" MaxResultCount="20"

324. Localization-DefaultItemText="Select" OnSearch="rdSearchBox_Search" EnableAutoComplete="false">

325. <SearchContext DropDownCssClass="contextDropDown">

326. </SearchContext>

327. </telerik:RadSearchBox>

328.

329. <asp:LinkButton ID="btnlinkshowall" runat="server" OnClick="btnlinkshowall_Click"

330. TabIndex="3" onmouseup="showPleaseWait()" CssClass="ac_btn rBorder">

331. <asp:Label ID="Label2" Text="Clear" runat="server" />

332. </asp:LinkButton>

333. <asp:HyperLink ID="hyplnkAdvanceSearch" CssClass="ac_btn" runat="server" NavigateUrl="~/UserMgmt/AdvancedSearch.aspx">

334. <asp:Label ID="lnklbl" Text="Advanced Search" runat="server"></asp:Label>

335. </asp:HyperLink>

336. </div>

337. <div id="tdMnu" runat="server" class="right">

338. <asp:LinkButton ID="btnlinkdeactivate" runat="server" Text="Deactivate" Visible="true"

339. CssClass="ac_btn rBorder" OnClientClick="return ConfirmationWindow(this,'Deactive')"

340. TabIndex="5" OnClick="btnlinkdeactivate_Click" onmouseup="showPleaseWait()">

341. <i class="small icon-de-active"></i>

342. <asp:Label ID="lbldeactive" Text="Deactivate" runat="server" />

343. </asp:LinkButton><asp:LinkButton ID="btnlinkremove" runat="server" CssClass="ac_btn"

344. OnClientClick="return ConfirmationWindow(this,'Delete')" OnClick="btnlinkremove_Click"

345. TabIndex="6" Text="Delete" onmouseup="showPleaseWait()">

346. <i class="small icon-delete"></i>

347. <asp:Label ID="lbldelete" Text="Delete" runat="server" />

348. </asp:LinkButton><asp:DropDownList ID="DDLMenus" Width="150px" runat="server" SkinID="gvActionList"

349. TabIndex="7">

350. <asp:ListItem Selected="True" Text="Select an Action" Value="0">

351. </asp:ListItem>

352. <asp:ListItem Text="Add New User" Value="1">

353. </asp:ListItem>

354. <asp:ListItem Text="Edit User" Value="2">

355. </asp:ListItem>

356. <asp:ListItem Text="View User" Value="3">

357. </asp:ListItem>

358. <asp:ListItem Text="Bulk Edit Users" Value="4">

359. </asp:ListItem>

360. <asp:ListItem Text="Add Users to Group" Value="5">

361. </asp:ListItem>

362. <asp:ListItem Text="Send Email" Value="6">

363. </asp:ListItem>

364. <asp:ListItem Text="Enrol Users in Online Courses" Value="7">

365. </asp:ListItem>

366. <%--Changed Path to handle Bug # 743 -- by Rahul on May 9th 2011--%><asp:ListItem

367. Text="Unenrol Users from Online Courses" Value="13"></asp:ListItem>

368. <%--End--%><asp:ListItem Text="Export Training Record" Value="8"></asp:ListItem>

369. <asp:ListItem Text="Add Users as Group Admin" Value="9"></asp:ListItem>

370. <asp:ListItem Text="Export Screen to Excel" Value="10">

371. </asp:ListItem>

372. <asp:ListItem Text="Export Screen to PDF" Value="11" Enabled="false">

373. </asp:ListItem>

374. <asp:ListItem Text="Enrol Users in Packages" Value="12" Enabled="false"></asp:ListItem>

375. <%-- <asp:ListItem Text="Enrol Users in Instance" Value="14"></asp:ListItem>

376. <asp:ListItem Text="UnEnrol Users in Instance" Value="15"></asp:ListItem>

377. <asp:ListItem Text="Log a Completed Activity" Value="16"></asp:ListItem>--%>

378. </asp:DropDownList>

379. <asp:Button runat="server" ID="imgBtn" SkinID="gvgobutton" Text="Go" OnClick="imgBtn_Click" />

380. </div>

381. </td>

382. </tr>

383. </table>

384. </div>

385. <%--<div class="holder">--%>

386. <table cellpadding="0" cellspacing="0" width="99%">

387. <tr>

388. <td>

389. <asp:Label ID="lblwatchlisthead" runat="server" Visible="false" Text="Administrator Views"

390. SkinID="Sideheading"></asp:Label>

391. </td>

392. </tr>

393. <tr>

394. <td>

395. <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server">

396. <asp:Image ID="Image15" SkinID="Loader" runat="server" />

397. </telerik:RadAjaxLoadingPanel>

398. <asp:UpdatePanel ID="gridUpPnl" runat="server">

399. <ContentTemplate>

400. <div style="position: absolute; left: 500px; top: 300px; z-index: 2; height: 1px">

401. <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="gridUpPnl"

402. DisplayAfter="1" DynamicLayout="false">

403. <ProgressTemplate>

404. <asp:Image ID="Image14" SkinID="Loader" runat="server" />

405. </ProgressTemplate>

406. </asp:UpdateProgress>

407. </div>

408. <div class="helptext" id="PleaseWait" style="display: none; position: absolute; left: 750px; top: 350px; z-index: 2; height: 1px">

409. <asp:Image ID="Image5" SkinID="Loader" AlternateText="Loading..." runat="server" />

410. </div>

411. <%--radgrid--%>

412. <telerik:RadGrid GroupingEnabled="true" ShowStatusBar="false" ShowGroupPanel="false"

413. ID="RadGrid1" AllowMultiRowSelection="true" AllowSorting="true" runat="server"

414. EnableLinqExpressions="false" AllowPaging="true" EnableHeaderContextMenu="true"

415. Width="99%" EnableHeaderContextFilterMenu="true" Style="float: left; padding-bottom: 0px; padding-top: 0px"

416. AllowAutomaticInserts="true" AllowAutomaticUpdates="true" EnableEmbeddedSkins="false"

417. Skin="testskin" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound"

418. OnPreRender="RadGrid1_PreRender" AllowFilteringByColumn="false" GridLines="None"

419. PageSize="50" OnBiffExporting="RadGrid1_BiffExporting">

420. <GroupingSettings CaseSensitive="false" />

421. <ExportSettings IgnorePaging="true" OpenInNewWindow="true" FileName="Courses" ExportOnlyData="true"

422. HideStructureColumns="true">

423. <Pdf PageHeight="210mm" PageWidth="297mm" DefaultFontFamily="Arial" PaperSize="A4"

424. PageRightMargin="15" PageLeftMargin="15" BorderStyle="Medium" AllowPrinting="true"

425. AllowModify="false" PageTitle="Courses" ContentFilter="NoFilter" DisableContentEncryption="true">

426. </Pdf>

427. </ExportSettings>

428. <MasterTableView IsFilterItemExpanded="true" AutoGenerateColumns="false" TableLayout="fixed"

429. AllowMultiColumnSorting="false" GridLines="None" AllowSorting="true" DataKeyNames="ID,UkCPDRole"

430. CommandItemDisplay="Top" AllowFilteringByColumn="false" ClientDataKeyNames="Id"

431. PageSize="25" NoDetailRecordsText="No users were found who meet the selected criteria.">

432. <CommandItemTemplate>

433. <table style="width: 100%;">

434. <tr>

435. <td>

436. <asp:Label ID="lbltext" runat="server" Text="Select Year:" SkinID="LabelBoldtext"></asp:Label> <telerik:RadComboBox

437. runat="server" ID="rdtlbrdrpdwn" OnSelectedIndexChanged="rdtlbrdrpdwn_SelectedIndexChanged"

438. AutoPostBack="true">

439. </telerik:RadComboBox>

440.

441. <asp:Label ID="Label1" runat="server" Text="Select View:" SkinID="LabelBoldtext"></asp:Label> <telerik:RadComboBox

442. runat="server" ID="rdtlskindrpdwn" OnSelectedIndexChanged="rdtlskindrpdwnSelectedIndexChanged"

443. AutoPostBack="true">

444. </telerik:RadComboBox>

445. </td>

446. <td></td>

447. </tr>

448. </table>

449. </CommandItemTemplate>

450. <Columns>

451. <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderText="Select"

452. ItemStyle-HorizontalAlign="Center" Exportable="false" HeaderStyle-Width="3%">

453. </telerik:GridClientSelectColumn>

454. <telerik:GridBoundColumn DataField="Id" Display="false">

455. </telerik:GridBoundColumn>

456. <telerik:GridBoundColumn DataField="UserFirstName" HeaderText="First Name" ItemStyle-HorizontalAlign="left"

457. UniqueName="UserFirstName" ShowFilterIcon="false" AutoPostBackOnFilter="true"

458. SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

459. SortExpression="UserFirstName">

460. </telerik:GridBoundColumn>

461. <telerik:GridBoundColumn DataField="UserLastName" HeaderText="Last Name" ItemStyle-HorizontalAlign="left"

462. UniqueName="UserLastName" ShowFilterIcon="false" AutoPostBackOnFilter="true"

463. SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

464. SortExpression="UserLastName">

465. </telerik:GridBoundColumn>

466. <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" AllowFiltering="false"

467. HeaderText="Profile">

468. <ItemTemplate>

469. <asp:HyperLink CssClass="ac_btn" ToolTip="View Profile" runat="server" ID="Userpopuplink"

470. Style="cursor: pointer">

471. <i class="small icon-UserProfile"></i></asp:HyperLink><%-- <a href="#" onclick="javascript:ShowUser('<%# ResolveUrl("~/UserMgmt/ViewUser_Tab.aspx")%>'+'?UserId='+'<%# Eval("ID")%>'+'&Count=1&FromAdvancedSearch=true');">

472. </a>--%>

473. <telerik:RadToolTip ID="RadToolTipforDivProfile1" runat="server" TargetControlID="Userpopuplink"

474. ShowDelay="10" Width="100px" RelativeTo="Mouse" Position="MiddleRight" AutoCloseDelay="1000"

475. IgnoreAltAttribute="true" RenderInPageRoot="true" EnableShadow="false">

476. <asp:Label ID="lblRadTollTipDivProfile1" Text='View Profile' runat="server"></asp:Label>

477. </telerik:RadToolTip>

478. </ItemTemplate>

479. </telerik:GridTemplateColumn>

480. <telerik:GridTemplateColumn HeaderText="Offline Activities" ItemStyle-HorizontalAlign="Center"

481. ShowFilterIcon="false" AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif"

482. UniqueName="UserInstance" SortDescImageUrl="../css/Images/arrow7.gif" SortExpression="UserInstance"

483. DataField="UserInstance" AllowFiltering="false">

484. <ItemTemplate>

485. <%-- <a href="#" onclick="javascript:ShowInstanceRecord('<%# ResolveUrl("~/CPD/Instances/UserInstances.aspx")%>'+'?Userid= ' + '<%# Eval("ID") %>');">

486. <%#Eval("UserInstance").ToString()%></a>--%>

487. <a href="#" runat="server" id="anchrOfflineActivities" title="Offline Activties">

488. <%#Eval("UserInstance").ToString()%>

489. </a>

490. <telerik:RadToolTip ID="RadToolTipforOfflineActivity" runat="server" TargetControlID="anchrOfflineActivities"

491. ShowDelay="10" Width="110px" RelativeTo="Mouse" Position="MiddleRight" AutoCloseDelay="1000"

492. IgnoreAltAttribute="true" RenderInPageRoot="true" EnableShadow="false">

493. <asp:Label ID="lblRadTollTipforOfflineActivity" Text="Offline Activties" runat="server"></asp:Label>

494. </telerik:RadToolTip>

495. </ItemTemplate>

496. </telerik:GridTemplateColumn>

497. <telerik:GridTemplateColumn HeaderText="Total Online Courses" ItemStyle-HorizontalAlign="Center"

498. ShowFilterIcon="false" AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif"

499. UniqueName="UserCourses" SortDescImageUrl="../css/Images/arrow7.gif" SortExpression="UserCourses"

500. DataField="UserCourses" AllowFiltering="false">

501. <ItemTemplate>

502. <%--<a href="#" onclick="javascript:ShowCourseRecord('<%# ResolveUrl("~/CourseMgmt/UserCourses.aspx")%>'+'?Userid= ' + '<%# Eval("ID") %>');">

503. <%#Eval("UserCourses").ToString()%></a>--%>

504. <a href="#" id="anchrOnlineCourses" runat="server" title="Online Courses">

505. <%#Eval("UserCourses").ToString()%></a>

506. <telerik:RadToolTip ID="RadToolTipforOnlineCourses" runat="server" TargetControlID="anchrOnlineCourses"

507. ShowDelay="10" Width="100px" RelativeTo="Mouse" Position="MiddleRight" AutoCloseDelay="1000"

508. IgnoreAltAttribute="true" RenderInPageRoot="true" EnableShadow="false">

509. <asp:Label ID="lblRadTollTipforOnlineCourses" Text="Online Courses" runat="server"></asp:Label>

510. </telerik:RadToolTip>

511. </ItemTemplate>

512. </telerik:GridTemplateColumn>

513. <telerik:GridTemplateColumn HeaderText="Total UK CPD Required" DataField="NonAccreditedRequired"

514. ItemStyle-HorizontalAlign="Center" UniqueName="NonAccreditedRequired" ShowFilterIcon="false"

515. AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

516. SortExpression="NonAccreditedRequired" HeaderButtonType="LinkButton">

517. <ItemTemplate>

518. <asp:Label ID="lblNonAccreditedRequired" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.NonAccreditedRequired") %>'>

519. </asp:Label><telerik:RadToolTip ID="RadToolTipforNonAccreditedDescription" runat="server"

520. TargetControlID="lblNonAccreditedRequired" Width="200px" RelativeTo="Element"

521. Position="MiddleRight" AutoCloseDelay="90000" EnableShadow="false">

522. <%--<%# DataBinder.Eval(Container, "DataItem.NonaccreditedPointsExplanation")%>--%>

523. <asp:Label ID="lblNonAccOverrideExplanationtxt" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.NonaccreditedPointsExplanation")%>'></asp:Label>

524. </telerik:RadToolTip>

525. </ItemTemplate>

526. </telerik:GridTemplateColumn>

527. <telerik:GridBoundColumn DataField="NonAccreditedCompleted" HeaderText="Total UK CPD Completed"

528. ItemStyle-HorizontalAlign="center" UniqueName="NonAccreditedCompleted" ShowFilterIcon="false"

529. AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

530. SortExpression="NonAccreditedCompleted" HeaderButtonType="LinkButton">

531. </telerik:GridBoundColumn>

532. <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" AllowFiltering="true"

533. DataField="NonCompliant" HeaderText="Total UK CPD Compliant" UniqueName="NonCompliant"

534. SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

535. SortExpression="NonCompliant" HeaderButtonType="LinkButton" FilterControlWidth="80px">

536. <FilterTemplate>

537. <telerik:RadComboBox ID="RadComboBoxTotalUKCPDCompliant" Width="85px" AppendDataBoundItems="true"

538. runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBoxTotalUKCPDCompliantIndexChanged"

539. OnPreRender="RadComboBoxTotalUKCPDCompliant_PreRender">

540. <Items>

541. <telerik:RadComboBoxItem Text="All" />

542. </Items>

543. </telerik:RadComboBox>

544. </FilterTemplate>

545. <ItemTemplate>

546. <%--<asp:Label ID="lblNonCompliant" runat="server"></asp:Label>--%>

547. <asp:Image runat="server" SkinID="CrossMarkImg" ID="ImgNONCrossMark" Style="display: none" />

548. <asp:Image runat="server" SkinID="RightMarkImg" ID="ImgNONRightMark" Style="display: none" />

549. </ItemTemplate>

550. </telerik:GridTemplateColumn>

551. <telerik:GridTemplateColumn HeaderText="Accredited UK CPD Required" DataField="AccreditedRequired"

552. ItemStyle-HorizontalAlign="center" UniqueName="AccreditedRequired" ShowFilterIcon="false"

553. AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

554. SortExpression="AccreditedRequired" HeaderButtonType="LinkButton">

555. <ItemTemplate>

556. <asp:Label ID="lblAccreditedRequired" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.AccreditedRequired") %>'>

557. </asp:Label><telerik:RadToolTip ID="RadToolTipforAccreditedDescription" runat="server"

558. TargetControlID="lblAccreditedRequired" Width="200px" RelativeTo="Element" Position="MiddleRight"

559. AutoCloseDelay="90000" EnableShadow="false">

560. <%--<%# DataBinder.Eval(Container, "DataItem.AccreditedPointsExplanation")%>--%>

561. <asp:Label ID="lblAccOverrideExplanationtxt" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.AccreditedPointsExplanation")%>'></asp:Label>

562. </telerik:RadToolTip>

563. </ItemTemplate>

564. </telerik:GridTemplateColumn>

565. <telerik:GridBoundColumn DataField="AccreditedCompleted" HeaderText="Accredited UK CPD Completed"

566. ItemStyle-HorizontalAlign="center" UniqueName="AccreditedCompleted" ShowFilterIcon="false"

567. AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

568. SortExpression="AccreditedCompleted" HeaderButtonType="LinkButton">

569. </telerik:GridBoundColumn>

570. <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" AllowFiltering="true"

571. HeaderText="Accredited UK CPD Compliant" UniqueName="AccCompliant" ShowFilterIcon="false"

572. DataField="AccCompliant" AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif"

573. SortDescImageUrl="../css/Images/arrow7.gif" SortExpression="AccCompliant" HeaderButtonType="LinkButton"

574. FilterControlWidth="80px">

575. <FilterTemplate>

576. <telerik:RadComboBox ID="RadComboBoxUKCPDCompliant" Width="85px" AppendDataBoundItems="true"

577. runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBoxUKCPDCompliantIndexChanged"

578. OnPreRender="RadComboBoxUKCPDCompliant_PreRender">

579. <Items>

580. <telerik:RadComboBoxItem Text="All" />

581. </Items>

582. </telerik:RadComboBox>

583. </FilterTemplate>

584. <ItemTemplate>

585. <%--<asp:Label ID="lblAccCompliant" runat="server"></asp:Label>--%>

586. <asp:Image runat="server" SkinID="CrossMarkImg" ID="ImgACCCrossMark" Style="display: none" />

587. <asp:Image runat="server" SkinID="RightMarkImg" ID="ImgACCRightMark" Style="display: none" />

588. </ItemTemplate>

589. </telerik:GridTemplateColumn>

590. <telerik:GridBoundColumn DataField="IsSRARequired" HeaderText="UK CPD SRA Mgmt Course Required"

591. ItemStyle-HorizontalAlign="left" ConvertEmptyStringToNull="true" SortExpression="IsSRARequired"

592. SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

593. UniqueName="IsSRARequired" FilterControlWidth="80px">

594. <FilterTemplate>

595. <telerik:RadComboBox ID="RadComboBoxIsSraRequired" Width="85px" AppendDataBoundItems="true"

596. runat="server" AutoPostBack="true" OnSelectedIndexChanged="SRAIsSRARequiredChanged"

597. OnPreRender="RadComboBoxIsSraRequired_PreRender">

598. <Items>

599. <telerik:RadComboBoxItem Text="All" />

600. </Items>

601. </telerik:RadComboBox>

602. </FilterTemplate>

603. </telerik:GridBoundColumn>

604. <telerik:GridBoundColumn DataField="IsSRACompleted" HeaderText="UK CPD SRA Mgmt Course Completed"

605. ItemStyle-HorizontalAlign="left" ConvertEmptyStringToNull="true" SortExpression="IsSRACompleted"

606. SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

607. UniqueName="IsSRACompleted">

608. <FilterTemplate>

609. <telerik:RadComboBox ID="RadComboBoxIsSRACompleted" Width="85px" AppendDataBoundItems="true"

610. runat="server" AutoPostBack="true" OnSelectedIndexChanged="SRAIsSRACompletedChanged"

611. OnPreRender="RadComboBoxIsSRACompleted_PreRender">

612. <Items>

613. <telerik:RadComboBoxItem Text="All" />

614. </Items>

615. </telerik:RadComboBox>

616. </FilterTemplate>

617. </telerik:GridBoundColumn>

618. <telerik:GridTemplateColumn HeaderText="UK CPD SRA Mgmt Course Compliant" ItemStyle-HorizontalAlign="center"

619. ShowFilterIcon="false" UniqueName="IsSRACompliant" DataField="IsSRACompliant"

620. AutoPostBackOnFilter="true" SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

621. SortExpression="IsSRACompliant" HeaderButtonType="LinkButton" AllowFiltering="true"

622. FilterControlWidth="80px">

623. <FilterTemplate>

624. <telerik:RadComboBox ID="RadComboBoxSRAStatus" Width="85px" AppendDataBoundItems="true"

625. runat="server" AutoPostBack="true" OnSelectedIndexChanged="SRAStatusIndexChanged"

626. OnPreRender="RadComboBoxSRAStatus_PreRender">

627. <Items>

628. <telerik:RadComboBoxItem Text="All" />

629. </Items>

630. </telerik:RadComboBox>

631. </FilterTemplate>

632. <ItemTemplate>

633. <asp:Label ID="lblSRACompleted" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.IsSRACompliant")%>'

634. Visible="false"></asp:Label><asp:Image runat="server" SkinID="CrossMarkImg" ID="ImgSRACrossMark"

635. Style="display: none" />

636. <asp:Image runat="server" SkinID="RightMarkImg" ID="ImgSRARightMark" Style="display: none" />

637. </ItemTemplate>

638. </telerik:GridTemplateColumn>

639. <telerik:GridDateTimeColumn DataField="SRACourseDeadLine" HeaderText="UK CPD SRA Mgmt Course Deadline"

640. DataFormatString="{0:d}" ItemStyle-HorizontalAlign="left" ConvertEmptyStringToNull="true"

641. SortExpression="SRACourseDeadLine" SortAscImageUrl="../css/Images/arrow3.gif"

642. SortDescImageUrl="../css/Images/arrow7.gif" UniqueName="SRACourseDeadLine" HeaderButtonType="LinkButton"

643. AllowFiltering="false">

644. </telerik:GridDateTimeColumn>

645. <telerik:GridBoundColumn DataField="DeadlineDays" HeaderText="UK CPD SRA Mgmt Course Days until Deadline"

646. ItemStyle-HorizontalAlign="center" ConvertEmptyStringToNull="true" SortExpression="DeadlineDays"

647. SortAscImageUrl="../css/Images/arrow3.gif" SortDescImageUrl="../css/Images/arrow7.gif"

648. UniqueName="DeadlineDays" HeaderButtonType="LinkButton" AllowFiltering="false">

649. </telerik:GridBoundColumn>

650. <telerik:GridBoundColumn DataField="Country" HeaderText="Country" ItemStyle-HorizontalAlign="left"

651. UniqueName="Country" ShowFilterIcon="false" AutoPostBackOnFilter="true" SortAscImageUrl="../../css/Images/arrow3.gif"

652. SortDescImageUrl="../../css/Images/arrow7.gif" SortExpression="Country" Visible="false"

653. Display="false">

654. </telerik:GridBoundColumn>

655. </Columns>

656. </MasterTableView>

657. <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" AllowDragToGroup="true"

658. ColumnsReorderMethod="Reorder" AllowGroupExpandCollapse="true">

659. <Resizing AllowRowResize="false" AllowResizeToFit="true" EnableRealTimeResize="true"

660. ResizeGridOnColumnResize="false" AllowColumnResize="true" ClipCellContentOnResize="false"></Resizing>

661. <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" UseClientSelectColumnOnly="true" />

662. <ClientMessages DragToGroupOrReorder="Drag to group or reorder. Right-click to add/remove columns" />

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

664. <ClientEvents OnGridCreated="GridCreated" OnRowSelected="RadGrid1_RowSelected" OnRowDeselected="RadGrid1_RowDeselected"

665. OnRowDataBound="RadGrid1_RowDataBound" />

666. <Virtualization EnableVirtualization="true" ItemsPerView="50" InitiallyCachedItemsCount="200"

667. LoadingPanelID="LoadingPanel" />

668. <%-- <ClientEvents OnGridCreated="GridCreated" OnRowSelected="RadGrid1_RowSelected" OnRowDeselected="RadGrid1_RowDeselected"

669. OnRowDataBound="RadGrid1_RowDataBound" OnCommand="RadGrid1_Command" />--%>

670. </ClientSettings>

671. <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true" PageSizeLabelText="Users per page:"

672. PagerTextFormat="Change page: {4} Users <strong>{2}</strong> to <strong>{3}</strong> of <strong>{5}</strong>" />

673. </telerik:RadGrid>

674. <telerik:RadNotification EnableRoundedCorners="True" ShowCloseButton="true" runat="server"

675. ID="notification" AutoCloseDelay="0" TitleMenuToolTip="" OnCallbackUpdate="OnCallbackUpdate"

676. Skin="testskin" EnableEmbeddedSkins="false" Position="Center" Pinned="false"

677. LoadContentOn="EveryShow" Title="Save Settings" TitleIcon="" ContentIcon="">

678. <ContentTemplate>

679. <asp:Panel ID="Panelnot" runat="server" Width="100%">

680. <table width="400px" style="height: 100px">

681. <tr>

682. <td align="right" style="width: 100px">

683. <asp:Label ID="lblviews" Text="View:" SkinID="LabelBoldtext" runat="server"></asp:Label>

684. </td>

685. <td>

686. <asp:DropDownList runat="server" ID="rdViewpdwn" SkinID="AutodropdownList" onchange="CompletionCriteria(this.value);">

687. </asp:DropDownList>

688. </td>

689. </tr>

690. <tr runat="server" id="trviewName">

691. <td align="right">

692. <asp:Label ID="lblname" Text="View Name:" SkinID="LabelBoldtext" runat="server"></asp:Label>

693. </td>

694. <td>

695. <table>

696. <tr>

697. <td>

698.

<asp:TextBox ID="txtTemname" runat="server"></asp:TextBox><span>*</span>

699. </td>

700. <td>

701.

<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="noti"

702.

ControlToValidate="txtTemname" CssClass="valid_txt" ErrorMessage="Please enter a username."

703.

Display="Dynamic"></asp:RequiredFieldValidator>--%>

704. </td>

705. </tr>

706. </table>

707. </td>

708. </tr>

709. <tr>

710. <td></td>

711. <td align="right">

712. <asp:CheckBox ID="chkIsDefault" SkinID="chkBox" runat="server" Text="Default View" />

713. </td>

714. </tr>

715. <tr>

716. <td colspan="2" align="center" style="width: 100%">

717. <div class="Notificationbutton">

718. <asp:Button ID="btnNotifOk" runat="server" Text="OK" OnClick="btnNotifOk_Click" OnClientClick="return test();"

719. CausesValidation="true" ValidationGroup="noti" />

720. <asp:Button ID="Button1" runat="server" Text="Cancel" OnClick="Button1_Click" />

721. </div>

722. </td>

723. </tr>

724. </table>

725. </asp:Panel>

726. </ContentTemplate>

727. </telerik:RadNotification>

728. <telerik:RadNotification ID="RadNotification1" runat="server" Width="300" Animation="Fade"

729. EnableRoundedCorners="true" EnableShadow="true" LoadContentOn="PageLoad" Title="Validation errors"

730. OffsetX="-20" OffsetY="-20" TitleIcon="" EnableAriaSupport="true" Skin="testskin"

731. EnableEmbeddedSkins="false" AutoCloseDelay="7000">

732. <ContentTemplate>

733. <asp:Panel ID="Panel1" runat="server" Width="100%">

734. <table width="100px" style="height: 50px">

735. <tr>

736. <td colspan="2" align="center">

737. <asp:Label runat="server" ID="lblerrormsg" CssClass="valid_txt" Text="Enter View Name"></asp:Label>

738. </td>

739. </tr>

740. </table>

741. </asp:Panel>

742. </ContentTemplate>

743. </telerik:RadNotification>

744. </ContentTemplate>

745. </asp:UpdatePanel>

746. </td>

747. </tr>

748. </table>

749. <%--</div>--%>

750. <%if (Session["Msg"] != null)

751. {%><%string Msg = Session["Msg"].ToString(); %><% this.ClientScript.RegisterStartupScript(this.GetType(), "info", string.Format("alert('{0}');", Msg.Replace("'", "-")), true);%><%Session.Add("Msg", null);

752. }%>

753. </form>

754. <%--grid resize function--%>

755. <script type="text/javascript">

756. function Resize() {

757. var grid = $find("RadGrid1");

758.

759. var parent = $get("grdholder");

760. var dataHeight = grid.get_masterTableView().get_element().clientHeight

761.

762. if (dataHeight < 350) {

763. //alert(dataHeight);

764.

grid.get_element().style.height = grid.get_masterTableView().get_element().clientHeight + grid.GridHeaderDiv.clientHeight + 65 +

"px";

765. document.getElementById("RadGrid1_ctl00_VirtualScroll").style.height = grid.get_masterTableView().get_element().clientHeight + 150 + "px";

766. } else {

767. grid.get_element().style.height = $(window.parent).height() - 150 + "px";

768. //RadGrid1_ctl00_VirtualScroll

769.

770. }

771. grid.repaint();

772. document.getElementById("RadGrid1_ctl00_VirtualScroll").style.height = document.getElementById("RadGrid1_GridData").style.height;

773. }

774. window.onresize = window.onload = Resize;

775. </script>

776.</body>

777.</html>

3 Answers, 1 is accepted

answered on 08 May 2014, 02:09 PM

Hi Adam,

I tried to replicate the issue in a sample runnable application with the same Visualization settings as you are using but to no avail. You could see that the same scenario works properly in the online example below:
http://demos.telerik.com/aspnet-ajax/grid/examples/performance/virtualization/defaultcs.aspx

Test ti on your end and let us know if any specific for replicating the issue exist.

Regards,
Maria Ilieva
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.