TFS 2008 Tips and Tricks: Enable Get Latest on Check Out

February 26, 2009

In this post we will look into how can we enable get latest when doing check-outs while using TFS 2008. In case of a general development team where multiple devs are working on a project and modifying different portion of it we cant have exclusive locks most of the time as it restricts the capabilities of parallel or fast sequential development. So, in this type of general scenario we see the requirement of automatic get latest when somebody checks out a file as it would help in later merging of the file with server version.

TFS 2008 provides us with this option in team project settings -> souce control -> to select the option of get latest on check out. To find this option go to Team Explorer, if Team Explorer is not visible along with solution explorer then go to visual studio menu and under view you can find team explorer. Click it to open team explorer which will show all the team projects assigned to you. You can find source control link under team project too but this is not what we have to use here instead we have to find the source control by right clicking team project name as shown below:

checkout-1

Now when we click on source control the below window gets opened where we have to click get latest on check out option as outlined in the image too:

checkout-21

Hope this helps in case you are looking for it too.

bye for now.

-Sushant

Advertisements

jQuery: Get formatted Date from returned JSON data

February 25, 2009

Recently I was working on using client side template to show a tabular data and one of the columns was a date field. The return data was an enumerable type i.e. List of objects containing the System.DateTime (date) field for representing date. When I looked into the date column in my client side grid on browser I was surprised to see the resulted date in form of “/Date(998667000000)/” (the date data might not be exact as I have put how it looks like) which of kind of unexpected and then led to find how to get javascript Date object from the JSON returned date.

So, In the returned data we get JSON serialized date which is in ticks and hence causes problems at the client end as we can’t treat it as javascript date. Eval() fails in coverting it and returns error saying that the format of date is not correct. Now, to resolve this I liked this approach. Use the reviver function which can be used while doing JSON data parsing with JSON.parse function. You can look at http://www.json.org/js.html to know more about reviver funciton.

[from json.ord]
var myObject = JSON.parse(myJSONtext, reviver);

The optional reviver parameter is a function that will be called for every key and value at every level of the final result. Each value will be replaced by the result of the reviver function. This can be used to reform generic objects into instances of pseudoclasses, or to transform date strings into Date objects.

[/from json.ord]

So, here is a sample jQuery ajax call implementation which can be used as part of any event in your javascript file and would work for you. The pre-requisite here is to have JSON.js file included so that JSON object is understood by the interpreter and it doesnt break client side code.


//methodName -> The WebMethod name you want to call from ajax
//paramArray  -> Array of parameters which will be converted as JSON params in this function
//successFunction  -> name of successfunction to be called if ajax call succeeds
//errorFunction-> name of error Function to be called if ajax call fails

function ClientProxyDateFormatted(methodName, paramArray, successFunction, errorFunction) {
    var pagePath = window.location.pathname;
    var paramList = '';

    if (paramArray.length > 0) {
        for (var i = 0; i < paramArray.length; i += 2) {
            if (paramList.length > 0) paramList += ',';
            paramList += '"' + paramArray[i] + '"' + ':' + '"' + paramArray[i + 1] + '"';
        }
    }
    paramList = '{' + paramList + '}';
    $.ajax({
        type: "POST",
        url: pagePath + "/" + methodName,
        contentType: "application/json; charset=utf-8",
        data: paramList,
        dataType: "text",
        processData: false,
        success: function(msgg) {
            var msg = JSON.parse(msgg, function(key, value) {
                var a;
                if (value != null) {
                    if (value.toString().indexOf('Date') >= 0) {
                        //here we will try to extract the ticks from the Date string in the "value" fields of JSON returned data
                        a = /^\/Date\((-?[0-9]+)\)\/$/.exec(value);
                        if (a) {
                            var dt = new Date(parseInt(a[1], 10));
                            //getMonth return months with index 0 so you need to add 1 to get the correct month value.
                            return dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear();
                        }
                    }
                    return value;
                }
            });
            successFunction(msg);
        },
        error: function() {
            errorFunction();
        }
    });
    return false;
}

This seemed to me as a good problem and hence I think it would be useful to you in case you are facing similar issue. Let me know if it helps or doesnt help 🙂

bye for now.

