Creating a master-detail grid with Telerik ASP.NET MVC controls

.. with a twist

Right now I am part of a team that is building a big HR related application. Maybe it's better to call it an HR suite. When finished it can be used to do performance reviews, 360s, development plans and the like with this application. It will be big and the customer plans to conwuer the world wit it. Well, at least Europe.

Architecture

For this applications some choices were made with regards to the archictecture.

First decision: we use ASP.NET MVC3. Why? Well, main reason is that this is becoming some sort of standard way of developing web applications using .NET. Is it the best way? Is the easiest way? Is it the only way? No. No. No. It is one of the possible frameworks to use. And because we expect to get more people on board we pick a framework that more people use over own framework.

The second choice we use Entity Framework and with that the Code-First option. This was a first for us and it takes a bit getting used to not have to write any clever stored procedures.

Database access is separated from the web application and is handled through web services. Making it so much easier to later decide to share the load over more machines.

Finally, a decision that was already made by the client, we should Telerik Components were possible.

Getting back to the subject

Ok, let's get back to what this really about. Implementing a master-detail grid with a Telerik component.

So why a blog post on this? Telerik has an extensive demo site and has a demo on a master detail grid. Yes, they have, but we want to do it slightly different.

To be totally honest, we think that the standard way of ASP.NET MVC3 is in some repect a step back. Done the simple way it means that a lot of the logic is done in the aspx page. It comes close again to classic ASP. Mixing markup with C# code and ending up with not optimal code in both of these areas. We are great believers in Object Oriented approach and we seek to reuse as much code as possible and want to kae our controls as clever as it needs to be.

Beacuse the target market is Europe we have to cater for different languages and we have solved that problem in a base control and derive all controls from that.

In the aspx page, we only want to load a custom user control that we build up completely in code. No, we did not go down the Razor path.

So yes, we have private controls and we override the CreateChildControls() method. We do the binding in the OnPreRender() and finaly in the Render(writer) method we make sure the correct markup is being produced.

Brining in the Telerik controls

The above approach also means that we cannot use the Telerik components as private controls. It is not possible to instantiate the components. So in comes the Telerik.Web.Mvc.UI.Fluent namespace and a variety of Builders. With these builders it is relatively easy to build the component. When we have set all properties we want and bound the data we then use the method ToHtmlString() to get the markup produced by the component and assign that outcome to a LiteralControl. After that we let the rendering go on in the nromal way.

This way we can use our own OO-based control hierarchy and still use the powerful Telerik Components. We do not wish to completely build (and test) a sortable, pageable, editable grid control.

Now for the Master-Detail grid

In one of our Use Cases we needed a Master-Detail grid. No problem the Telerik Grid component supports that as shown in the demo.

The problems was how to get that done in our approach using the Builders. We did not find any real examples of this.

Telerik support team

So then we got into the normal horror of sending a question to the support desk. Normally it takes some days to get a reply and then you need a couple of messages to get them to understand your question and then explain why you want to have it done the way you are doing it. Before finnaly, you get into the struggle of getting an answer that really works.

But no wait!

The Telerik support is different!

They reply within 24 hours as advertised. I even had an answer with ten minutes on one of my questions.

And they quickly understood what I was trying to and gave me enough info to solve my problem with a workday. And being probably in different time zones I think that is a wondeful achievement! Many thanks for that!

As a big thank you I wil explain what the final solution was.

The problem

We want show a grid with all the departments of a company and we want to click open (expand) a department to show a list of it's employees.

Nothing too special.

The solution

Our data model is pretty simple:

Department

Properties

• Guid DepartmentId
• string Name
• List Employees

Employee

Properties

• Guid EmployeeId
• string FirstName
• string FirstName

Our control has a LiteralControl that will be the placeholder for the markup produced by the GridBuilders. Also there is a private field that holds a list of Departments with the corresponding Employees.

Let's start using the GriDBuilder to first create the Master part.

GridBuilder gridBuilder = HtmlHelperExtension.Telerik(viewPage.Html).Grid();
            gridBuilder.Name("MasterDetailGrid")
               .DataBinding(dataBinding => dataBinding
                   .Server())
               .BindTo(departments)
               .Columns(columns =>
               {
                   columns.Bound(d => d.Name).Title("Department");
               });

This is the normal way to use the GridBuilder to create a Telerik Grid.

