Contents tagged with MVC

  • jQuery Datatable in MVC … extended.

    Tags: jQuery, MVC, .NET 4.0,

    There are a million plugins for jQuery and when a web forms developer like myself works in MVC making use of them is par-for-the-course!  MVC is the way now, web forms are but a memory!!

    Grids / tables are my focus at the moment.  I don’t want to get in to righting reems of css and html, but it’s not acceptable to simply dump a table on the screen, functionality like sorting, paging, fixed header and perhaps filtering are expected behaviour.  What isn’t always required though is the massive functionality like editing etc you get with many grid plugins out there.

    You potentially spend a long time getting everything hooked together when you just don’t need it.

    That is where the jQuery DataTable plugin comes in.  It doesn’t have editing “out of the box” (you can add other plugins as you require to achieve such functionality).

    What it does though is very nicely format a table (and integrate with jQuery UI) without needing to hook up and Async actions etc. 

    Take a look here…

    I did in the first instance start looking at the Telerik MVC grid control – I’m a fan of Telerik controls and if you are developing an in-house of open source app you get the MVC stuff for free…nice!  Their grid however is far more than I require. 

    Note: Using Telerik MVC controls with your own jQuery and jQuery UI does come with some hurdles, mainly to do with the order in which all your jQuery is executing – I won’t cover that here though – mainly because I don’t have a clear answer on the best way to solve it!

    One nice thing about the dataTable above is how easy it is to extend and there are some nifty examples on the site already…

    I however have a requirement that wasn’t on the site … I need a grid at the bottom of the page that will size automatically to the bottom of the page and be scrollable if required within its own space i.e. everything above the grid didn’t scroll as well.  Now a CSS master may have a great solution to this … I’m not that master and so didn’t! The content above the grid can vary so any kind of fixed positioning is out.

    So I wrote a little extension for the DataTable, hooked that up to the document.ready event and window.resize event.

    Initialising my dataTable ( s )…

    1. $(document).ready(function () {
    2.     var dTable = $(".tdata").dataTable({
    3.         "bPaginate": false,
    4.         "bLengthChange": false,
    5.         "bFilter": true,
    6.         "bSort": true,
    7.         "bInfo": false,
    8.         "bAutoWidth": true,
    9.         "sScrollY": "400px"
    10.     });

    My extension to the API to give me the resizing….

    1. // **********************************************************************
    2. // jQuery dataTable API extension to resize grid and adjust column sizes
    3. //
    4. $.fn.dataTableExt.oApi.fnSetHeightToBottom = function (oSettings) {
    5.     var id =;
    6.     var dt = $("#" + id);
    7.     var top = dt.position().top;
    8.     var winHeight = $(document).height();
    9.     var remain = (winHeight - top) - 83;
    10.     dt.parent().attr("style", "overflow-x: auto; overflow-y: auto; height: " + remain + "px;");
    11.     this.fnAdjustColumnSizing();
    12. }

    This is very much is debug mode, so pretty verbose at the moment – I’ll tidy that up later!

    You can see the last call is a call to an existing method, as the columns are fixed and that normally involves so CSS voodoo, a call to adjust those sizes is required.

    Just above is the style that the dataTable gives the grid wrapper div, I got that from some firebug action and stick in my new height.

    The –83 is to give me the space at the bottom i require for fixed footer!

    Finally I hook that up to the load and window resize.  I’m actually using jQuery UI tabs as well, so I’ve got that in the open event of the tabs.

    1. $(document).ready(function () {
    2.         var oTable;
    3.         $("#tabs").tabs({
    4.             "show": function (event, ui) {
    5.                 oTable = $('div.dataTables_scrollBody>table.tdata', ui.panel).dataTable();
    6.                 if (oTable.length > 0) {
    7.                     oTable.fnSetHeightToBottom();
    8.                 }
    9.             }
    10.         });
    11.         $(window).bind("resize", function () {
    12.             oTable.fnSetHeightToBottom();
    13.         });
    14.     });

    And that all there is too it.  Testament to the wonders of jQuery and the immense community surrounding it – to which I am extremely grateful.

    I’ve also hooked up some custom column filtering on the grid – pretty normal stuff though – you can get what you need for that from their website.  I do hide the out of the box filter input as I wanted column specific, you need filtering turned on when initialising to get it to work and that input come with it!  Tip: fnFilter is the method you want.  With column index as a param – I used data tags to simply that one.


  • Using Telerik MVC with your own custom jQuery and or other plug-ins

    Tags:, .NET, .NET 4.0, MVC

    If you are using MVC it might be worth checking out the telerik controls (, they are free if you are doing an internal or “not for profit” application.

    If however you do choose to use them, you could come up against a little problem I had.  Using the telerik controls with your own custom jQuery.  In my case I was using the jQuery UI dialog.

    It kept throwing an error where I was setting my div to a dialog.

    Code Snippet
    1. $("#textdialog").dialog({

    The problem is when you use the telerik mvc stuff you need to call ScriptRegistrar

    Code Snippet
    1. @Html.Telerik().ScriptRegistrar()

    in order to setup the javascript for the controls.

    By default this adds a reference to jQuery and if you have already added a reference to jQuery because you are using it elsewhere, this causes a problem.

    I found the solution here

    And it was to change the above ScriptRegistrar call to this…

    Code Snippet
    1. @Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.Combined(true).Compress(true));

    If you come across this one on stackoverflow it wont work – in my case the HtmlEditor would render no problem, but was unusable.  Which is the same as someone else found when using the tab control – they went to the bother of re-writing the ScriptRegistrar.  Not for me that one!!


  • Gotcha | Installing .net 4.0 and IIS 6

    Tags: MVC, .NET 3.5

    Just a quick one, seems pretty weird to me.

    I installed .net 4.0 on an old IIS6 box, ready to deploy a mvc app targeting .net 4.0.  I thought, which to me seems logical, that I install .net 4.0, setup a new web site, new app pool, set the web site to 4.0 (other configuration also needed to run MVC on IIS6 here and here) and it would just work.

    Errr… No.  The page cannot be displayed!  Nothing to do with MVC.

    Apparently just because you have installed .net 4 and the option is available in IIS, it’s not enabled.  I’m not going to repeat anything here…take a look at this post – clear, easy steps on exactly what you need to do and how to check if this is the problem.


  • MVC | MvcBuildViews | MachineToApplication Error

    Tags: MVC, .NET,, Visual Studio

    You may come up against this little error when working on a MVC application, I specifically find things like this crop up when you are upgrading from previous version e.g. VS 2008 to 2010 and the like.

    They are a complete pain in the bum quite frankly, you can spend hours googling around, trying this trying that, posting questions here and there etc etc…so I’m adding to the this and that which you will of course try, because it’s the sort of error you don’t care about…it’s just getting in the way of your day!

    There would seem to be some kind of issue with MvcBuildViews and this error

    Anyway, what worked for me was to delete the debug directory from within the obj directory and it all worked…

    Hopefully this will help someone else!! Or at the very least be something else to try on the way to solving another time wasting issue!!

    UPDATE:  May have been a bit hasty in my excitement of solving this…its really only part solved as I find i have to delete the debug directory every time I want to publish/package!


  • 1