-Sushant


jQuery: Get the checked and unchecked items from list of checkboxes

February 23, 2009

In this post we will see the use of jQuery in finding the count of checked and unchecked items from a list of checkboxes along with their count. This is also one of the common problems I faced and looked into how to use not selector and also found that count comes as not expected many a times so whats the reason behind that.

Let’s take a look at a generic example page where we have a list of checkboxes inside a table enclosed in a div (you can use any other scenario like a div having a list of checkbox elements only or a combination of checkboxes and other elements in it).

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <% if (false)
       { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>
    <script type="text/javascript">
        //Write your code when Document is loaded
        $(document).ready(function() {
            $("#testChk").click(function() {
                alert($("#testCheck :checked").size());
                //function to print the value of each checked checkboxes
                $("#testCheck :checked").each(function() {
                    alert("value = " + $(this).val());

            });

            $("#tblSub").click(function() {
                //show count of all not checked checkboxes only
                alert($("#testTB :input:not(:checked)").size());
                //show count of all not checked elements
                alert($("#testTB :not(:checked)").size());
                
                //function to print the value of each not checked checkboxes
                $("#testTB :input:not(:checked)").each(function() {
                    alert("value = " + $(this).val());
                });
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <div id="testCheck">
        <input type="checkbox" checked="checked" value="1" />
        <input type="checkbox" checked="checked" value="2" />
        <input type="checkbox" checked="checked" value="3" />
        <input type="checkbox" checked="checked" value="4" />
        <input type="checkbox" checked="checked" value="5" />
        <input type="checkbox" checked="checked" value="6" />
        <input type="checkbox" checked="checked" value="7" />
        <input type="checkbox" checked="checked" value="8" />        
    </div>    
    <input id="testChk" type="button" value="Submit" />
    
    <table id="testTB">
        <thead>
            <tr>
             <th>test</th>
             <th>chk boxes</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="1" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="2" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="3" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="4" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="5" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="6" /></td></tr>
        </tbody>
    </table>
    <input id="tblSub" type="button" value="Submit" />
    </div>
    </form>
</body>
</html>

Since everything is present in UI so I am not giving the code behind as it would be default without any changes to verify how the above is working.

Here are few lines to take a look upon:
//show count of all not checked checkboxes only
1) alert($(“#testTB :input:not(:checked)”).size());
//show count of all not checked elements
2) alert($(“#testTB :not(:checked)”).size());

In the first one we get the count of all non checked checkboxes only because it uses an addition filter of ‘input’ tag type which is how checkboxes get rendered in html. In case we dont use it as in 2) example then we get all the elements inside div testTB which dont have checked attribute so it return all the tr, td etc elements along with input elements thereby increasing the count of return set.

This is a simple example but would help you in case you are trying to find the non cheched elements and getting unexpected count. The reason there would be that all the checkboxes are not inside one container and hence you would have to use the input tag type. Also you might have to consider addition filtering in case the same container contains other input elements as then not will filter those also in result set causing unexpected count. Som the gist is that either you do the wrapping in such a way that these checkboxes are clubbed together or else you need to use additional filter to find the right result set.

Hope this helps!

bye for now.

-Sushant


ASP.NET – Fill and Show Dependent drop down list on Client side without server control and Postback

February 22, 2009

In this post we will look into filling dependent drop down list(s) on client side without using server side asp:dropdownlist control and autopostback, which is the common way we see around. We will be using jQuery at the front end to do the drop down list marp-up generation and adding data to it. We will be using WebMethod to retrieve JSON data from the server where we can return simple data types or any Enumerable data types like List etc so it fills the regular or common way of server side implementation where we use a service method or so to retrieve object collection from DB or from application code itself.

Please find the code snippet below which represents aspx page code behind file and app code file where collection is returned which can be replaced with a service layer call querying DB to get the collection back to presentation layer:

1) ASPX Page with jQuery Code


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <% if (false)
       { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>
    
    <link href="DefaultStyleSheet.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">

        //Write your code when Document is loaded
        $(document).ready(function() {
            $("#ddl2").hide(0, function() { });
            //Code to append a drop down list at client end
            //$("#ddl1").append("<option value=\"new\">new</option>");            

            //event to be fired when an option\index gets changed for first drop down list
            $("#ddl1").change(function() {
                $("#ddl2").fadeOut(1500, function() { });
                var value = $(this).val();
                //alert(value);
                $("#waitingBlock").css({ "margin-left": "10px" });
                $("#waitingBlock").html("<img src='spinner.gif' alt='loading....' />")
                .fadeIn(1500)
                .insertAfter($("#ddl1"));
                
                //Client side function call which will make ajax request for page method named FillDD to get json data
                FillDDProxy("FillDD", ["selectedDDItem", value]);
            });
        });

                
        function FillDDProxy(methodName, paramArray, errorFunction) {
            var pagePath = window.location.pathname;
            var paramList = '';

            if (paramArray.length > 0) {
                for (var i = 0; i < paramArray.length; i += 2) {
                    if (paramList.length > 0) paramList += ',';
                    paramList += '"' + paramArray[i] + '"' + ':' + '"' + paramArray[i + 1] + '"';
                }
            }
            paramList = '{' + paramList + '}';
            
            //Call the page method
            $.ajax({
                type: "POST",
                url: pagePath + "/" + methodName,
                contentType: "application/json; charset=utf-8",
                data: paramList,
                dataType: "json",
                success: function(msg) {
                    successFunction(msg.d);
                }

            });
            return false;
        }
        
        function successFunction(msg) {
            
            $("#waitingBlock").fadeOut(1500, function() { });
            var list = msg.toString();            
            var strArray = list.split(",");
            //clear previously filled second drop down.
            $("#ddl2").children().remove();
            if (strArray.length > 0) {
                for (var i = 0; i < strArray.length; i++) {
                    //Filling the second drop down on client side with returned json data
                    $("#ddl2").append('<option value=\"' + strArray&#91;i&#93; + '">' + strArray[i] + '</option>');
                }
            }
            $("#ddl2").show(1500, function() { });            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList runat="server" ID="ddl1">
        <asp:ListItem Value="d1v1" Text="d1v1"></asp:ListItem>
        <asp:ListItem Value="d1v2" Text="d1v2"></asp:ListItem>
        <asp:ListItem Value="d1v3" Text="d1v3"></asp:ListItem>
        <asp:ListItem Value="d1v4" Text="d1v4"></asp:ListItem>
    </asp:DropDownList>
    
    <%--<asp:DropDownList runat="server" ID="ddl2"></asp:DropDownList>--%>
    <select id="ddl2" ></select>
    
    <span id="waitingBlock"></span>
    </div>
    <div>
    </div>
    </form>
</body>
</html>

2) Code behind C# file

using System;
using System.Web.Services;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static IEnumerable FillDD(string selectedDDItem)
    {
        //Instantiate your service class or call your service layer method directly in case it is also static
        lib serviceLib = new lib();
        return serviceLib.getDDValues(selectedDDItem);
    }
}

I have used App_Code to represent service layer method:

3) App_Code\lib.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for lib
/// </summary>
public class lib
{
	public lib()
	{
		//
		// TODO: Add constructor logic here
		//
	}

    public List<string> getDDValues(string currentValue)
    {
        //use the currentValue to get dependent DD values from DB
        //I am putting them here hardcoded to reprenst the same.
        
        List<string> listString = new List<string>();
        listString.Add(currentValue);
        listString.Add("Sushant");
        listString.Add("RampGroup");
        
        return listString;
    }
}

Overall this code results into a beutiful animated dependent drop down showing and fading from ui depending upon the selection of first drop down. This overall is more performant that the postback as round trip is save with partial trip and also the mode of data transfer is thin JSON. On the client side rendering of this JSON data, it can be achieved either by using jQuery as shown in my example or else using jTemplates and then setting as data for the template. I will share the code in another post with use of jTemplates which can be of great help in scenarios where server side data controls like repeater or data grids are used and which can be replaced by the usage of jTemplates and doing a client side binding of the same with thin JSON data.

So, If you are looking into doing a AJAX and JSON call this example can help you along with an implementation of filling a dependent drop down.

Hope this helps!

bye for now

-Sushant


Who am I what am I doing?

Who am I what am I doing?