(C1FlexGrid) How to make a custom control partially visible when scrolling

Posted by: iamyoukou on 26 August 2021, 9:25 pm EST

    • Post Options:
    • Link

    Posted 26 August 2021, 9:25 pm EST

    Hi, everyone!

    I have a C1FlexGrid, and I draw a custom DateTimePicker in a column for each row.

    What I want is that when scrolling, if a row is partially visible, the DateTimePicker in that row is also partially visible.

    But the problem is, as you can see in the attached picture, the DateTimePicker in the top row covers the one in the second row.

    I wonder if there is a way to solve that problem.

    Here is the rendering code of those DateTimePickers.

    I add them to myDataGrid (C1FlexGrid)'s Controls property, and set their bounds in the Paint event of the flex grid.

    
            private void myDataGrid_Paint(object sender, PaintEventArgs e)
            {
                foreach (var dateTimePicker in this.dateTimePickers)
                {
                    // Get the Tag of a DateTimePicker
                    TagInfo tagInfo = (TagInfo)dateTimePicker.Tag;
    
                    // Current row of the flex grid
                    int row = tagInfo.row;
                    int col = tagInfo.col;
    
                    // Bound of the cell in which I draw the DateTimePicker
                    Rectangle rc = this.myDataGrid.GetCellRect(row, col, false);
    
                    // Situations that undraw the DateTimePicker
                    if (rc.Width <= 0 || rc.Height <= 0 || !rc.IntersectsWith(this.myDataGrid.ClientRectangle))
                    {
                        dateTimePicker.Visible = false;
                        continue;
                    }
    
                    // Set the bound of a DateTimePicker
                    dateTimePicker.Bounds = rc;
                    dateTimePicker.Visible = true;
                }
            }
    
    

    The full source code is here:

    code.zip

  • Posted 27 August 2021, 1:19 am EST

    Hi,

    Is there any specific reason for setting the editor this way? As You can use the in-built Date Editor to avoid this issue.

    Documentation: https://www.grapecity.com/componentone/docs/win/online-flexgrid/date.html

    The issue occurs as the height of the DateTimePicker can not be changed according to its row. You can avoid this issue by either setting the ScrollOption to ScrollByRowColumn or you can use the SetChildIndex method of ControlCollection to add the DateTime pickers over one another so that when you scroll, the date picker of the top row gets behind the date time picker of the second row.

    Please refer to the sample attached.

    Regards

    Avnish

    FlexGridDateTimePicker.zip

  • Posted 27 August 2021, 2:24 am EST

    Hi, @avnish.kumar

    Thank you very much for your reply!

    The reason we used a custom DateTimePicker instead of the built-in one was the appearance (see the attached picture).

    1. We have already used that DateTimePicker in other Winforms (but never used in a C1FlexGrid), so we just wanted to unify the appearance.

    2. I have tried your code, it’s very nice! Thanks a lot!

      I wonder if there is a way to always show the checkbox of the DateTime columns, even when they are not clicked.

  • Posted 27 August 2021, 3:32 am EST

    Hi,

    We apologize for the inconvenience but the checkbox on FlexGrid’s inbuilt date editor can not be shown always on the cell.

    Regards

    Avnish

  • Posted 27 August 2021, 3:47 am EST

    Hi, @avnish.kumar

    I see. Thanks for your reply and everything!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels