.NET, jQuery, SQL, and between

Silverlight 4.0, Visual Studio 2010, .NET 4.0 released

vladimirl — Sat, 17 Apr 2010 05:09:45 GMT

Technorati Tags: Silverlight

OK, now that Silverlight 4.0 finally is out (http://weblogs.asp.net/scottgu/archive/2010/04/15/silverlight-4-released.aspx) its time to learn it. Also VS 2010 and .NET 4.0 released (http://weblogs.asp.net/scottgu/archive/2010/04/12/visual-studio-2010-and-net-4-released.aspx).

And remember about Windows Phone!

There is more than enough information on the web. One thing that I would like to see from Microsoft is a complete reference example of business application.

Personally I like what Nikhil Kothari is doing (check out his Mix 10 session “Developing with WCF RIA Services Quickly and Effectively” and his blog http://www.nikhilk.net/). Also there is Mike Taulty – the best presenter ever - http://mtaulty.com/communityserver/blogs/mike_taultys_blog/default.aspx

Currently I’m watching this three part series:

1. What's new in Silverlight 4 Part 1 by Mike Taulty - http://channel9.msdn.com/posts/matthijs/Whats-new-in-Silverlight-4-Part-1-by-Mike-Taulty/

2. What's new in Silverlight 4: Part 2 by Mike Taulty - http://channel9.msdn.com/posts/matthijs/Whats-new-in-Silverlight-4-Part-2-by-Mike-Taulty/

3. Silverlight 4 - A Guided Tour of the Managed Extensibility Framework (MEF) - http://channel9.msdn.com/posts/matthijs/Silverlight-4-A-Guided-Tour-of-the-Managed-Extensibility-Framework-MEF/

ASP.Net TreeView - scroll to the expanded node

vladimirl — Wed, 27 Jan 2010 06:05:01 GMT

Technorati Tags: ASP.NET,TreeView,jQuery

When we expand TreeView node JavaScript function TreeView_ToggleNode gets executed (it’s part of the TreeView control itself).

So we will “override” this function and add our own functionality to perform scroll to the expanded node.

To find source code of TreeView_ToggleNode function you can use IE Developer Toolbar or Firebug.

I removed some code from this function that I don’t need to make it shorter. Here is the result. Everything should be pretty self explanatory from the code.

Here is the modified function, just add it in you page:

   1:          TreeView_ToggleNode = function (data, index, node, lineType, children)

   2:          {

   3:              var img = node.childNodes[0];

   4:              var newExpandState;

5:

   6:              if (!$('#' + children.id).is(':visible'))

   7:              {

   8:                  children.style.display = "block";

   9:                  newExpandState = "e";

  10:                  img.src = data.images[5];

  11:                  img.title = data.collapseToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));

12:

  13:                  //* 'divTreeViewScrollTo' is the id of the div where we put our tree view

  14:                  if (($(node).position().top + $(children).height() + 10) > $('#divTreeViewScrollTo').height())

  15:                  {

  16:                      if ($(children).height() > $('#divTreeViewScrollTo').height())

  17:                          $('#divTreeViewScrollTo').scrollTop($(node).position().top + $('#divTreeViewScrollTo').scrollTop() - 10);

  18:                      else

  19:                          $('#divTreeViewScrollTo').scrollTop($(children).height() + $('#divTreeViewScrollTo').scrollTop() + 20);

  20:                  }

21:

  22:                  $('#divTreeViewScrollTo').scrollLeft($(node).position().left + $('#divTreeViewScrollTo').scrollLeft() - 10);

  23:              }

  24:              else

  25:              {

  26:                  children.style.display = "none";

  27:                  newExpandState = "c";

  28:                  img.src = data.images[4];

  29:                  img.title = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));

  30:              }

31:

  32:              data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);

  33:          }

Result before node expanded and after node has been expanded ad scrolled top and left:

Ask a question is something is not as clear.

Happy programming!

ASP.Net TreeView - scroll to the selected node

vladimirl — Wed, 27 Jan 2010 05:25:39 GMT

Technorati Tags: ASP.NET,TreeView,jQuery

If we have TreeView inside of the div with the fixed width and height we want selected node to be visible after postback.

