Siebel Open UI Vertical Scrollbar Continued..

Here is the final version of the PR to move the List Applet horizontal play bar to vertical scrollbar. The PR is tested for basic functionalities like query, resize, save record etc. I have fixed another issue where the list applet header getting aligned with list columns in the script.

if( typeof( SiebelAppFacade.vscrollpr ) === "undefined" ){

    SiebelJS.Namespace( "SiebelAppFacade.vscrollpr" );

    //Module with its dependencies

    define("siebel/custom/vscrollpr", ["siebel/jqgridrenderer"], function () {

        SiebelAppFacade.vscrollpr = ( function(){

            function vscrollpr( pm ){

                SiebelAppFacade.vscrollpr.superclass.constructor.call( this, pm );    

            }

            SiebelJS.Extend( vscrollpr, SiebelAppFacade.JQGridRenderer );

   vscrollpr.prototype.Init = function () {

            SiebelAppFacade.vscrollpr.superclass.Init.call(this);    

            };

   vscrollpr.prototype.ShowUI = function(){

                SiebelAppFacade.vscrollpr.superclass.ShowUI.call( this );

     var currbwidth = $(".ui-jqgrid-bdiv").width(); //get current body width

     var btabwidth = currbwidth - 60; // provide 60px space for scroll bar

var currhwidth = $(".ui-state-default.ui-jqgrid-hdiv").width(); // get current header width

var htabwidth = currhwidth - 60; // provide 60px space for scroll bar

$(".ui-state-default.ui-jqgrid-hdiv").css("width",htabwidth); // set header width

$(".ui-state-default.ui-jqgrid-hdiv").css("float","left"); // float it to left

     $(".ui-jqgrid-bdiv").css("width",btabwidth); // set body width

     $(".ui-jqgrid-bdiv").css("float","left");   // float it to left

     var html = $(".ui-pager-control").html(); // get the play bar html

     $('.ui-pager-control').appendTo('.ui-jqgrid-view'); // remove the playbar and append it to grid 

     $(".ui-pager-control").css("float","left"); // float it to left

     $(".ui-pager-control").css("width","60"); // set playbar width to 60 px;

     $(".ui-pager-control").css("-ms-transform","rotate(90deg)"); // rotate 90 degrees in IE

     $(".ui-pager-control").css("-webkit-transform","rotate(90deg)"); // rotate 90 deg in chrome

     $("span.ui-separator").parent().css("width","45"); // set separator width to 45px. this should be calculated based on height of applet

            };       

  vscrollpr.prototype.resize = function( )

          { // recalculate the widths after resize

 SiebelAppFacade.vscrollpr.superclass.resize.call( this );  

var currbwidth = $(".ui-jqgrid-bdiv").width();

     var btabwidth = currbwidth - 60;

var currhwidth = $(".ui-state-default.ui-jqgrid-hdiv").width();

var htabwidth = currhwidth - 60;

$(".ui-state-default.ui-jqgrid-hdiv").css("width",htabwidth);

$(".ui-state-default.ui-jqgrid-hdiv").css("float","left");

     $(".ui-jqgrid-bdiv").css("width",btabwidth);

     $(".ui-jqgrid-bdiv").css("float","left");   

     var html = $(".ui-pager-control").html();

     $('.ui-pager-control').appendTo('.ui-jqgrid-view');     

     $(".ui-pager-control").css("float","left");

     $(".ui-pager-control").css("width","60");

     $(".ui-pager-control").css("-ms-transform","rotate(90deg)");

     $(".ui-pager-control").css("-webkit-transform","rotate(90deg)");

     $("span.ui-separator").parent().css("width","45");

 }

return vscrollpr;

    } ());

        return "SiebelAppFacade.vscrollpr";

    });

}

Note: The code needs full testing before implementing. Also, I have hardcoded the value in below line. You need to do the calculation in this case for list applets with different heights.

$("span.ui-separator").parent().css("width","45");

Disclaimer: This is not production ready code. Do not use this code without proper testing. The JQGrid model provides this scroll bars by default as horizontal playbars. So, this is vanilla and it is not a good idea to modify it. 

Part -1