Friday, September 28, 2012

Cool Functionality with jQuery DatePicker

I was recently tasked to resolve an issue with the speed of the Telerik RadDatePicker in a RadGrid (ASP.Net c#).  Apparently, if a RadGrid with more than 100 rows uses a RadDatePicker in one of its columns, then it can get pretty slow and unresponsive.  I am assuming that this is because of the unidentified overhead that comes with the Telerik object.  Please correct me if I am wrong about this.

Here was an easy solution, though, I dropped the use of the RadDatePicker.

To use the common jQuery "datepicker" object, in the .aspx I created the references to the jQuery scripts and coded the javascript function:

<script src=Scripts/jquery-1.4.1.min.js"type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(function () {
            $(".myFauxClass").datepicker();
        });
</script>

Then, for any of the textboxes, whether Telerix or standard ASP, I referenced the "fake" CSS class:

<asp:TextBox ID="TextBox1" runat="server" CssClass="myFauxClass"></asp:TextBox>

The client-side function will be executed whenever the textbox receives focus and the datepicker calendar will be activated to use with that textbox.  This seems to do the trick and fixed the lagging load time for the RadGrid.

Enjoy!

BTW, I am actually very fond of the Telerik tools, which can be found here: http://www.telerik.com/

No comments:

Post a Comment

Please exercise some control, restraint, and common sense in your rhetoric in order to ensure that posts are readable for all audiences.