Hi,
I wrote a "small" time registration application using RadGrid and RadNumericTextBox. A registration page would have all the tasks of a user and show a column for each day of the week, each day-task cell contains a RadNumericTextBox control.
The application works perfectly except for one small issue. Performance is dreadful.
The biggest issue that I am running into is the way RadNumericTextBox works.
First of all the 'pure' HTML code of each control turns into about 1k-1.5k of bytes per input box (1 span and 4 input fields), all these html elements contain an id (and input fields have a name) which can be rather long (for example: ctl00_ContentPlaceHolder1_rgUserTasks_ctl00_ctl06_Detail10_ctl04_rntbDay6_ClientState).
Secondly, each control adds a javascript initialization code at the end of the page. Code like this:
" $create(Telerik.Web.UI.RadNumericTextBox, {"_enableOldBoxModel":false,"_focused":false,"_shouldResetWidthInPixels":true,"clientStateFieldID":"ctl00_ContentPlaceHolder1_rgUserTasks_ctl00_ctl06_Detail10_ctl04_rntbDay5_ClientState","enabled":true,"incrementSettings":{InterceptArrowKeys:true,InterceptMouseWheel:true,Step:1},"maxValue":24,"minValue":0,"numberFormat":{"DecimalDigits":2,"DecimalSeparator":",","CultureNativeDecimalSeparator":",","GroupSeparator":".","GroupSizes":3,"NegativePattern":"-n","NegativeSign":"-","PositivePattern":"n","AllowRounding":true,"KeepNotRoundedValue":false},"styles":{HoveredStyle: ["width:32px;", "riTextBox riHover"],InvalidStyle: ["width:32px;", "riTextBox riError"],DisabledStyle: ["width:32px;", "riTextBox riDisabled"],FocusedStyle: ["width:32px;", "riTextBox riFocused"],EmptyMessageStyle: ["width:32px;", "riTextBox riEmpty"],ReadOnlyStyle: ["width:32px;", "riTextBox riRead"],EnabledStyle: ["width:32px;", "riTextBox riEnabled"],NegativeStyle: ["width:32px;", "riTextBox riNegative"]}}, {"keyPress":disableEnterKey,"valueChanged":function () { changed = true; UpdateTotals(571,5); }}, null, $get("ctl00_ContentPlaceHolder1_rgUserTasks_ctl00_ctl06_Detail10_ctl04_rntbDay5")); "
This is also another 1k-2k of additional size to the page. The 'fun' part is that this initialization code is largely the same for all controls on the page.
Now html size isn't the entire issue. Because each input control actually contains 4 input fields, a post back results in a lot of data. Even if a field is empty, the fact that each name of each input box is roughly 60-100 bytes results in 320-400 bytes per RadNumericTextBox of post data (its actually more because 1 of the fields contains an unused "client state" field).
One User in the application has roughly 40 tasks which results in 40 * 8 (7 days + 1 'remaining') RadNumericTextBox's which in turn results into a page of 1.2Mbyte and 150k post data. Lets just say it takes .NET a while to render the page, then it takes a while for the user to retrieve the page and then it takes a while for the user to post back the page. Making navigation through the application far from ideal. Note that the design of the application requires "easy" input, so row-editing isn't really an option unless this could be started on mouse-over. Editing mostly happens for a day and not so much row (a row is 7 days for a task).
Currently it looks like I will have to dump RadNumericTextBox control in favor of a traditional input field (possibly even a raw-html field) and perhaps add one RadNumericTextBox to the form and show this input box each time the user wants to edit his hours for that day/task.
Is there any other way around this issue?
Regards,
Jerremy
I wrote a "small" time registration application using RadGrid and RadNumericTextBox. A registration page would have all the tasks of a user and show a column for each day of the week, each day-task cell contains a RadNumericTextBox control.
The application works perfectly except for one small issue. Performance is dreadful.
The biggest issue that I am running into is the way RadNumericTextBox works.
First of all the 'pure' HTML code of each control turns into about 1k-1.5k of bytes per input box (1 span and 4 input fields), all these html elements contain an id (and input fields have a name) which can be rather long (for example: ctl00_ContentPlaceHolder1_rgUserTasks_ctl00_ctl06_Detail10_ctl04_rntbDay6_ClientState).
Secondly, each control adds a javascript initialization code at the end of the page. Code like this:
" $create(Telerik.Web.UI.RadNumericTextBox, {"_enableOldBoxModel":false,"_focused":false,"_shouldResetWidthInPixels":true,"clientStateFieldID":"ctl00_ContentPlaceHolder1_rgUserTasks_ctl00_ctl06_Detail10_ctl04_rntbDay5_ClientState","enabled":true,"incrementSettings":{InterceptArrowKeys:true,InterceptMouseWheel:true,Step:1},"maxValue":24,"minValue":0,"numberFormat":{"DecimalDigits":2,"DecimalSeparator":",","CultureNativeDecimalSeparator":",","GroupSeparator":".","GroupSizes":3,"NegativePattern":"-n","NegativeSign":"-","PositivePattern":"n","AllowRounding":true,"KeepNotRoundedValue":false},"styles":{HoveredStyle: ["width:32px;", "riTextBox riHover"],InvalidStyle: ["width:32px;", "riTextBox riError"],DisabledStyle: ["width:32px;", "riTextBox riDisabled"],FocusedStyle: ["width:32px;", "riTextBox riFocused"],EmptyMessageStyle: ["width:32px;", "riTextBox riEmpty"],ReadOnlyStyle: ["width:32px;", "riTextBox riRead"],EnabledStyle: ["width:32px;", "riTextBox riEnabled"],NegativeStyle: ["width:32px;", "riTextBox riNegative"]}}, {"keyPress":disableEnterKey,"valueChanged":function () { changed = true; UpdateTotals(571,5); }}, null, $get("ctl00_ContentPlaceHolder1_rgUserTasks_ctl00_ctl06_Detail10_ctl04_rntbDay5")); "
This is also another 1k-2k of additional size to the page. The 'fun' part is that this initialization code is largely the same for all controls on the page.
Now html size isn't the entire issue. Because each input control actually contains 4 input fields, a post back results in a lot of data. Even if a field is empty, the fact that each name of each input box is roughly 60-100 bytes results in 320-400 bytes per RadNumericTextBox of post data (its actually more because 1 of the fields contains an unused "client state" field).
One User in the application has roughly 40 tasks which results in 40 * 8 (7 days + 1 'remaining') RadNumericTextBox's which in turn results into a page of 1.2Mbyte and 150k post data. Lets just say it takes .NET a while to render the page, then it takes a while for the user to retrieve the page and then it takes a while for the user to post back the page. Making navigation through the application far from ideal. Note that the design of the application requires "easy" input, so row-editing isn't really an option unless this could be started on mouse-over. Editing mostly happens for a day and not so much row (a row is 7 days for a task).
Currently it looks like I will have to dump RadNumericTextBox control in favor of a traditional input field (possibly even a raw-html field) and perhaps add one RadNumericTextBox to the form and show this input box each time the user wants to edit his hours for that day/task.
Is there any other way around this issue?
Regards,
Jerremy