GridView - design of parameter editor with subitems

[Marian]

Hello,

I would like to ask for help with designing parameter editor with subitems. I have editor of test items, each item has some parameters and tolerances (Min, Max). Standard tests have just main tolerances, but some tests have also subitems. More precisely, if test has subitems, only subitems have tolerances, main tolerances are not used. Columns for items and subitems are almost the same, items have parameters and subitems don't have any parameters, but there is just a name of subitem instead of test type of parent item. So first attempt of editor looks like this:

One small question to this solution, how can I show "+" only if there are some subitems?

But I am not satisfied with that design, subitems have own border, own column headers, it's little bit confusing and not very clear. I know it's standard way of master-detail views, but in this case, I would prefer design similar to self referencing hierarchy, because columns are almost the same, just some cells are empty and I have name of subitem name instead of test type.

I have made a second test with selfrefencing and changed the screenshot a little bit to show you what I am trying to achieve. Is it possible to have view similar to this?

I think I can do it with some modified data structures specialized for editor, I can use nullable properties for tolerances and parameters to hide certain cells, handle some events to have those empty cells readonly, maybe it would be tricky to show indented subitem name in test type combo box column, but I think this solution would be a little bit ugly. Is there any better way to do this?

I have attached my test project for tests.

[Nadya | Tech Support Engineer]

Hello, Marian,

Thank you for the provided project.

If I understand you correctly you would like to have a hierarchal RadGridView. I noticed you tested different approaches, and it seems that the self-reference grid approach is more suitable for you, as shown in the second picture. Am I right? It is possible to customize the look of the cells according to your needs. For example it is possible to show empty cells or make specific cells read only. You can use the CellFormatting event for this. More information is available here: Formatting Cells - WinForms GridView Control - Telerik UI for WinForms

I prepared a sample code snippet to demonstrate how you can make cells empty if the cell's value is 0:

private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement.ColumnIndex == 2)
    {
        if ((float)e.CellElement.Value == 0)
        {
            e.CellElement.DrawText = false;
        }
    }
}

 

Please let me know if you have any other questions.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Marian]

Hello,
yes, self reference grid approach is better for achieving the view I want (with the common columns for items and subitems). Of course, I know how to use CellFormatting event :) My question was, if there is some better way to do this. Because, in the second approach with self referencing, the view is similar to what I want to have, but the data structures bound to GridView are an ugly workaround just for editing purpose. The first approch uses just the class hierarchy as it's all stored in DB, but I don't like the output in GridView with borders and column headers for each item. I hope you know what I mean.

Btw, I would prefer to "hide" data on the object level by using nullable properties or by setting e.Value in CellFormatting event (I suppose it works in the same way as in standard DataGridView), if you "hide" it by e.CellElement.DrawText = false, what would be the output of Excel export, or copying to clipboard?

I think I can make it work in this way with some effort, even if I don't like the solution too much. I have few more question:
1. What's the best way to have those "hidden" cells in some rows readonly? For example cells in TestType, R, Fi and Comment column for subitem, or cells in Min, Max column for main items, if Test Type is set to TestSub? I think I should handle some event and cancel edit, probably something like CellBeginEdit in DataGridView?
2. How can I show indented subitem name in TestType column for subitem rows? Maybe I can set e.Value to subitem name with few spaces as prefix, but it's not so nice and those spaces would be in cell value also for export. First Nr column is automatically indented for subitems, so probably I can do it in some way also in other column.
3. How can I display the dropdown button in TestType combobox column as in standard WinForms DataGridView? Or, more specifically, how can I display it only for main items?
4. How can I automatically expand dropdownlist for combobox cell on click?
5. In the first approach with object hierarchy and child template, how can I show + only for rows with subitems?

Sorry, maybe some questions are basics and I should have tried it myselft first, but I am new to Telerik GridView and when I am writing this comment now, it's easiest to ask all questions.

[Nadya | Tech Support Engineer]

Hello, Marian,

Thank you for the additional information.

If I understand you correctly you prefer to use the first approach with sub item where object relational hierarchy mode is used rather than the self reference hierarchy. Note, you can customize the look of the hierarchy grid and remove the column headers of the child template if you want. This can be done by setting the ShowColumnHeaders property to false of desired child template. You can also show the expander item "+" only when the parent row has child rows, if it doesn't have child rows you can hide the expander. You can achieve this again with ViewCellFormattng event that gets triggered for all cells in the grid and checks for GridGroupExpanderCellElement which contains the GridExpanderItem. Please refer to the following code snippet: 

 private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
 {
     if (e.CellElement is GridGroupExpanderCellElement && e.CellElement.RowInfo.ChildRows.Count == 0)
     {
         GridGroupExpanderCellElement expanderCell = e.CellElement as GridGroupExpanderCellElement;

         GridExpanderItem expanderItem = expanderCell.Children[0] as GridExpanderItem;
         if (expanderItem != null)
             expanderItem.Visibility = ElementVisibility.Hidden;
         else
             expanderItem.Visibility = ElementVisibility.Visible;
     }
 }

Here is the result with these changes on your TelerikTestSub project:

It is up to you to consider which approach for hierarchy to use in your application. Now, to the other questions that you have asked:

1. When the grid enters edit mode, the CellBeginEdit event is called. You can cancel this event if you want, by setting e.Cancel = true.

2. It is not very clear what exactly you are trying to achieve here. Can you please specify what exactly you want to see into the TestType column? If you can demonstrate it with a picture would be helpful. 

3. It seems that you want to display a dropdown button in TestType combobox column to indicate there is a dropdownlist editor. To achieve this need to create a custom cell which contains the desired element that you want to show. You can refer to the following article about creating custom cells in grid: Search results - Telerik UI for WinForms 

4. In order to expand the dropdownlist for combobox on click, you should first set the BeginEditMode to BeginEditProgrammatically. Then handle the CellClick event of RadGridView and call the BeginEdit method. You should also call the ShowPopup method of the activated editor. More information about the editing behavior you can find here: Editors - WinForms GridView Control - Telerik UI for WinForms

this.radGridView1.BeginEditMode = RadGridViewBeginEditMode.BeginEditProgrammatically;

private void RadGridView1_CellClick(object sender, GridViewCellEventArgs e)
{
    GridComboBoxCellElement cell = sender as GridComboBoxCellElement;
	this.radGridView1.BeginEdit();
    RadDropDownListEditor editor = cell.Editor as RadDropDownListEditor;
    RadDropDownListEditorElement el =editor.EditorElement as RadDropDownListEditorElement;
	el.ShowPopup();
}

5. This question is already answered, and a code snippet provided in the beginning of this reply.

Offtopic, I would like to note that mixing different problems in the same thread makes it difficult to track the consequence of discussed topics. This is why it would be greatly appreciated in future if you can separate the problems that you have in different threads. 

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

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Marian]

Hello,
thanks for answers. Generally, I prefered first approach because of direct use of internal data structures. It looks little bit better with hidden column headers for child template, but still columns are not aligned with main columns and it doesn't look so good as self referencing approach. So I will use self referencing and and do some handling of additional data structures for editing subitems, but I think it's not too complicated, just not so straightforward.

Notes to my questions:

2. I want to do this, I've added red framing to original screenshot. Normally there is combobox with test types for main items (relpos, abspos, testsub), but I want to show indented subitem name for subitems, those names are not test types, just static names for subitems (diameter, height, angle). I think I can show names instead of test types by handling CellFormatting for subitems and replace test type from bound data with that name, the main question was how to do the indentation.

3. Ok, I think it wouldn't be needed. Combobox column in standard DataGridView in WinForms shows also that button, so I thought Telerik probably has also some option for visibility of this button. And maybe it's better like this, because I don't want to show that button for subitem, so I don't have to deal with how to hide it for subitems :)

4. Is it possible to call ShowPopup also without setting BeginEditMode to BeginEditProgrammatically? I have done something similar with standard DataGridView, so I would expect I can call BeginEdit and ShowPopup also without it.

Offtopic note, ok, I will keep that in mind for future. But original question was not a "problem", but a request for advice how to do this in the best way, and also those questions are related to that solution. But sorry, maybe I shouldn't ask so many questions in the same thread, and also I should try it myself first.

[Marian]

Hello,

I have managed it to work almost as I want, with some minor issues. I wanted to delete last comment with questions, but it seems it's not possible. I have also tried some other scenarios from my editor from previous project, which was based on standard DataGridView (there were no subitems, that's the reason why I am porting it to Telerik).

New notes and questions, I hope you don't mind that I haven't added new thread for each question.

1. Read only cell, handling CellBeginEdit mode works ok, but there is one minor issue, when I show context menu by clicking with right mouse button, GridView doesn't know that cell is readonly and shows standard context menu and "Clear Value" item works.

2. Now, question is only how to do the indentation in best way. I solved it with preceding spaces now, but I think it's not a nice solution. Also, is it possible to change default indentation size for first column? Maybe it can be little smaller.

4. Yes, it works also without changing BeginEditMode as I have thought. I have just one minor issue in case of repeated click if cell is still in edit mode and popup is not shown, I have to click twice. I tried to check IsInEditMode property, but this makes problem if cell is in edit mode and user clicks other cell, I don't know how to check if that particular clicked cell is in edit mode.

6. I tried to handle DataError, but it seems it doesn't work, when I write some text to some numeric field (R, Fi etc), application crashes with unhandled exception (Input string has invalid format). I tried to search in forum, but haven't found solution, is there something I miss?

7. Copy to clipboard and Excel export, GridView copies/exports raw data, not formatted. I have found something about ExcelCellFormatting event in forum, but it looks like it's related to older Excel export technology. Normally I would expect that it would export the same formatting as it's shown. And what about clipboard copy?

