MyViewState.NET

Using a Different Domain to Login to SQL Server Management Studio

Kevin Babcock — Fri, 21 May 2010 01:05:29 -0500

To simplify the management of user access to SQL Server my company recently implemented a policy limiting the number of local login accounts. Software developers are now required to use their domain accounts to access and work within SQL Server. This new policy works great, except for those of us who work remotely. Since SQL Server Management Studio (SSMS) doesn't let you specify a different domain when logging in using Windows Authentication, a little extra effort is required to get connected.

The best solution I have found for connecting to SQL Server Management Studio with a user account from a different domain is to use the runas command, which allows users to run a program with different permissions than those granted to the current logon.

To launch SSMS with a different user account than the one with which you logged in to the local machine execute the following command from a command prompt:

runas /netonly /user:{domain}\{account name} "{path to SSMS}"

For example, if you work for Microsoft and your username is 'Bob' you would use the following command to launch SSMS:

runas /netonly /user:microsoft\bob "C:\Program Files\Microsoft SQL Server\100\Tools\Binn\VSShell\Common7\IDE\Ssms.exe"

Obviously you will need to modify the path so that it points to the location of SSMS on your machine. When you run this command, you will be asked to provide your domain password before SSMS launches. If you entered the correct login information your domain credentials will be used when selecting Windows Authentication to log in to SSMS.

If you're like me, typing this into a command prompt every time you want to launch SSMS gets old fast. A quicker alternative is to change the target path assigned to an SSMS shortcut. Simply right-click the shortcut or taskbar item and select Properties.

Enter the command into the Target textbox in the Properties dialog.

You'll still be required to enter a password, but at least this eliminates the need to retype the command every time you launch SSMS. If your shortcut doesn't work properly, try running the shortcut target value in a command prompt. This will let allow you to see any error messages that may result if the command is not entered properly.

Free this weekend? Come help at the Southern Maryland Give Camp

Kevin Babcock — Tue, 16 Mar 2010 09:45:00 -0500

I'm excited to be taking part in my first Give Camp this weekend. Over 80 developers are getting together to donate a weekend of coding to 19 charities and non-profits who need our help. But we could still use a few more folks to help out, so if you're free this weekend please consider joining the effort. There will be food and gaming, and even some prizes given out at the end. Oh yeah, and Microsoft DE G. Andrew Duthie has promised to shave his head into a mohawk if we reach 100 volunteers - should be entertaining.

Here's a press release that hit my inbox this morning. If you're interested, head over to the web site and sign up. I hope to see you there!

Local Software Specialists Needed to Assist Area Non-Profits March 19-21

GiveCamp is coming to the Baltimore/Washington area for the first time ever. To be held at St. Mary's College of Maryland (SMCM), the Southern Maryland GiveCamp is a three-day event that partners software developers, designers, and database administrators with non-profit organizations who need technical help, such as the creation of a web site or a tracking system for members. The camp runs from March 19-21. Some of the Southern Maryland sponsors include SMCM, Microsoft, Telerik, Asp.net Web Hosting, Charles County Technology Council, Elite Beatz Entertainment, LL Photography, Computer Management Incorporated, Papa John's Pizza, and Lockheed Martin. For more information on how to volunteer, visit www.somdgc.org.

"The impact on the community is heavy," said Southern Maryland GiveCamp chapter founder Jim Pendravis. "We have about 19 non-profits or charities that are going to receive a year's worth of IT work in the course of a weekend, free. This will allow them to save their resources to do other meaningful works within the community. Currently, there are 82 volunteers, saving these non-profits roughly $393,000 in service work. If we get 100 volunteers to volunteer, I'll shave my head on the last day, and we'll stream it live and put it on YouTube.

"Volunteers can choose to stay overnight, or return the next day," continued Pendravis.

St. Mary's College of Maryland, designated the Maryland state honors college in 1992, is ranked one of the best liberal arts schools in the nation by U.S. News & World Report, Kiplinger's, and The Princeton Review. Founded in 1840 as Maryland's "monument school" commemorating the state's first capital, SMCM is the state's only public honors college.

More than 2,000 students attend the college, which has the highest graduation rate for all Maryland public colleges and universities. The school's waterfront campus along the St. Mary's River in Southern Maryland is home to the 2009 National Intercollegiate Sailing Association Co-ed champions.

What’s New in RadControls for ASP.NET AJAX: Source Code

Kevin Babcock — Tue, 09 Mar 2010 20:57:24 -0500

Many thanks again to Telerik for inviting me to take part in the kick-off webinar for their Q1 2010 release. I had a lot of fun and was pleased to get to show off some of my favorite features in the new release. If you missed the webinar, it’s already up on Telerik TV so be sure to check it out. For those of you interested in the source code from my demos, feel free to download it below.

Q1 2010 is definitely another huge milestone for Telerik, so congratulations to the Telerik team for another great release and once again delivering more than expected!

[Source Code]

Join me tomorrow for the Telerik Q1 2010 release-week kickoff webinar

Kevin Babcock — Mon, 08 Mar 2010 21:09:40 -0500

That’s right, Telerik was kind enough to extend an invite to me (and other fellow Telerik MVPs) to help co-host a webinar this week. I have the good fortune of sharing the virtual stage with Todd Anglin, Telerik’s Chief Evangelist (and my old boss!), to kick off another exciting release week with a What’s New in Q1 2010 Overview webinar.

For my part in all this I’ll be giving a brief (10-15 min) demo of some of my favorite new features in the RadControls for ASP.NET AJAX suite. If you haven’t already heard what’s coming in the suite, here are a few features I’ll be covering:

New control: RadAsyncUpload
New feature: the RadGrid is getting a GridRatingColumn
New feature: the RadGrid is also getting some filtering goodness in the HeaderContextMenu
New feature: the RadListView now has drag-and-drop functionality built-in
New feature: JavaScript intellisense!!! (need I say more?)

There is way more content than could ever be included in a single webinar, so head over to the demos after the official release and check out all the new features. If you don’t already have a license to the ASP.NET suite, Telerik is giving away several throughout the week to webinar attendees and Twitter fans so there will be plenty of opportunities to win.

Don’t forget to sign up to watch the webinar live tomorrow. If you can’t make it, you can always watch it on-demand over on Telerik TV. As always, I’ll make the code from my demos available here later in the week.

How to remove a SQL Server 2008 Instance

Kevin Babcock — Mon, 08 Mar 2010 20:42:28 -0500

I do a lot of database development, so I have several SQL Server and Oracle instances running on my system at any given time. Tonight I wanted to remove an instance of SQL Server that I installed a few weeks ago, but didn’t want to remove SQL Server in its entirety because I have other instances running that I want to keep. It turns out to be pretty easy to remove an instance, but not in an obvious way. I searched through the configuration tools and even launched the setup program to try and figure out how to do this. Finally, I turned to Bing and figured out the answer real quick.

Here for you, dear reader, is the Dummies guide to removing a SQL Server 2008 instance from your machine:

1. Navigate to Start | Control Panel | Programs and Features.

2. Select Microsoft SQL Server 2008 – or Microsoft SQL Server 2008 (64-bit) if applicable – and click Uninstall.

This is why I had a problem figuring out how to remove a SQL Server instance. I never thought of using Uninstall from Programs and Features because intuition told me that that would remove SQL Server from my machine entirely.

3. A dialog window will appear. Choose Remove.

4. The SQL Server Setup Wizard will launch. Click OK if all the setup support rules passed.

5. The next screen provides a list of all instances installed on the machine. Select the instance you want to remove from the Instance to remove features from drop down list and click Next.

6. In the Features section, select those features that you want removed. Since I am keeping another instance running on the machine I left all Shared Features installed and only removed the Database Engine Services associated with the instance being removed.