The Detail part of the Grid is itself also a Grid, so we can use teh same approach.

GridBuilder employeeGridBuilder = HtmlHelperExtension.Telerik(viewPage.Html).Grid()
   .DataBinding(dataBinding => dataBinding
   .Server())
   .Name("Detail")
   .Columns(columns =>
   {
      columns.Bound(d => d.FirstName).Title("FirstName");
      columns.Bound(d => d.LastName).Title("LastName");
});

Note that I have not bound this Deatil Grid to anything yet. That is something we need to do as part of the master Grid. To do so we need the DetailView method of the Grid.

gridBuilder.DetailView(dep => dep.Template(d =>
   {
      employeeGridBuilder.BindTo(d.Employees);
   }));

This makes the Employee bound to the Employees of the Department that is in the row of the Master part of the Grid. Now, spit out the markup and put it in the LiteralControl.

literalControl.Text = gridBuilder.ToHtmlString();

But nothing shows up for the Employees. We ca expand a Department row and there is some white space, but no Employees.

The final step

Something inside my head said that I had to use ToHtmlString() on the detail Grid as well. But I could not find the correct syntax. So back to the Supprt Team at Telerik and an answer came very quick. It was simple as the following:

gridBuilder.DetailView(dep => dep.Template(d =>
   {
      employeeGridBuilder.BindTo(d.Employees);
      return employeeGridBuilder.ToHtmlString();
   }));

This makes the detail Grid appear and now we can move forward again full speed!

Thansk again!

Not only does Telerik produce great components, they can be used in various ways. Even the not so standard way we want to use them. Telerik also has a super Support Team is both fast and correct in their answers.

If you ever run ito a problem with Telerik components they will surely be able to help you out in no time!

I was shocked

.. and then I laughed

Mosaic?

.. wasn't that the first browser?

I must admit that back in the old days when cows still walked barefoot in the meadows I was browsing the Internet using the Mosaic browser. That was a very, very log time ago.

But this blogpost has nothing to do wth that.

Blogger views

Blogger (which hosts this blog) added a dynamic view mode that allows the user to view a blog in a number of different ways. One them is "mosaic" that I think can provide in a snapshot what a blog is all about.

Blogger is just one example of how Google breathe new life into a product. They have done this by "rotating" it to a new team and it's great to see that they keep innovating on a product that's been around for so long.

Here's the link to see this blog in the mosaic view: http://roho2003.blogspot.com/view/mosaic and you can change it to one of the other dynamic views with the menu in the upper left.

Enjoy!

A multimedia super machine

.. what would that be today?

Today the multimedia business is rapidly (r)evolving with ever more possibilities and more machines are coming together. Telephone, Internet and TV are converging with more and more functionalities coming in as well.
I find it difficult to keep up to date, but still I try. Every month, it seems, some new gadget comes onto the market that has some completely new amazing function or a better way to do something an other device already did. It's hard to keep up with it.

My multimedia center is not yet complete

Although my multimedia machinery is relatively complete I still miss some functionality. I can not playback all the movies I hold on my NAS (DLNA enabled) and I can not record TV shows. Or time shifting. I can do some browsing on my TV and on my Wii but neither is great.
So there are somethings that I would want to add to my setup. But I only want to add a single machine that holds all possible options I can think of. At least that I can think off today.
If only I could think of all the options available today.

And that's where you come in

Since it is impossible for me to compile the list of maybe all the options that are out there at this moment I have decided to crowdsource this task. I have shared a Google Docs document that you can freely edit.
Please bear in mind that I don't want the machine to make coffee, do the laundry and walk the dog. So please only realistic requirements for the machine.
So if you want to help me find the requirements for my next Multimedia Super Machine just click the link and add to the document.
Many thanks in advance!

The results so far

Have a lookie!

Scroll about :-) or just click the link and have better view and maybe even add or correct.

Using simple jQuery to detect changes

.. a quick solution

Updated

Today I had a small task assigned to me to prevent a user from navigating away from a web form when there are unsaved changes. As it was a rather extensive form (and old code) I had the feeling that it could be quite an extensive task.
Yes, I know this is more of a beginner's level blogpost, but maybe someone can use it. Otherwise burn me down to the ground in the comments.

General idea

A simple solution came to mind:

1. do this on the client
2. in comes JavaScript and yep, here comes jQuery!
3. have a page wide boolean isDirty that starts as 'false'
4. when an input control is changed, make isDirty 'true'
5. when user tries to leave the page, check the value of isDirty
6. when isDirty is 'true' show confirmation dialog
7. if the user cancels stay on the page
8. if the user ignores then proceed onwards

All rather simple.

Let's implement this!

Steps 1 and 2 are easy to take. We will just include the jQuery library in the page and start a block of JavaScript.
Also simple is step 3.

var isDirty = false;

Step 6,7 and 8 can be wrapped in a simple function:

function IsPageDirty() {
   if (isDirty) {
      var ignoreChanges = confirm("Unsaved changes. Proceed anyway?");
         return (ignoreChanges);
   }
   return true;
}

That was easy, as some would say.

Now the final leaps

Then I decided that it would be simple a matter of using a selector in jQuery and add a function to the change function that sets the isDirty boolean to 'true'.
I opted for a class 'trackChanges'.
This is the little snippet that I produced.

$(".trackchange").change(function() {
   isDirty = true;
});

Similarly I chose a class of 'moveaway' for those links that can lead the user away from the current page. These links should get a onclick attribute returning the the result from the IsPageDirty() function described above.

$(".moveaway").attr("onclick", "return IsPageDirty();");

And then there was a lot of work ...

Since I then had to go through the entire form. It was an aspx page and there User Controls (ascx) being loaded and I had to go through thse as well. Not very pleasant.
I got myself another cup of coffee and had a good thought. Then I decided to just select all input controls and not just certain marked with a class.
Changed the code to the following.

$("input, select").change(function() {
   isDirty = true;
});

Same was true for all the links. I opted for selecting all anchors.

$("a").attr("onclick", "return IsPageDirty();");

Then I had a huge problem, because the saving was also done using a link. Before the saving would start the user gets a warning that there are unsaved changes. A bit confusing to say the least.

I didn't want to go back to putting a class on all the other links just to get around this. I wanted filter out some of the anchors by putting a class on these.

Luckily, jQuery has a function .not() that takes a selector and filters out these from the selection it is applied to. So I put a class 'always' on the anchors that should not have the IsPageDirty() check and changed the line to:

$("a").not(".always").attr("onclick", "return IsPageDirty();");

And that was it! A very simple piece of JavaScript code and hardly any changes to the page itself. I only had to add a class to some of the links.

Bringing it all together

Even if it is a very simple scenario and the code is probably not as compact as it can be, I think it shows once again how versatile JavaScript is in combination with library like jQuery.
So to get all together

<script type="text/javascript">
   var isDirty = false;

   $(document).ready(function() {
      isDirty = false;
      $("input, select").change(function() {
         isDirty = true;
      });
      $("a").not(".always").attr("onclick", "return IsPageDirty();");
      // a with class "always" is not checked
   });

   function IsPageDirty() {
      if (isDirty) {
         var ignoreChanges = confirm("Unsaved changes. Proceed anyway?");
            return (ignoreChanges);
      }
      return true;
   }
</script>

Not earth shocking

I know, I know, but still I think it could be of some help for others somewhere on the web. And maybe to help me remember this for future reference.

Small update

The above solution worked on almost all of the pages, but one of the pages had some ASP.NET AJAX stuff on it, where dropdownlist were filled after the initial pageload. This caused some nasty problems, because these made the

change()

function go off and set the

isDirty

variable to true.
Some scratching of the head and then some Googling made find the

live()

function to be my saviour in this.

<script type="text/javascript">
   var isDirty = false;

   $(document).ready(function() {
      isDirty = false;
      $("input, select").not(".ignore").live("change", (function() {
         // control with class "ignore" does not fire the isDirty flag
         isDirty = true;
      });
      $("a").not(".always").attr("onclick", "return IsPageDirty();");
      // a with class "always" is not checked
   });

   function IsPageDirty() {
      if (isDirty) {
         var ignoreChanges = confirm("Unsaved changes. Proceed anyway?");
            return (ignoreChanges);
      }
      return true;
   }
</script>

A reader with a good eye also notices the

.not(".ignore")

function I added to exclude some controls from firing the isDirty flag. I used this class on some input controls used for search.

That's it for now!

Related articles

• jQuery 1.6 Released (jquery.com)