Here is small JavaScript function that does this (you don’t have to use jQuery as I did to get the result):

   1:          function ScrollToSelectedNode()

   2:          {

   3:              //* get selected node id

   4:              //* 'tvwScrollTo' - is our tree view id

   5:              var selectedNodeID = $('#<%=tvwScrollTo.ClientID %>_SelectedNode').val();

6:

   7:              if (selectedNodeID != '')

   8:              {

   9:                  //* calculate selected top an left position (http://docs.jquery.com/CSS/position)

  10:                  //* in order to get correct relative position remember to set div position to absolute

  11:                  var scrollTop = $('#' + selectedNodeID).position().top;

  12:                  var scrollLeft = $('#' + selectedNodeID).position().left;

13:

  14:                  //* here 'divTreeViewScrollTo' is the id of the div where we put our tree view

  15:                  $('#divTreeViewScrollTo').scrollTop(scrollTop);

  16:                  $('#divTreeViewScrollTo').scrollLeft(scrollLeft);

  17:              }

  18:          }

Run this function on postback:

   1:          protected void tvwScrollTo_SelectedNodeChanged(object sender, EventArgs e)

   2:          {

   3:              ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ScrollToSelectedNode", "ScrollToSelectedNode();", true);

   4:          }

Result before node selected and after:

Get ASP.NET TreeView – get selected node id on the client side

vladimirl — Tue, 26 Jan 2010 04:04:43 GMT

Technorati Tags: TreeView,ASP.NET,JavaScript

TreeViewClientID_Data.selectedNodeID.value

where TreeViewClientID_Data is the name of the TreeView javascript object that has “selectedNodeID” property.

We can easily load this object and get selected node id like this:

   1:          Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(EndLoadedHandler);

2:

   3:          function EndLoadedHandler(sender, args)

   4:          {

   5:                   //* make sure that object is fully loaded

   6:                    var data = eval('<%=tvwScrollTo.ClientID %>_Data');

   7:                    if(!data)

   8:                         var selectedNodeID = data.selectedNodeID.value;

   9:           }

we have to make sure that TreeViewClientID_Data is loaded.

document.getElementById('TreeViewClientID_SelectedNode').value

where TreeViewClientID_SelectedNode is the id of the hidden field where selected node id is stored

Explained:

TreeViewClientID_Data has a lot of useful information. You can find this object in the source of the page:

We can clearly see that selected node id is stored in the hidden field with the name 'TreeViewClientID_SelectedNode'

So, lets grab it:

document.getElementById('TreeViewClientID_SelectedNode').value 
or dynamically
document.getElementById('<%=tvwScrollTo.ClientID %>_SelectedNode').value

Happy programming!

Jquery Simple Modal plugin

vladimirl — Sun, 20 Dec 2009 19:27:57 GMT

You can upload this example from here (I had made some small modification to the original code but it should be easy to understand. This solution uses just HTML and jQuery): http://cid-4fb5a48846336376.skydrive.live.com/self.aspx/.Public/SimpleModal.zip

I needed a very simple solution that allows me to show centered modal div. ASP.NET Ajax Control Toolkit has modal popup (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx). And also there are many of jQuery examples. But I needed something very simple and something that I have full control over.

Basically any modal popup has a div that overlays whole page with z-index set to very big number – this prevents user from interacting with the page and on the top of this div there is usually centered div that prompts user do do something (or it can be just “Wait loading...” bar that appears during callback).

Here is how the final result should look like.

OK here is the code:

//* simple modal function

new function($)

    $.fn.showModal = function()

      //* create modal if not exists

        if ($('#modal').length == 0)

            $('<div id="modal" style="top:0px; left:0px; position:fixed; z-index:10000; width:100%"></div>').appendTo(document.body);

            //* check if IE6 because it doesnt support fixed position

            if ($.browser.msie && $.browser.version == "6.0")

               $('#modal').css({ 'position': 'absolute', 'height': $(document).height() });

            else

               $('#modal').css({ 'position': 'fixed', 'height': '100%' });

        //* show modal div

        $('#modal').show();

        //* center popup div

        //* set focus to popup div to prevent user from clicking button again by hitting Enter key

        //* you can set focus to OK or Cancel button on the popup div

        $(this)

            .css({ 'top': '150px', 'left': ($(window).width() / 2 - $(this).width() / 2), 'z-index': '10001' })

            .slideDown()

            .focus();

}(jQuery);

new function($)

    $.fn.hideModal = function()

        $(this).slideUp();

        $('#modal').hide();

}(jQuery);