7. The next few screens should be pretty self-explanatory. Click through them as you are prompted to do so.

And voila! You have successfully removed a SQL Server instance from your machine. Not too difficult, was it?

Use jQuery’s $.map() utility to easily transform arrays

Kevin Babcock — Thu, 04 Mar 2010 00:00:00 -0500

I’m often confronted with the need to take a collection of values and transform them into a different set of values. For example, I want to use Twitter’s search API to get a list of tweets on a certain topic. However, I am only interested in retrieving the URLs to the home pages of each Twitter user returned in the result set. I might use jQuery’s JSONP implementation to call the web service and parse the results with the following JavaScript:

$.ajax({
    url: 'http://search.twitter.com/search.json?q=telerik',
    dataType: 'jsonp',
    success: function(data) {
        var userUrls = [];
        var count = data.results.length;
        for (var i = 0; i < count; i++) {
            var url = 'http://twitter.com/' + data.results[i].from_user;
            userUrls.push(url);
        }
        // ...
    }
});

Using jQuery’s $.map() utility, transforming the results on the client becomes even more trivial.

$.ajax({
    url: 'http://search.twitter.com/search.json?q=telerik',
    dataType: 'jsonp',
    success: function(data) {
        $.map(data.results, function(result) {
            return 'http://twitter.com/' + result.from_user;
        });
        // ...
    }
});

Both approaches have the same result, an array containing URLs to Twitter user account home pages, but the second is more elegant and a bit more terse.

If I really wanted to tighten things up, I could do it all in a single line of code.

$.map(data.results, function(result) { return 'http://twitter.com/' + result.from_user; });

The $.map() function takes two arguments: an array of values and the function used to map each element in the array to a new value in the resulting array. The function provided to $.map() is passed two parameters, the array element being transformed and its index value in the array. I didn’t use the index value in the previous example, but it’s there if you need it. Check out jQuery’s official documentation of the function for more details.

A real-world example

One great example of where this utility might come in handy is with Telerik’s RadGrid for ASP.NET AJAX. The other day I was working on a project that utilizes the RadGrid’s client-side data binding capabilities and wanted to be able to quickly retrieve an array containing the values of every selected item’s ID whenever the grid’s client-side RowSelected event is fired. I pass the IDs to a Silverlight chart, which uses them to call a web service and retrieve contextual data to display about the selected items.

I’ve done this sort of thing many times before, and my initial instinct was to take the same approach I always have:

var rowSelected = function(sender, args) {
    var tableView = args.get_tableView();
    var items = tableView.get_selectedItems();

    var ids = [];
    var count = items.length;
    for (var i = 0; i < count; i++) {
        var dataItem = items[i].get_dataItem();
        ids.push(dataItem.ID);
    }

    // pass IDs to Silverlight chart
}

But when I remembered the jQuery $.map() function I was able to replace the previous implementation with the following, which I find to be easier to implement, ready, and use.

var rowSelected = function(sender, args) {
    var tableView = args.get_tableView();
    var items = tableView.get_selectedItems();
    var ids = $.map(items, function(item) {
        return item.get_dataItem().ID;
    });
}

Final Thoughts

There’s really not much else to say. The $.map() function is straight-forward and easy to use, and it’s just another reason I love to use the jQuery library.

I created a simple demo using the RadGrid and Northwind data to demonstrate how to extract selected items on the client using this function.

Enjoy!

