Saturday, July 2, 2011

CRM 2011 - Adding scrollbars to a sub-grid

The sub-grid control in CRM 2011 is fantastic and it has replaced a lot of script I use to write. Unfortunately, as of Roll Up 2 you can only specify the number of record to display on a sub-grid. This in turn determines how many records are on each page of the sub-grid and how the sub-grid appears when it is rendered on a form. Well if your users are like mine, they do not want to page through the the sub-grid at 5,10, or X records a page. No, what they want is to have the paging set to 250 records per page and scroll through the records. While you can have a sub-grid display 250 records at a time, you can not constrain it to a specific height and force it to scroll.

Well to get around this issue you can use the script below which sets the RecordsPerPage and maxrowsbeforescroll parameters of the sub-grid and adjusts the height of #SUB-GRID ID#_divDataArea div element of the sub-grid. The RecordsPerPage and maxrowsbeforescroll parameters and passed to the web service that renders the sub-grid and controls how many reds care visible at a given time in a sub-grid when it is rendered. Please let me know if you find any issues of have a have a better method for addressing this particular issue.

//Warning: This code below is not supported by Microsoft

//Place this code at the start of your script
function setSubgridHeight(grdID, noRecordsDisplay, noRecordsPerPage, forceRefresh) {
/// <summary>
/// Causes sub-grid to scroll by setting the number of records to be displayed and 
/// </summary>
/// <param name="grdID" type="string">
/// ID of sub-grid *required
/// </param>
/// <param name="noRecordsDisplay" type="int">
/// Controls height of sub-grid and how many recors are displayed
/// Before applying scrolling
/// </param>
/// <param name="noRecordsPerPage" type="int">
/// Determines number of records to display per page.  If not provided
/// The value defined in the form editor will be used
/// </param>  
/// <returns type="nothing" />
  if (!IsNull(grdID)) {                
    var tbl = $("#" + grdID);

    //Adjust the sub-grid page size if desired, otherwise this is controlled by the form editor
    if (!IsNull(noRecordsPerPage)) {
      //Get reference to divGridProps element of desired grid.
      //Microsoft stores property infomrmaiton about the sub-grid within this element
      var divProps = $("#divGridProps", tbl);
      $("#recsPerPage", divProps).attr("value", noRecordsPerPage);  //Controls number of rows returned by data provider and sets the page size for the sub-grid
    }

    //Get reference to divGridParams element of desired grid.
    //Microsoft stores parameter infomrmaiton about the sub-grid within this element  
    var divParams = $("#divGridParams", tbl);  

    noRecordsDisplay = (IsNull(noRecordsDisplay) ? "5" : noRecordsDisplay);  //Default to 5 visible records at a time

    $("#RecordsPerPage", divParams).attr("value", noRecordsDisplay);  //Controls number of rows displayed in output table
    $("#maxrowsbeforescroll", divParams).attr("value", noRecordsDisplay);  //Force scroll bar to display if more records included than desired to display
  
    //Clear all of the empty TR that are added to fill the table height
    var tb = $("#" + grdID + "_d").parent().parent();
    $("tr", tb).filter(function(index) { return $(this).html() == ""; }).remove();

    //Now resize the data area of the grid
    $("#" + grdID + "_divDataArea").css("height", ((noRecordsDisplay - 1) * 25) + "px");
  
    //Refresh the grid if desired
    if(forceRefresh) { document.getElementById(grdID).control.refresh(); }
  } else {
    throw Error.argument("grdID", "grdID is null or undefined")
  }
} 

//To use you would write something like 
setSubgridHeight(#SUB-GRID ID#, 10, null, false);

No comments:

Post a Comment