Css style for modal div:

#modal{ position:absolute; z-index:10000; background-color:gray; filter:alpha(opacity=35); opacity:0.35; display:none; }

As you can see modal div created dynamically as we needed it. Position fixed guaranties that overlay div will be there if we scroll the page. If it's IE6 we set div position to absolute and height to document height. This is probably not the best solution. We pretty safe can set div position to absolute and height to document height.

To show modal (“divSimplePopup” is actual popup div we want to be on the top):

$('#divSimplePopup').showModal();

To hide modal:

$('#divSimplePopup').hideModal();

To use it set on click event like this:

<asp:Button ID="btnShowModalDiv" runat="server" Text="Show Modal Div"

            OnClientClick="$('#divSimplePopup').showModal(); return false;"

            CssClass="button_popup" />

or set on click event on page load:

$(document).ready(function()

    $('#<%=btnShowModalDiv.ClientID %>').click(function() { $('#divSimplePopup').showModal(); return false; });

});

or in the code behind

btnShowModalDiv.Attributes.Add("click", "$('#divSimplePopup').showModal(); return false;");

Here is how HTML markup looks like:

<asp:Button ID="btnShowModalDiv" runat="server" Text="Show Modal Div" CssClass="button_popup"

            OnClientClick="$('#divSimplePopup').showModal(); return false;" />

<div id="divSimplePopup" class="popup" style="display: none; width: 350px;">

    <div class="container">

        <div class="header headerdraggable">

            <asp:Label ID="lblPopupHeader" runat="server" CssClass="msg" Text="Simple Popup Header" />

            <asp:LinkButton ID="lbtnHideModal" runat="server" CssClass="close"

                            OnClientClick="$('#divSimplePopup').hideModal(); return false;" />

        </div>

        <div class="bodyAndFooter">

            <div class="body" style="height: 100px; overflow: auto;">

                <asp:Label ID="lblSimplePopupBody" runat="server" Text="Simple Popup Body" />

            </div>

            <div class="footer">

                <asp:Button ID="btnOK" runat="server" Text="OK" Width="40px" CssClass="button_popup" />

                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="button_popup"

                            OnClientClick="$('#divSimplePopup').hideModal(); return false;" />

            </div>

        </div>

    </div>

</div>

You can add different effect for the modal div to fade in or out. I think this is unnecessary.

Let me know if I missed something to make it better or simpler.

I took some inspiration from this post “Simple jQuery Modal Window Tutorial” (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial). Also I used styles from for the Popup Window from Matt Berseth's blog (http://mattberseth.com/blog/2007/11/yui_styled_tip_of_the_day_dial.html). Unfortunately he has not blogged for a while. But there a lot of good stuff over there (I like his TabContainer Themes http://mattberseth.com/blog/2008/04/ajaxcontroltoolkit_tabcontaine.html)

Happy programming!

Technorati Tags: jQuery,ASP.NET

My jQuery cheat sheet

vladimirl — Thu, 17 Dec 2009 01:28:32 GMT

I want to put in this post some the jQuery methods that I found myself searching the web every other time i need them for the future reference.

Check if element exists:

if ($('#elementID').length > 0)

   // do somehting

Disable/enable element

$('#elementID').attr('disabled', 'disabled');

$('#elementID').removeAttr('disabled');

Clear DropdownList or ListBox

$('#ddl_ID >option').remove();

Add entry in the DropDownList or ListBox

$('#ddl_ID').append($('<option></option>').val(1).html('Text'));

Getting the text and value of the selected item in DropDownList

var selectedValue = $('#ddl_ID').val() or $('#ddl_ID option:selected').val() ;

var selectedText = $('#ddl_ID option:selected').text();

Check/uncheck checkbox:

$('#id]').attr('checked', true);

$('#id').attr('checked', false);

Check if checkbox is checked:

$('#id').is(':checked');

Check if element is disabled

$('#id').is(':disabled');

Check if element is visible/hidden

$('#id').is(':visible')

$('#id').is(':hidden')

There are a lot of resources available. I like stackoverflow.com. Here is a nice topic - jQuery Tips and Tricks (http://stackoverflow.com/questions/182630/jquery-tips-and-tricks)

And there is one more to dig - jQuery HowTo (http://jquery-howto.blogspot.com/)

more to come...

Technorati Tags: jQuery,ASP.NET