Grid view with different display components each each row

3 posts, 0 answers
  1. Tomaso
    Tomaso avatar
    2 posts
    Member since:
    Sep 2013

    Posted 20 Sep 2017 Link to this post

    Hello,

    May somebody help me undestand this:

    Let be a grid with one column only and 3 rows.

     

    While I know that it is possible to have a customized editor ar row level, by means of the "EditorRequired", is it possible to have on the displaying side, not while editing, something like this:

    if (Row == 0) display the cell with a Checkbox

    if (Row == 1) display the cell with a TextBox

    if (Row == 2) display the cell with a CustomControl, like a progress bar for example?

     

    Thank you.

     

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3532 posts

    Posted 22 Sep 2017 Link to this post

    Hello, Tomaso, 

    Thank you for writing.  

    RadGridView offers an easy way for creating custom cells. Thus you can insert an element that needs to be displayed in the cell. A simple approach is demonstrated in the following help article: http://docs.telerik.com/devtools/winforms/gridview/cells/creating-custom-cells

    However, if you need to have different elements in the same column, it would be necessary to add all possible elements from the column to the custom cell. Thus, in the SetContentCore method, you can control which element will be visible or not considering the data row (RowInfo). I have prepared a sample code snippet for your reference which result is illustrated in the attached screenshot: 
    public RadForm1()
     {
         InitializeComponent(); new RadControlSpyForm().Show();
         CustomColumn customColumn = new CustomColumn("Custom column");
         this.radGridView1.Columns.Add(customColumn);
         customColumn.Width = 100;
         this.radGridView1.Rows.Add(ToggleState.Indeterminate);
         this.radGridView1.Rows.Add("sample text");
         this.radGridView1.Rows.Add(45);
     }
     
     public class CustomGridDataCellElement : GridDataCellElement
     {
         public CustomGridDataCellElement(GridViewColumn column, GridRowElement row)
             : base(column, row)
         {
         }
     
         StackLayoutElement stack = new StackLayoutElement();
         RadCheckBoxElement checkBox = new RadCheckBoxElement();
         RadTextBoxControlElement textBox = new RadTextBoxControlElement();
         RadProgressBarElement progressBar = new RadProgressBarElement();
     
         protected override void CreateChildElements()
         {
             base.CreateChildElements();
     
             this.Children.Add(stack);
             checkBox.IsThreeState = true;
             stack.Children.Add(checkBox);
             stack.Children.Add(textBox);
             stack.Children.Add(progressBar);
         }
     
         protected override void SetContentCore(object value)
         {
             base.SetContentCore(value);
             this.DrawText = false;
             if (this.RowIndex == 0)
             {
                 this.checkBox.Visibility = Telerik.WinControls.ElementVisibility.Visible;
                 this.checkBox.ToggleState = GetToggleState(this.RowInfo.Cells[this.ColumnIndex].Value.ToString());
                 this.textBox.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                 this.progressBar.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
             }
             else if (this.RowIndex == 1)
             {
                 this.checkBox.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                 this.textBox.Visibility = Telerik.WinControls.ElementVisibility.Visible;
                 this.textBox.Text = this.RowInfo.Cells[this.ColumnIndex].Value.ToString();
                 this.progressBar.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
             }
             else
             {
                 this.checkBox.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                 this.textBox.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                 this.progressBar.Visibility = Telerik.WinControls.ElementVisibility.Visible;
                 this.progressBar.Value1 = int.Parse(this.RowInfo.Cells[this.ColumnIndex].Value.ToString());
             }
         }
     
         private ToggleState GetToggleState(string cellValue)
         {
             ToggleState toggleState = ToggleState.Off;
             if (cellValue == "On")
             {
                 toggleState = ToggleState.On;
             }
             else if (cellValue == "Indeterminate")
             {
                 toggleState = ToggleState.Indeterminate;
     
             }
             return toggleState;
         }
     
         protected override Type ThemeEffectiveType
         {
             get
             {
                 return typeof(GridDataCellElement);
             }
         }
     
         public override bool IsCompatible(GridViewColumn data, object context)
         {
             return data is CustomColumn && context is GridDataRowElement;
         }
     }
     
     public class CustomColumn : GridViewDataColumn
     {
         public CustomColumn(string fieldName)
             : base(fieldName)
         {
         }
     
         public override Type GetCellType(GridViewRowInfo row)
         {
             if (row is GridViewDataRowInfo)
             {
                 return typeof(CustomGridDataCellElement);
             }
             return base.GetCellType(row);
         }
     }

    Have in mind that using controls in grid cells may slow down the scrolling and will cause visual glitches. It is recommended to use only elements. A better option would be using custom editors. Thus, you can construct the desired editor and activate it for the respective cell. Additional information for custom editors can be found here: http://docs.telerik.com/devtools/winforms/gridview/editors/using-custom-editors

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

    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.
  3. Tomaso
    Tomaso avatar
    2 posts
    Member since:
    Sep 2013

    Posted 22 Sep 2017 Link to this post

    Thank you very much for the kind help.
Back to Top