Setting Text for Custom Checkbox column

18 posts, 1 answers
  1. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 24 Jul 2017 Link to this post

    Hi ,

    I am creating the custom checkbox column like this:

    public class CustomCheckbox: GridDataCellElement
    {

          private RadCheckBoxElement ckbCustom;

          protected override void CreateChildElements()
            {
                base.CreateChildElements();
                ckbCustom = new RadCheckBoxElement();
                ckbCustom.TextAlignment = System.Drawing.ContentAlignment.MiddleRight;
                ckbCustom.Size = new Size(20, 20);
                this.Children.Add(ckbCustom);            
            }}

     public class CheckboxColumn: GridViewDataColumn
        {
            public CheckboxColumn(string fieldName)
                : base(fieldName)
            {

            }

            public override Type GetCellType(GridViewRowInfo row)
            {
                if (row is GridViewDataRowInfo)
                {
                    return typeof(CustomCheckbox);
                }
                return base.GetCellType(row);
            }        
        }

    In gridview , i add 2 checkbox columns:

                    CheckboxColumn checkboxcol1= new CheckboxColumn("High");
                    checkboxcol1.HeaderText = "High";
                    checkboxcol1.Width = 100;

                    checkboxcol1.checkboxcontrol.text =  "Text 1 " // I want to config here
                    // Add Labor Time Custom column
                    CheckboxColumn checkboxcol2 = new CheckboxColumn("Custom");
                    checkboxcol2.HeaderText = "Custom";

                    checkboxcol2.checkboxcontrol.text =  "Text 2 " // I want to config here
                    checkboxcol2.Width = 150;

                    this.gvUser.Columns.Add(checkboxcol1);
                    this.gvUser.Columns.Add(checkboxcol2);

    How can i config text for checkbox at the time i add in the gridcolumn. Now I have to loop all of the grid rows to add text for checkbox.

     

    Thanks.

     

     

     

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    2831 posts

    Posted 25 Jul 2017 Link to this post

    Hi Bao,

    Thank you for writing.

    I have attached a small sample that shows how you can achieve this. 

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Progress Telerik
    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.
  3. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 25 Jul 2017 in reply to Dimitar Link to this post

    Thank you very much.
  4. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 30 Aug 2017 in reply to Dimitar Link to this post

    Hi Dimitar, when i work with regular gridview . It works well, but when i work with hierarchical gridview. It is wrong.

    https://www.screencast.com/t/uEVYzRJ3xB

     

  5. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 01 Sep 2017 Link to this post

    Hello Bao, 

    Thank you for writing back. 

    Due to the UI virtualization in RadGridView, cell elements are created only for currently visible cells and are being reused during operations like scrolling, filtering, grouping and so on. The illustrated problem can be reproduced in a flat grid when you shrink the grid to enable the scrollbars and try scrolling the rows. I have modified the sample project in a way to cover this scenario and keep the checked state only for the correct cells.

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    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.
  6. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

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

    Hi Dess,

    Thank for your help. But the problem happens when working with hierarchical gridview. the flat grid works fine. Your sample is normal gridview. I am not sure it works with hierarchical gridview.

  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 05 Sep 2017 Link to this post

    Hello Bao, 

    Thank you for writing back. 

    I have modified the sample project in a way to include hierarchy. However, it seems to work as expected on my end. Please refer to the attached gif file illustrating the behavior on my end. Am I missing something? Could you please specify the exact steps how to reproduce the problem?

    Alternatively, feel free to submit a support ticket where you can provide a sample project demonstrating the issue you are facing. Thus, our support staff will gladly assist you.

    I hope this information helps. 

     Regards,
    Dess
    Progress Telerik
    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.
  8. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

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

    Thank Dess for your help. I see you are using gridview template , can we use just the custom column as my image. When user click on specific row . It will display the custom column .

    https://www.screencast.com/t/R6CJ5BJLu

  9. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 05 Sep 2017 in reply to Bao Link to this post

    And my data is like :

    Id

    Name 

    ParentId

    So it maybe has more than 2 parent-child level. 

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 07 Sep 2017 Link to this post

    Hello Bao, 

    Thank you for writing back. 

    When you use self-reference grid, have in mind that the grid uses one common template for all hierarchy levels. The columns are the same. According to the provided screenshot, I suppose that you try to show the checkboxes only for the inner levels. For this purpose, it is suitable to use the SetContentCore method where you can control whether the checkbox is visible considering the hierarchy level. I have attached the modified sample project.

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    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.
  11. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

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

    Thank for your solution Dess. It need to be improved but anyway thank you so much.
  12. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

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

    Hi Dess, when i change the condition in SetContentCore:

      if (this.RowInfo.IsSelected)
                {
                    this.ckbCustom.Visibility = Telerik.WinControls.ElementVisibility.Visible;
                }

    But at the time i select row , it does not work, It only works when i select another row, and the previous selected row work.

    https://www.screencast.com/t/JKSAZgc8

    how can i make it work at the time i select the row ?

     

  13. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 08 Sep 2017 in reply to Bao Link to this post

    It does not update at the running time : https://www.screencast.com/t/aNz1q88CDpvN
  14. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 12 Sep 2017 Link to this post

    Hello Bao, 

    Thank you for writing back. 

    When the selection is changed, it is necessary to refresh the MasterTemplate in order force the SetContentCore method to be called and update the visibility according to o the current selection. Here is the updated code snippet: 
    private void RadGridView1_SelectionChanged(object sender, EventArgs e)
    {
        this.radGridView1.MasterTemplate.Refresh();
    }

    protected override void SetContentCore(object value)
    {
        base.SetContentCore(value);
        if (this.GridViewElement.GridControl.SelectedRows.Contains(this.RowInfo))
        {
            this.ckbCustom.Visibility = Telerik.WinControls.ElementVisibility.Visible;
        }
        else
        {
            this.ckbCustom.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        }
     
        var col = this.ColumnInfo as CheckboxColumn;
        this.ckbCustom.Text = col.CheckboxText;
     
        ckbCustom.ToggleStateChanged -= CkbCustom_ToggleStateChanged;
        this.ckbCustom.ToggleState = ToggleState.Off;
        if (this.RowInfo.Cells[this.ColumnInfo.Name].Tag != null)
        {
            this.ckbCustom.ToggleState = (ToggleState)this.RowInfo.Cells[this.ColumnInfo.Name].Tag;
        }
        ckbCustom.ToggleStateChanged += CkbCustom_ToggleStateChanged;
    }

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    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.
  15. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

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

    Thank for your help, Dess. ^^
  16. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 12 Sep 2017 Link to this post

    So i can not access to the cell when the row is collapsed so how can i save the value of the collapsed row when i click button Save. I try and see it returns null when row is collapsed.
  17. Bao
    Bao avatar
    54 posts
    Member since:
    Jan 2015

    Posted 12 Sep 2017 in reply to Bao Link to this post

    Now at the time i change the checkbox state i will save it into temporary list and when i click Save i will work with temp list and no loop through the gridview. Is it the possible for this situation ? 
  18. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 13 Sep 2017 Link to this post

    Hello Bao, 

    Thank you for writing back. 

    When you toggle the checkbox, the value is stored in the Tag property of the respective GridViewRowInfo. Thus, when you activate the virtualization by scrolling, for example, the toggle state is kept correctly. You can use it when saving the data.

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    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