One more VSS bites the dust

I am happy to announce, that I have just my finished my second VSS to TFS migration, and I hope and pray that I will never be forced to open up VSS again. Yahooo!

Rendering ComponentArt's Splitter in Firefox

I've been working a little bit to add support for FireFox in my application which has only supported IE6 and better. I am trying to be proactive knowing one day my boss will ask for this, and it is actually helping to cleanup the markup we have quite a bit.

Along this journey, I noticed that we have a splitter bar, which has a tree view in one pane and a tree view in a second pane. It is a two pane vertical split. In IE6,7 and 8 (even in standards mode), the pane rendered correctly. When viewed in Firefox the first pane was shown; however, the second pane wasn't being rendered. It looked like the splitter container width was being set to the width of the first pane, which caused that pane to take up the entire container.

After working with Component Art's support team, it was noticed that when you resize the window, the pane would then render correctly. With their help, we found the following to force the splitters to render correctly in firefox.

function splitter_load() {

    if (jQuery.browser.mozilla) {

        splitter.element.style.width = 

              $("#divBidSummary").width() + "px";

        splitter.adjustSize(true);

    }

}

myContainer is a div which I have set to a width of 99% of it's parent. This allows the splitter to grow and shrink as the page is resized. This sample uses jquery, which is an excellant javascript library.

Note: Thanks goes out to Hwan to helping to track down and develop a work around for this solution.

Automatic text selection with Compenant Art's Tree View

Over the last year I have been using Component Art's Web UI suite. I have a love hate relationship with their controls. I love how they are quick and easy to get some advanced UI functionality into your site. I hate their documentation and that some features which I would consider basic seem to be missing. I also want to take a moment and say they have a great tech support team, who has helped me quite a bit over the last year. But overall I would recommend the controls.

In a recent project, I had a tree view, which the user could create their own nested heirarchial tree, they could move the nodes around, and it worked very simillar to the experience you get with Windows Explorer. One minor feature which was missing, that I had wanted (and some of my test user's also asked for), was that when you go to edit the name of the node, select the text for them.

This is a basic UI paradigm that if I go to edit something it automaticly selects itself. When you look at the TreeView control you will see there is no event that indicates that a node is being edited; however, if you don't mind mucking around with a thrid party object (This is something that should not be done lightly CA makes no promises that this will work in future versions) there is a way to do this.

If you examine the TreeViewNode object you will find a method called Edit which is called when a node is supposed to go into Edit mode. By overridding this method we can provide our own implementation for method. The following code copies the Edit function into a new function EditOriginal. It then creates a new Edit function which calls the original function. The new function then uses Jquery to select an input which is a child of a TreeView class. If your not using Jquery or if your page structure is different you might need to modify that code to find the input element, and then select it.

        ComponentArt_TreeViewNode.prototype.EditOriginal = ComponentArt_TreeViewNode.prototype.Edit;

        ComponentArt_TreeViewNode.prototype.Edit = function() {

            this.EditOriginal();

            $('.TreeView input').select();

        }

There is an EditNodeCSS property which I was unable to get a selector working with it. If anyone does get a selection working off that let me know. I'd love to know where in the dom its used and when I try and look at it with my tools the node leaves edit mode.

Note: I want to thank Stephen Hatcher of Component Art's Tech Support team for his assistance in coming up with this solution.

Centering Box Elements in HTML with CSS

Most of my carreer I have been a "backend" guy, working on the database, and building services for consumption by other systems. Over the last couple of years I have had the pleasure of becoming a "frontend" guy, working on various web sites.

So far the site I have been working on only targets IE, As such there hasn't been a strong motiviation to add support for Firefox; however, with IE8 being much more standards compliant, I have a personal desire to get the site to a point where I can turn off IE7 Compatability Mode.

Today I was a little stumped when I was working on markup simillar to the following:

    <div style="text-align: center">

        <table>

            <tr>

                <td>

                    I am Centered

                </td>

            </tr>

        </table>

    </div>

In IE8 with Compatability mode this renders as I expect. The table is centered within the div; however, in Firefox and IE8 standard mode the table is left aligned.

I've always questioned why am I using text-align to align elements, but it always worked so I just shrugged and moved on. Turns out IE wasn't honoring that text-align should only align text. It was using to align all elements. The proper way to do this is:

    <div>  

        <table style="margin-left:auto;margin-right:auto">

            <tr>

                <td>

                    I am Centered

                </td>

            </tr>

        </table>

    </div>

This is so much better. I hated having to use text-align center, and then go through and set all the text up so it would align back left. I have tested this in Firefox 3.0.7 and IE8 (IE7 and Standards Mode). It feels to good finally learn the right way to do something.

Dynamic Expression

Scott Gu has a good article about a great sample component called Dynamic Linq. This is a very powerful addition to your linq toolkit which lets you create expressions based on strings. So imagine that you want to add sorting to a grid which is bound to a List. One way would be to have a switch statement for each options (Yes you can throw up I'll wait).

Another way would be to use the dynamic query library. I've always wondered how difficult it would be to create an Expression dynamically. This would be a nice addition to my Audit Logger allowing for the configuration of an audit category to exist outside of the code.

Much of this code came from this stackoverflow.com article. I simply went and added the glue:

        public static IEnumerable<T> Sort<T>(this IEnumerable<T> source,

            string sortExpression, bool desc)

        {

            var param = Expression.Parameter(typeof(T), string.Empty);

            var fields = sortExpression.Split('.');

            Expression property = null;

            Expression parentParam = param;

            foreach (var field in fields)

            {

                property = Expression.Property(parentParam, field);

                parentParam = property;

            }

            var sortLambda = Expression.Lambda<Func<T, object>>(

                Expression.Convert(property, typeof(object)),

                param);

            if (desc)

            {

                return source.AsQueryable<T>().OrderByDescending<T, object>(sortLambda);

            }

            return source.AsQueryable<T>().OrderBy<T, object>(sortLambda);

        }

Basically this will give you an expression which returns the value of a property. It will support property / field invocation so myObject.MyField.MyProperty. It works by creating an expression which represents the type of parameter being pased in to the lambda.

Then it builds an expression tree by chaining new expressions together for each token myObject, myField etc. Finally it creates a lambda which can be executed.