[Source: C#]

A jQuery footer menu plugin for the RadGrid for ASP.NET AJAX

Kevin Babcock — Sun, 28 Feb 2010 22:46:30 -0500

Recently I had the need to add some custom processing to the contents of a RadGrid. I decided that the most desirable solution would be to add a menu of options in the footer of the grid, but unfortunately the RadGrid does not support footer templates. I don’t know if this is because there are other built-in features that are hosted in the grid footer (e.g. paging, command items, etc.), or simply because there hasn’t been any demand for this feature. Either way, I needed to add the functionality.

This seemed like a great opportunity for a jQuery plugin, so I decided to whip one up.

Examining the structure of a RadGrid

Before I can programmatically add a footer to the RadGrid I need to understand its structure. The HTML generated by the RadGrid differs based upon the features being employed in a specific instance, so let’s take a look at a couple of scenarios.

First, here’s how the RadGrid renders on the client in the most basic of implementations:

<div id="rgCustomers">
    <table>
        <colgroup>
            <!-- column group definitions -->
        </colgroup>
        <thead>
            <!-- header contents -->
        </thead>
        <tbody>
            <!-- body contents -->
        </tbody>
    </table>
</div>

And since I care most about content that is rendered in the footer, let’s look at the RadGrid structure when paging and the command item toolbar are enabled:

<div id="rgCustomers">
    <table>
        <colgroup>
            <!-- column group definitions -->
        </colgroup>
        <thead>
            <!-- header contents -->
        </thead>
        <tbody>
            <!-- body contents -->
        </tbody>
        <tfoot>
            <tr class="rgCommandRow">
                <!-- command row elements -->
            </tr>
            <tr class="rgPager">
                <!-- pager elements -->
            </tr>
        </tfoot>
    </table>
</div>

As you can see, the grid is rendered as a <table> wrapped in a <div> element. The <table> defines <colgroup>, <thead>, and <tbody> sections. The contents of these sections is not important as I am only concerned with adding a footer to the <table>. Unless certain features are enabled, no footer element (<tfoot>) is rendered. In that case I’ll need to create and attach a new one. However, if a feature is enable that causes a footer to be rendered I need to ensure that the new menu content is added after any existing footer row elements.

Creating a custom jQuery plugin

Armed with a general understanding of the structure of a RadGrid, I can design the markup I will use to create the menu.

<tr class="footer-menu">
    <td colspan="4">
        <ul>
            <li class="menu-item export">Export Data</li>
            <li class="menu-item search">Search</li>
            <li class="menu-item audit">Audit</li>
            <li class="menu-item email">Email</li>
        </ul>
    </td>
</tr>

The implementation is simple. I will add a new footer row with a single cell that spans the width of the table (in this case 4 columns). The cell will contain an unordered list of menu items; class names and text values will be configurable.

Next I’ll write a simple jQuery plugin to inject this markup into a RadGrid element.

(function($) {
    $.fn.footerMenu = function(items, settings) {

        /* Default settings for footer menu class name  */
        var config = { 'className': 'footer-menu' };
        $.extend(config, settings);

        this.each(function() {
            /* Grab the table element */
            var table = $(this).children('table');

            /* Verify that exactly one table element exists */
            if (table.size() === 1) {

                /* Grab the table's footer element */
                var footer = table.children('tfoot');

                /* If not footer element exists, create one and append it to the table */
                if (footer.size() === 0) {
                    footer = $('<tfoot>').appendTo(table);
                }

                /* Grab the last row element that is not the pager or command row  */
                var row = footer.children('tr:last:not(.rgPager):not(.rgCommandRow)');

                /* If a row does not exist, create one and append it to the footer */
                if (row.size() === 0) {
                    row = $('<tr>').appendTo(footer);
                }

                /* Set the row class name to the value specified in the config object  */
                row.attr('class', config.className);

                /* Grab the row's cell element */
                var cell = row.children('td');

                /* If no cell element exists, create one and append it to the row */
                if (cell.size() === 0) {
                    /* Give the cell a column span equal to the number of columns in the table */
                    var colspan = table.find('colgroup col').size();
                    cell = $('<td>').attr('colSpan', colspan).appendTo(row);
                }

                /* Grab the cell's unordered list element  */
                var list = cell.children('ul');

                /* If no list exists, create one and append it to the cell */
                if (list.size() === 0) {
                    list = $('<ul>').appendTo(cell);
                }

                /* Iterate through the menu items */
                for (i = 0; i < items.length; i++) {
                    var item = items[i];

                    /* Create a new list item and append it to the unordered list */
                    var listItem = $('<li>').attr('class', item.className).appendTo(list);

                    /* If the item was given a text value, set it */
                    if (item.text) listItem.append(item.text);

                    /* If the item should be hidden, hide it */
                    if (item.hidden) listItem.hide();

                    /* Add the items click handler to the listItem element */
                    listItem.click(item.click);
                }
            }
        });
        return this;
    };
})($telerik.$);

Notice that I pass a reference to $telerik.$ to the self-calling function surrounding the plugin, instead of $ or jQuery. This is because Telerik aliases the jQuery object with $telerik.$ in the scripts included in their assembly.

Using the new RadGrid footer menu plugin

With the plugin created and working properly, I need to write a bit of CSS to style the new menu (and its items) to give it a look that is consistent with the RadGrid theme I’m using.

.footer-menu td
{
    background-color: #434343;
    padding: 5px;
}

.footer-menu ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li
{   
    color: #ccc;
    float: left;
    padding: 5px 5px 5px 25px;
    margin-right: 5px;
    cursor: pointer;
}

.footer-menu li:hover
{           
    background-color: #ccc;
    color: #434343;
}

.footer-menu .export
{
    background: url(/Content/export.png) no-repeat 5px center;
    float: right;
}

.footer-menu .search
{
    background: url(/Content/search.png) no-repeat 5px center;            
}

.footer-menu .audit
{
    background: url(/Content/audit.png) no-repeat 5px center;            
}

.footer-menu .email
{
    background: url(/Content/email.png) no-repeat 5px center;            
}

Next, I simply add a reference to the new script in my RadScriptManager. Remember that Telerik includes jQuery with their controls, so you don’t need to have another copy referenced on your page. Check out this post by Atanas Korchev for more details.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Path="~/Content/jquery.footer-menu.js" />
    </Scripts>
</telerik:RadScriptManager>

Finally, I can create the menu and attach it to the RadGrid instance on my page.

Sys.Application.add_load(function() {
    var exportData = function() {
        var tableView = $find('<%= rgCustomers.ClientID %>').get_masterTableView();
        tableView.exportToCsv();
    };

    var search = function() {
        // add search functionality
    };

    var audit = function() {
        // add audit functionality
    };

    var email = function() {
        // add email functionality
    };

    var items = [
        { 'text': 'Export Data', 'className': 'export', 'click': exportData },
        { 'text': 'Search', 'className': 'search', 'click': search },
        { 'text': 'Audit', 'className': 'audit', 'click': audit },
        { 'text': 'Email', 'className': 'email', 'click': email }
    ];

    $telerik.$('#<%= rgCustomers.ClientID %>').footerMenu(items);
});

Final Thoughts

Creating jQuery plugins is pretty easy. With jQuery already bundled with the RadControls, using it to customize and enhance their functionality is a no-brainer. For more details on writing your own jQuery plugins, check out this tutorial.

[Source: C#]

Make cross-domain Ajax requests with jQuery

Kevin Babcock — Fri, 26 Feb 2010 00:55:00 -0500

Most web developers are keenly aware of the browser’s same-origin policy which prevents document elements (including scripts) from accessing elements of a document from a different origin. A document is considered to be of the same origin if it shares the same protocol, port, and host. For example, http://www.myviewstate.net and http://www.myviewstate.net/blog have the same origin; on the other hand, they do not share the same origin with URLs such as https://www.myviewstate.net (different protocol) or http://myviewstate.net (different host). This is generally a good security measure as it helps prevent access to the document by sites that you did not visit. Granted, there are still security vulnerabilities that can be used to work around this policy, but that’s a topic for another day.

One drawback to this security feature is that is requires web developers to go through an intermediary server on the same domain to load content from other sites into a local page. For example, a page wanting to load data from Twitter’s search API might create a server-side proxy to negotiate communication between the client and the remote server. This is a good practice for most sites. However, it is still possible to make such a request directly from client script using the JSON with padding (JSONP) pattern. With JSONP a script tag pointing to the remote server is injected into the page, forcing the browser to download the remote content since script tags are not subject to the cross-domain policy restriction. The server on the other end “pads” the response with a callback function that is injected into the page and executed. In the following example the browser provides the name of the callback by way of a query string parameter in the URL.

<script type='text/javascript' 
        src='http://search.twitter.com/search.json?callback=parseData&q=jquery'>
</script>

If the service on the other end supports JSONP it will pad the returned JSON data with the provided function name.

parseData({"results":[{"profile_image_url":"…”}…]})

When the script is injected into the page, parseData is executed and you immediately have access to the JSON data returned from the remote server.

JSONP & jQuery

jQuery provides built-in support for this functionality through use of the jQuery.ajax member. I’ve discussed some of its features in previous posts, but in summary this function can be used to make just about every kind of Ajax request. To make a JSONP call and process the response you must provide a minimum of the following settings to the function:

$.ajax({
    url: 'http://search.twitter.com/search.json?q=jquery',
    dataType: 'jsonp',
    success: function(data) {
        // process result data
    }
});

jQuery automatically generates a callback function, which it attaches to the window property of the DOM, and adds a unique callback query string parameter to the request. The requested URL looks something like this: http://search.twitter.com/search.json?q=jquery&callback=jsonp1267158972337. By letting jQuery auto generate the callback function, you can access the results via the function assigned to the success setting that you pass into jQuery.ajax.

If you want to define your own callback handler, you can specify it using the jsonpCallback setting passed to jQuery.ajax.

$.ajax({
    url: 'http://search.twitter.com/search.json?q=jquery',
    dataType: 'jsonp',
    jsonpCallback: 'myCallback'
});

function myCallback(data) {
    // process result data
}

The requested URL for this request would look like this: http://search.twitter.com/search.json?q=jquery&callback=myCallback. When you provide your own callback handler the handler generated by jQuery is not called, so providing a function for the success setting is pointless in this case.

If you need to provide the name of the query string parameter uses to define the callback function, you can do so with the jsonp setting. This is useful for Ajax calls to a server that expects a different parameter than the default (callback). A good example of this is the Bing API, which expects a query string parameter called JsonCallback to contain the name of the callback function.

$.ajax({
    url: 'http://api.search.live.net/json.aspx?Appid=<id>&JsonType=callback&sources=web&query=jQuery',
    dataType: 'jsonp',
    jsonp: 'JsonCallback',
    jsonpCallback: 'searchResults'
});

function searchResults(data) {
    // process search results
}

The requested URL for this request would look like this: http://api.search.live.net/json.aspx?Appid=<id>&JsonType=callback&sources=web&query=jQuery&JsonCallback=searchResults.

One final option for making a cross-domain request using the jQuery library is to use the higher-level function jQuery.getJSON. This function merely abstracts the settings typically passed to jQuery.ajax, replacing them with default values. This means you get a function that is easier to use, but less flexible.

$.getJSON('http://search.twitter.com/search.json?q=jquery&callback=?', 
    function(data) {
        // process result data
    }
);

Final Thoughts

Having the ability to make cross-domain requests can be quite useful, but only when used wisely. Remember that with this method you are injecting a remote script into your page; it is best to use this functionality only when you absolutely trust that the content returned from the remote server is not malicious.

Thoughts?

Conditional Client-side Row Selection with the RadGrid for ASP.NET AJAX

Kevin Babcock — Thu, 07 Jan 2010 22:02:00 -0500

A few weeks ago a StackOverflow user asked whether or not a RadGrid row could be selectable based upon some condition. I've run into scenarios in the past where this feature would have come in handy, but unfortunately the functionality is not provided in the RadGrid out of the box. However, as is common with Telerik components, it is possible to implement this functionality with a little extra effort.

First, let's start with a basic RadGrid and some data. For this example, we'll rely on our trusty friend Northwind and use LINQ to SQL and the LinqDataSource control to wire some customer data up to the grid.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
<telerik:RadGrid ID="rgCustomers" runat="server" 
    AllowMultiRowSelection="true" 
    DataSourceID="ldsCustomers"> 
    <ClientSettings 
        EnableRowHoverStyle="true"> 
        <Selecting AllowRowSelect="true" /> 
    </ClientSettings> 
    <MasterTableView> 
        <Columns> 
            <telerik:GridClientSelectColumn UniqueName="SelectColumn" /> 
        </Columns> 
    </MasterTableView> 
</telerik:RadGrid> 
<asp:LinqDataSource ID="ldsCustomers" runat="server" 
    ContextTypeName="RadGridConditionalClientSideRowSelection.Data.NorthwindDataContext" 
    TableName="Customers"> 
</asp:LinqDataSource>

I've allowed the grid to automatically generate its columns based on the data to which it is bound, and added an additional GridClientSelectColumn for selecting rows. Notice that I've also set the properties required to turn on client-side single- and multi-row selection. With those necessary first steps out of the way we can now implement the conditional selection functionality...

First, we need to add a property to the Customer entity that specifies whether or not a specific customer is selectable. Since we’re using LINQ to SQL, we can simply create a partial Customer class and add the new property as well
as the business rule used to determine the 'selectability' of the customer. For this example, let’s make all customers selectable except those from North America.

public partial class Customer 
{ 
    public bool IsSelectable 
    { 
        get { return this.Country != "USA" && this.Country != "Canada"; } 
    } 
}

It shouldn't be too difficult to translate this to your own data model, regardless of whether you're using OpenAccess or some other ORM, or just good old fashion ADO.NET (e.g. if you're binding to a DataTable then just add the extra column and iterate through each row, setting each value based on your business rules). Once this extra value is added to our data model, we can easily track it with the RadGrid by adding it to the MasterTableView's ClientDataKeyNames collection. And since tracking it is only useful if we can access it when we need it - and we need it when a user attempts to select a record – we’ll add an event handler for the OnRowSelecting client-side event.

<telerik:RadGrid ID="rgCustomers" runat="server" 
    AllowMultiRowSelection="true" 
    DataSourceID="ldsCustomers"> 
    <ClientSettings 
        EnableRowHoverStyle="true"> 
        <ClientEvents OnRowSelecting="rowSelecting" /> 
        <Selecting AllowRowSelect="true" /> 
    </ClientSettings> 
    <MasterTableView 
        ClientDataKeyNames="IsSelectable"> 
        <Columns> 
            <telerik:GridClientSelectColumn UniqueName="SelectColumn" /> 
        </Columns> 
    </MasterTableView> 
</telerik:RadGrid>

function rowSelecting(sender, args) { 
    var isSelectable = args.getDataKeyValue('IsSelectable') === 'True'; 
    args.set_cancel(!isSelectable); 
}

Since we’re automatically generating the columns displayed in the RadGrid, we'll need to hide the IsSelectable column. This can be avoided by setting the AutoGenerateColumns property of the RadGrid to false and defining each column in the grid manually. Or we can simply hide the column during the RadGrid's OnColumnCreated event.

protected override void OnInit(EventArgs e) 
{ 
    base.OnInit(e); 
    rgCustomers.ColumnCreated += new GridColumnCreatedEventHandler(rgCustomers_ColumnCreated); 
} 

protected void rgCustomers_ColumnCreated(object sender, GridColumnCreatedEventArgs e) 
{ 
    if (e.Column.UniqueName == "IsSelectable") 
    { 
        e.Column.Visible = false; 
    } 
}

Now whenever a record is selected, we can retrieve the value of its IsSelectable property and either cancel the selection, or allow it to continue.

Okay, so these few easy tweaks get us 90% of the way there. However, this workaround will break the multi-select functionality and therefore we must also add a workaround to make it functional again. As you can see from the image below, the select all checkbox in the header remains unchecked after it is selected. This happens because our rowSelected event handler cancels the row selection for those rows which are not selectable, and internally this prevents the select all checkbox from being toggled. Therefore, you cannot uncheck the select all checkbox to deselect all rows again.

The workaround for this is fairly straightforward, but required a little digging into the RadGrid's client-side API and borrowing of its private functions in order to achieve the desired functionality. First, let's take a look at the code and then I'll discuss what it's doing.

function pageLoad() { 
    var tableView = $find('<%= rgCustomers.ClientID %>').get_masterTableView(); 
    var headerRow = Telerik.Web.UI.Grid.getTableHeaderRow(tableView.get_element()); 
    var checkBox = getSelectCheckBox(headerRow); 
    if (checkBox) checkBox.onclick = function(e) { 
        var event = e || window.event; 
        selectAllRows(checkBox.checked, event); 
    }; 
} 

function selectAllRows(checkHeaderSelectCheckBox, event) { 
    var gridSelection = new Telerik.Web.UI.GridSelection(); 
    var grid = $find('<%= rgCustomers.ClientID %>'); 
    var tableView = grid.get_masterTableView(); 
    var headerRow = Telerik.Web.UI.Grid.getTableHeaderRow(tableView.get_element()); 
    grid._selectAllRows(tableView.get_id(), null, event); 
    gridSelection._checkClientSelectColumn(headerRow, checkHeaderSelectCheckBox); 
} 

function getSelectCheckBox(el) { 
    var inputs = el.getElementsByTagName('input'); 
    for (var i = 0; i < inputs.length; i++) { 
        var input = inputs[i]; 
        if (input.type.toLowerCase() !== 'checkbox') 
            continue; 
        if (input.id && input.id.indexOf('SelectCheckBox') != -1) 
            return input; 
    } 
}

In the pageLoad function, I'm getting an instance of the MasterTableView's client-side object and retrieving it's header row element. Inside that element is the select all checkbox, which I retrieve using a bit of DOM traversal in the getSelectCheckBox function. I attach an onclick event handler, which calls the selectAllRows function, to the checkbox. This function mimics exactly what is happening behind the scenes in the RadGrid's client-side API, but changes the order in which things happen. You see, _selectAllRows must be fired before _checkClientSelectColumn; otherwise, when the rowSelecting event handler we defined cancels the row selection, the checkbox in the header will be left unchecked and break the multi-select/deselect functionality.

Now with the new workaround in place, the conditional row selection works like a charm (without breaking other functionality).

Hopefully my explanation of the code above is clear. If not, I highly recommend you dig into the RadGrid's client-side source code yourself and investigate how the row selection functionality works (specifically, take a look at the following RadGrid source files: GridCommon.js, GridSelection.js, and RadGrid.js). Remember, if you own a Telerik subscription license you have access to the source code as well. Reading and understanding how the controls are implemented provides quite a bit of clarity and is an immense amount of help to me when I find the need to implement workarounds such as this.

I think it would be nice to see Telerik implement conditional row selection in future versions of the RadGrid. But until then, they've provided a flexible enough client-side framework to allow us to implement such features with a minimal amount of effort. That's why I continue to use them in my own projects and recommend them to others.

[Source Code]

Please stay tuned...

Kevin Babcock — Wed, 06 Jan 2010 21:25:00 -0500

I've been pretty quiet for the last few months...life just seems to get in the way of my blogging time I guess. But with a new year (and decade!) started, it's time to pay this blog a bit more attention. However, before I dust the cobwebs off I need to migrate this blog to my new Windows Server 2008 VPS, a task I've been putting off for months.

So please stay tuned for new posts, and bear with me over the next few days as I transition this blog to its new home.

--Kevin