Checkbox Alignment

8 posts, 1 answers
  1. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 16 Feb 2009 Link to this post

    Hi, this might be a silly question, but my checkbox is always middle aligned, even though text alignment is set to middleleft. Is there a way to fix this ?

    Thanks.
  2. Answer
    Jack
    Admin
    Jack avatar
    2333 posts

    Posted 17 Feb 2009 Link to this post

    Hi Derek,

    Thank you for contacting us.

    Changing the check box alignment is quite simple. You should process the CellFormatting event and set the Alignment property of the first child inside the Children hierarchy of the GridCheckBoxCellElement. Take a look at the sample below:

    void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e) 
        if (e.CellElement is GridCheckBoxCellElement) 
        { 
            e.CellElement.Children[0].Alignment = ContentAlignment.MiddleLeft; 
            e.CellElement.Children[0].Margin = new Padding(2); 
        } 
     

    I hope this helps. Should you have any further questions, feel free to ask.

    Sincerely yours,
    Jack
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 17 Feb 2009 Link to this post

    Thanks for that. Should it not be a simple property change? just a suggestion.
  4. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 17 Feb 2009 Link to this post

    Hello Derek,

    Yes, this is a good suggestion. We will consider adding such property in a future version of RadGridView.

    Please do not hesitate to contact us if you have any questions.

    Greetings,
    Jack
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. David
    David  avatar
    5 posts
    Member since:
    Nov 2010

    Posted 11 May 2017 Link to this post

    This is not working for me on the current version. Is there an updated way to do this? I want my checkboxes aligned Top Left.
  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3532 posts

    Posted 15 May 2017 Link to this post

    Hello David, 

    Thank you for writing.  

    Here is a sample code snippet demonstrating how to align the checkbox for the GridCheckBoxCellElement in the latest version:
    private void radGridView1_CellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
    {
        GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
        if (checkBoxCell != null)
        {
            RadCheckBoxEditor editor = checkBoxCell.Editor as RadCheckBoxEditor;
            RadCheckBoxEditorElement element = editor.EditorElement as RadCheckBoxEditorElement;
            element.Checkmark.Alignment = ContentAlignment.TopLeft;
        }
    }

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. David
    David  avatar
    5 posts
    Member since:
    Nov 2010

    Posted 15 May 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thank you! It worked. Do you know how to do the same for the expand/collapse column (+-) in a hierarchical gridview?
  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3532 posts

    Posted 16 May 2017 Link to this post

    Hello David, 

    Thank you for writing back. 

    By design, the expander item is always rendered in the middle of the cell. However, I have logged it in our feedback portal and I have added a vote for it on your behalf. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

    I have also updated your Telerik points.

    In order to align it to the left, you can use the following code snippet: 
    private void RadForm1_Load(object sender, EventArgs e)
    {
        this.categoriesTableAdapter.Fill(this.nwindDataSet.Categories);
        this.productsTableAdapter.Fill(this.nwindDataSet.Products);
     
     
        radGridView1.AutoGenerateHierarchy = true;
        radGridView1.DataSource = this.nwindDataSet;
        radGridView1.DataMember = "Categories";
     
        radGridView1.Rows[0].IsExpanded = !radGridView1.Rows[0].IsExpanded;
        radGridView1.Rows[0].IsExpanded = !radGridView1.Rows[0].IsExpanded;
    }
      
    Image expandedSign;
    Image collapsedSign;
    private void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
    {
        GridGroupExpanderCellElement expanderCell = e.CellElement as GridGroupExpanderCellElement;
        if (expanderCell != null)
        {
            if (expandedSign == null && expanderCell.Expander.SignImage != null && e.Row.IsExpanded == false)
            {
                expandedSign = expanderCell.Expander.SignImage.Clone() as Image;
     
            }
            if (collapsedSign == null && expanderCell.Expander.SignImage != null && e.Row.IsExpanded == true)
            {
                collapsedSign = expanderCell.Expander.SignImage.Clone() as Image;
     
            }
            if (expandedSign != null && collapsedSign != null)
            {
                expanderCell.Expander.SignImage = null;
            }
            if (e.Row.IsExpanded)
            {
                expanderCell.Expander.Image = collapsedSign;
            }
            else
            {
                expanderCell.Expander.Image = expandedSign;
            }
     
            expanderCell.Expander.ImageLayout = ImageLayout.None;
            expanderCell.Expander.DrawImage = true;
            expanderCell.Expander.ImageAlignment = ContentAlignment.TopLeft;
     
        }
    }
    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top