Multiple <telerik:RadListBox> are being rendered too slow due to huge amount of rows - telerik

I have an ascx-control is being placed 7 times at the aspx-page.
All controls render the same huge amount of rows: 2400.
The 1st control takes ~1 sec to render.
The 2nd - ~3 sec.
The 3rd - ~15 sec.
The 4th - ~25 sec.
The 5th - ~40 sec.
The 6th - ~65 sec.
The 7th - ~105 sec.
To render all controls on client it takes about 6 min, regardless the first 2 controls is being rendered almost immediately.
This is reproduced only on the Google Chrome the latest version (83.0.4103.97).
I did a try on the Chrome v.81, and there is no performance issue.
Also, there is no performance issue on the following browsers: Mozilla Firefox, IE 11, Edge.
Please see below usage of the RadListBox:
<telerik:RadListBox ID="RadListBox1"
OnItemDataBound="RadListBox1_ItemDataBound"
CheckBoxes="true"
OnClientItemChecked="ItemChecked"
Width="100%" Height="200px"
SelectionMode="Single"
DataTextField="Name"
DataValueField="ID"
EmptyMessage="No Rows"
OnClientLoad="SetInitialEnable"
runat="server"></telerik:RadListBox>
And set items at the ascx.cs:
DataTable list = GetList();
RadListBox1.DataSource = list;
RadListBox1.DataBind();
Actually I have tried the Load On Demand feature, the controls have been loaded even immediately, but all custom js were failed.
Please advice.

Related

ExtJS6 Sencha: Slowly hiding multiple columns

I have a table (Ext.panel.Grid): 21 columns(Ext.grid.column.Column), 50 rows. Hiding with my button 20 columns takes about 2 seconds. I am using column.setVisible(true) method in a loop.
In the browser debugger - ext-all-debug.js, you can see that when you hide each column, a lot of time is spent on:
rootHeaderCt.onHeaderHide(me);
Ext.resumeLayouts(true);
It's in the method hide() in Ext.grid.column.Column.
Is it possible to somehow speed up this process?
Thanks for the advice.
This post solved my problem.
Additionally used Ext.suspendLayouts() before multiple hiding/showing and Ext.resumeLayouts() after.
grid.getView().getHeaderCt().suspendLayouts();
// hide columns
grid.getView().getHeaderCt().resumeLayouts(true);
Fiddle

Will paginate rails limit num of pages to max 10?

I am using will paginate for pagination. I have total 11 pages currently. At footer it shows all the 11 pages no matter on what page the user is. How can I display max 10 pages at footer. So if user comes on page no 5 it will show 5 pages before and after. Not all at once.
You can use the inner_window and outer_window options to control how many page links are displayed. If you only want to show 5 pages on either side of the current page, your view would look like:
<%= will_paginate #objects, inner_window: 5, outer_window: 0 %>
Though because your current page is also included, you'll have to show an odd number (1 + N * 2), so I hope you're alright with 9 or 11.
If you really want to get into it, you'll notice there's also a renderer option that lets you pass a custom link rendering class. The renderer instance needs to response to prepare and to_html like the default renderer does.

What component can i use for displaying tabular data fastly

We already used jqgrid for displaying data.But it took more time to dispaly data(we have more than 5000 data).
We tried with slick grid.But faced the same issue there.So slick grid is more faster than jqgrid .If so then why slickgrid also taking time.
Please help me to proceed my research.
Thanks
Jins
Latest Comments
var columns = [{name:'Personnel',field:'accommodationId',id:'orientation'},
{name:'Employer', field:'itemSystemID', id:'itemSystemID', width:110} ]
var gridData=somVO;
grid = new Slick.Grid("#testGrid",gridData, columns);
Benchmarks:
- Query took 28 sec
- action class takes 32 sec or more

jQueryMobile PageTransition Speed

I am using jQueryMobile 1.3.0 with PhoneGap/Cordova 2.4.0 and trying to figure out how to speed up the page transitions. I have reduced page transitions to approx 50ms when running on my laptop, however, when deployed to iPhone 4 the page transitions slow down dramatically.
Scenario Transition from Page A to Page B.
I notice appox 500ms between "Page B - pagebeforecreate" event and "Page A - pageHide" event.
Here is what I have tried:
I have stripped out most code.
Verified Page A - pageRemove event is not firing thus taking no time.
Decreased animation duration in css from 350ms to 30ms. (this helped, but not enough)
.slide.out,.slide.in {
-webkit-animation-timing-function:ease-out;
-webkit-animation-duration:30ms;
}
Tried both 'a' tag and div with changePage
Go
<div onclick="$.mobile.changePage('#pageB');">Go2</div>
Anyone have any thoughts on what jQueryMobile is doing between the two events that would take time. My next step will be to start logging from inside jquerymobile code to narrow down where time is being spent.
I appreciate any help!
Thanks,
Tom
jQuery Mobile adds a 300ms delay by default to tap events - it's listening for things like double-taps and swipes. If you are not using any of these types of events, consider incorporating FastClick http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile which has solved my speed issues in my PhoneGap/jQueryMobile app.
the fastest way you can disable Transition
<script type="text/javascript">
$(document).on("mobileinit", function() {
$.mobile.defaultPageTransition = $.mobile.defaultDialogTransition = "none";
});
</script>

Unobtrusive JS (MVC3) is causing a delayed DOMContentLoaded event

Despite removing all my code from $.Ready(), it appears that jquery.validate.unobtrusive.js is calling some heafty on load code which is resulting in a 300ms lead-time for our DOMContentLoaded event to fire.
We do have a pretty large DOM, but surely it shouldn't take that long?
Whilst tackling some performance dragons on a product I am working on, it appeared that my DOMContentLoaded event was taking 700ms in IE 9 (We have a pretty big DOM - which is also on my list to tackle)
After disabling all my OnReady code - I narrowed it down
parse(selector) in jquery.validate.unobtrusive.js
After finding:
$(selector).find(":input[data-val=true]").each(function () {...} I knew immediately the structure of the selector in the Find() method, that this would go into the sizzle engine, and not use the Document.QuerySelectorAll().
--Edit as per comment from #CharlesC--
A minor change of the selector to:
$(selector).find("input, select, textarea").filter("[data-val=true]") resulted in a 300ms performance gain within IE.

Resources