This is a migrated thread and some comments may be shown as answers.

Setting Text for Custom Checkbox column

17 Answers 157 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Bao
Top achievements
Rank 1
Bao asked on 24 Jul 2017, 07:23 PM

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.

 

 

 

17 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 25 Jul 2017, 10:05 AM
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.
0
Bao
Top achievements
Rank 1
answered on 25 Jul 2017, 01:22 PM
Thank you very much.
0
Bao
Top achievements
Rank 1
answered on 30 Aug 2017, 05:15 PM

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

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 Sep 2017, 08:49 AM
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.
0
Bao
Top achievements
Rank 1
answered on 04 Sep 2017, 03:53 PM

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.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 05 Sep 2017, 05:52 AM
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.
0
Bao
Top achievements
Rank 1
answered on 05 Sep 2017, 07:51 PM

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

0
Bao
Top achievements
Rank 1
answered on 05 Sep 2017, 07:53 PM

And my data is like :

Id

Name 

ParentId

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 07 Sep 2017, 09:46 AM
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.
0
Bao
Top achievements
Rank 1
answered on 08 Sep 2017, 09:17 PM
Thank for your solution Dess. It need to be improved but anyway thank you so much.
0
Bao
Top achievements
Rank 1
answered on 08 Sep 2017, 10:27 PM

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 ?

 

0
Bao
Top achievements
Rank 1
answered on 09 Sep 2017, 04:39 AM
It does not update at the running time : https://www.screencast.com/t/aNz1q88CDpvN
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 12 Sep 2017, 01:59 PM
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.
0
Bao
Top achievements
Rank 1
answered on 12 Sep 2017, 06:53 PM
Thank for your help, Dess. ^^
0
Bao
Top achievements
Rank 1
answered on 12 Sep 2017, 07:28 PM
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.
0
Bao
Top achievements
Rank 1
answered on 12 Sep 2017, 07:31 PM
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 ? 
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 13 Sep 2017, 10:44 AM
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.
Tags
GridView
Asked by
Bao
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Bao
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or