Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
4032
How set EditCellStyle to RightAlign for some columns
posted

Hi all,

In columns containing numeric values I have set the cell and header right align. That looks fine. But if editing, the value keeps left. I can't find the right property to achieve this. I expect something to overwrite the editcellstyledefault for certain columns.

Thanks for any help

Markus

  • 7694
    posted

    Hello Markus,

    Unfortunately only CellStyle is supported for clumns and EditCellStyle is global for the entire band. So while it is still possible to have edit mode align to right, it will be active for the entire band. 

                <igtbl:UltraGridBand>
                        <EditCellStyle CustomRules="text-align: right;">
                        </EditCellStyle>
                        <Columns>
                            <igtbl:UltraGridColumn BaseColumnName="Address" IsBound="True" Key="Address">
                                <CellStyle CustomRules="text-align: right;">
                                </CellStyle>                            
                                <Header Caption="Address">
                                    <RowLayoutColumnInfo OriginX="1" />
                                </Header>
                            </igtbl:UltraGridColumn>
                        </Columns>
                    </igtbl:UltraGridBand> 

    This is still doable though, but a little bit tricky. It requires hooking the AfterEnterEditModeHandler client side event handler, checking if the cell currently edited is in the desired column and if so, changing the alignment of the edit element (Grid Client ID + "_tb") to right. Here is some sample code for that

    <DisplayLayout> 

            <ClientSideEvents AfterEnterEditModeHandler="enterEditMode"/>


    </DisplayLayout>
         
        

        
        <script type="text/javascript">
        
        function enterEditMode(gridName, cellID)
        {
            var cell = igtbl_getCellById(cellID);
            var grid = igtbl_getGridById(gridName);
            var columnKey = cell.Column.Key;               
            var editElement = document.getElementById(gridName + "_tb");        
            
            if (columnKey == "Address")
            {
                editElement.style.textAlign = "right";
            }
            else
            {
                editElement.style.textAlign = "left";   
            }                
        }

     </script>

    x An error occurred. Please try again or contact your administrator.
    x An error occurred. Please try again or contact your administrator.