Archives / 2011 / March
  • SharePoint 2010 Sandboxed solution SPGridView

    Tags: SharePoint, .NET 3.5

    If you didn’t know, you probably will soon, the SPGridView is not available in Sandboxed solutions.

    To be honest there doesn’t seem to be a great deal of information out there about the whys and what nots, basically its not part of the Sandbox SharePoint API.

    Of course the error message from SharePoint is about as useful as punch in the face…

    An unexpected error has been encountered in this Web Part.  Error: A Web Part or Web Form Control on this Page cannot be displayed or imported. You don't have Add and Customize Pages permissions required to perform this action

    …that’s if you have debug=true set, if not the classic “This webpart cannot be added” !! Love that one!

    but will a little digging you should find something like this…

    [TypeLoadException: Could not load  type Microsoft.SharePoint.WebControls.SPGridView from assembly 'Microsoft.SharePoint, Version=14.900.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c'.]

    Depending on what you want to do with the SPGridView, this may not help at all.  But I’m looking to inherit the theme of the site and style it accordingly.

    After spending a bit of time with Chrome’s FireBug I was able to get the required CSS classes.  I created my own class inheriting from GridView (note the lack of a preceding SP!) and simply set the styles in there.

    Inherit from the standard GridView

    1. public class PSGridView : GridView

    Set the styles in the contructor…

    1. public PSGridView()
    2. {
    3.     this.CellPadding = 2;
    4.     this.CellSpacing = 0;
    5.     this.GridLines = GridLines.None;
    6.     this.CssClass = "ms-listviewtable";
    7.     this.Attributes.Add("style", "border-bottom-style: none; border-right-style: none; width: 100%; border-collapse: collapse; border-top-style: none; border-left-style: none;");
    9.     this.HeaderStyle.CssClass = "ms-viewheadertr";
    11.     this.RowStyle.CssClass = "ms-itmhover";
    12.     this.SelectedRowStyle.CssClass = "s4-itm-selected";
    13.     this.RowStyle.Height = new Unit(25);
    14. }

    Then as you cant override the Columns property setter, a custom method to add the column and set the style…

    1. public void AddColumn(DataControlField field)
    2. {
    3.     if (field == null) return;
    5.     field.ItemStyle.CssClass = "ms-vb2";
    6.     field.HeaderStyle.CssClass = "ms-vh2-nofilter ms-vh2-gridview";
    7.     this.Columns.Add(field);
    8. }

    And that should be enough to get the nicely styled SPGridView without the need for the SPGridView, but seriously….get the SPGridView in the SandBox!!!


  • 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.