none
How do I right align a cell in a JSGrid? RRS feed

  • Question

  • Can someone post an example of how to right align a cell in the JSGrid? I have been through the examples and got them working and I even found a reference in the documentation for CellStyles, but it is not documented how or where to use it. Please help.

    Carlos

    Friday, September 17, 2010 5:23 AM

Answers

  • Many thanks to Sivaraman and Ravi (Turns out T.R. did nothing) for the answers:  Grouping and configure columns is on its way...

    For aligning the text right on a cell we need to register a custom style like this in JavaScript

     

    jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign : 'right' }));

     

    here the style id is 'TextRightAlign' which can be assigned to GridField.DefaultCellStyleId property, that’s it.

     

    Steps to implement:

     

    1.      As per MSDN article http://msdn.microsoft.com/en-us/library/ee539027.aspx , in formatGridField method add gf. DefaultCellStyleId = 'TextRightAlign'

    2.      Register the style in JavaScript Init event like this

    <SharePoint:JSGrid ID="_grid" runat="server" />

    <script type="text/javascript">

        Type.registerNamespace("GridManager");

        GridManager = function () {

            this.Init = function (jsGridControl, initialData, props) {

                var dataSource = new SP.JsGrid.StaticDataSource(initialData);

                var jsGridParams = dataSource.InitJsGridParams();

         jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign : 'right' }));

                jsGridControl.Init(jsGridParams);

            }

        };

    </script>

     


    Blog | Facebook | Twitter | Posting is provided "AS IS" with no warranties, and confers no rights.
    Project Server TechCenter | Project Developer Center | Project Server Help | Project Product Page
    Wednesday, September 22, 2010 1:45 PM
    Owner

All replies

  • Hi Carlos,

    I noticed you have a few JSgrid postings without answers - I will endeavor to find answers for these today.

    Best regards,

    Brian.


    Blog | Facebook | Twitter | Posting is provided "AS IS" with no warranties, and confers no rights.
    Project Server TechCenter | Project Developer Center | Project Server Help | Project Product Page
    Tuesday, September 21, 2010 3:01 PM
    Owner
  • Many thanks to Sivaraman and Ravi (Turns out T.R. did nothing) for the answers:  Grouping and configure columns is on its way...

    For aligning the text right on a cell we need to register a custom style like this in JavaScript

     

    jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign : 'right' }));

     

    here the style id is 'TextRightAlign' which can be assigned to GridField.DefaultCellStyleId property, that’s it.

     

    Steps to implement:

     

    1.      As per MSDN article http://msdn.microsoft.com/en-us/library/ee539027.aspx , in formatGridField method add gf. DefaultCellStyleId = 'TextRightAlign'

    2.      Register the style in JavaScript Init event like this

    <SharePoint:JSGrid ID="_grid" runat="server" />

    <script type="text/javascript">

        Type.registerNamespace("GridManager");

        GridManager = function () {

            this.Init = function (jsGridControl, initialData, props) {

                var dataSource = new SP.JsGrid.StaticDataSource(initialData);

                var jsGridParams = dataSource.InitJsGridParams();

         jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign : 'right' }));

                jsGridControl.Init(jsGridParams);

            }

        };

    </script>

     


    Blog | Facebook | Twitter | Posting is provided "AS IS" with no warranties, and confers no rights.
    Project Server TechCenter | Project Developer Center | Project Server Help | Project Product Page
    Wednesday, September 22, 2010 1:45 PM
    Owner