I have attached new test project.

[Nadya | Tech Support Engineer]

Hello, Marian,

I am referring to the questions from your latest post:

1. This is normal behavior since in this case the GridCellElement is not notified that is read only. You only cancel the editing operation and it prevents the cell from entering into edit mode. If you make the cell ReadOnly you should set this property to appropriate cells in the CellFormatting event. Thus, when showing the context menu over read only cell would display only the "Copy" option to copy text. 

2. If you wan to change sizes for specific columns you can set the columns Width property. You can access the first column, for example, through the RadGridView.Columns collection and accessing by name: radGridView1.Columns["colPosNr"].Width. Thus, you can assign any value that is suitable for you. In addition, there is TableElement.TreeLevelIndent property which determines the indent width among expander primitives. You can use it if you wan to reduce spaces for the first column. 

3. Here you can use the EndEditOnLostFocus property of RadDropDownListEditor to true in CellClick event, after calling the BeginEdit(). The EndEditOnLostFocus property indicates that the pop up should close when editor loses focus. 

 private void radGridView1_CellClick(object sender, GridViewCellEventArgs e)
 {

radGridView1.BeginEdit();
var editor = cell.Editor as RadDropDownListEditor;
if (editor == null)
    return;
editor.EndEditOnLostFocus = true;

}

Here is the desired behavior:

4. DataError event should be used if you perform some validations in grid. This event fires when an external data-parsing or validation operation throws an exception, or when an attempt to commit data to a data source fails. More information about data validation is available here: Data validation - WinForms GridView Control - Telerik UI for WinForms
I am not sure how you exactly you want to use it, but I cannot see that you have any validations in your project. If you need to protect your numeric columns from entering some text, you should first validate it using the CellValidating event. You can see an example in the referred article. 

5. RadGridView supports built-in Copy/Paste functionality, which allows you to store text in the Clipboard and then paste it in a different location. The copying functionality in RadGridView is controlled via the ClipboardCopyMode property. More information on this topic you can find here: Copy/Paste/Cut - RadGridView - Telerik UI for WinForms

If you want to export data to Excel you can refer to the GridViewSpreadExport: Export to Excel - WinForms GridView Control - Telerik UI for WinForms. GridViewSpreadExport utilizes our RadSpreadProcessing library to export the content of RadGridView to xlsx, csv, pdf and txt formats. It has ExportVisualSettings property that allows you to export the visual settings to the exported file. It also offers CellFormatting event used to format the cells to be exported.

I would highly encourage you to check our documentation articles first, they contain useful information and examples that might be helpful for you to achieve your requirements. 

I hope this helps. Let me know if I can assist you further.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Marian]

Ok, thanks. I think I have to study a lot to master GridView, I thought it will be easier and more similar to standard DataGridView. Sorry about asking basic questions.

Just comments to two points:

2. My question was about indentation of subitem names (Diameter, Height etc) in second column, now I solved it with few preceding spaces. But I have found a better solution now, I can set e.CellElement.Padding in CellFormatting.

4. Maybe DataError has other meaning in Telerik. I thought this situation (see video). In standard DataGridView, I can handle DataError event, show some message box and cancel edit for example.

[Nadya | Tech Support Engineer]

Hello, Marian,

RadGridView is similar control to the standard DataGridView, but it has differences as well in trying to enhance its capabilities. I will try to provide more information about the DataError event which in fact works in a similar way as in the standart grid. 

DataError event in RadGridView fires when an error on the DataSource side occurs, e.g. ConstraintException when loading dataset, or data exception that comes from the underlying data source. If the underlying data source have restrictions the grid will show such errors. DataError is useful in such cases. In the GridViewDataErrorEventArgs you have access to the row/column index and the exception. The ThrowException argument controls whether the exception will be thrown or not. 

If you want to perform validation before data is committed to the underlying data source, you can do this by handling CellValidating event which is raised by RadGridView when the current cell changes or when the cell loses input focus (when pressing Enter key). Canceling this event prevents the user from exiting the cell until a valid editor value is entered or the editing process is canceled. In your case, ъоу хаже сет AutoGenerateColumns = false. The default value of the property is true, indicating the columns will be generated from the data source. RadGridView automatically creates different column types according to the underlying data. The column types are listed here: GridViewDataColumn - WinForms GridView Control - Telerik UI for WinForms. Setting the AutoGenerateColumns property to false generates by default GridViewTextBoxColumn. In your case you can validate if the newly enteted value in the "R" column is of the correct numeric type (float) or consider using GridViewDecimalColumn that works with numeric values out of the box.

More useful information about generating columns is available here: Generating Columns - WinForms GridView Control - Telerik UI for WinForms

I hope this information is useful. If you have other questions, please let me know. 

Regards,
Nadya | Tech Support Engineer
Progress Telerik