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

Show only the current row

6 Answers 125 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Jay asked on 17 Feb 2017, 07:59 PM

In this application we are running around the warehouse and picking items for an order.  The user gets to select any row in the gridview of items either by clicking that row or entering a search field and the program will find a row from that..

What I want to do is this:

1. When a row is selected, show only that row and show a panel where the user takes an action.

2. When the user completes the action for that row, restore the gridview to showing all of the rows and make that panel disappear.

How I think of this is:

  • A split container with two panels (and 0 for the splitter width).  One panel contains the gridview.  The other panel contains the controls for the user to execute the action for the selected gridview row.
  • When a row is selected, that panel and gridview will decrease their size to contain only the header row and the selected row.  The other panel will expand into the vacated space in the split container.  Reverse this when the action for that row is completed.  (That other panel won't be visible.)
  • When the row is selected, no scrolling, no touching, nothing.  It's there to show you what you have selected to work on.  That's all.

I'm doing fine with collapsing the panels in the split container.  I'd like help with

  1. Either setting the current row as the first visible row or making the current row the only visible row (other suggestions are welcome).
  2. Hiding the scroll bar and other things to keep the user out of the gridview when a row has been selected.
  3. Calculating the height to set the gridview so that it is tall enough to show the header and one row (I think I've been there before).

Thank you.

 

6 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 Feb 2017, 07:56 AM
Hello Gary,

Thank you for writing.  

The provided detailed explanation is greatly appreciated. In order to show only the selected row in RadGridView, you can iterate the Rows collection and set the GridViewRowInfo.IsVisible property to false for the non-selected cells. Thus, only one row will be shown in the grid and no scrollbars will be displayed. After you have done all the tasks with the selected row, you can restore all rows to be visible. Here is a sample code snippet: 
//hide all rows but the selected one
private void radButton1_Click(object sender, EventArgs e)
{
    foreach (GridViewRowInfo row in this.radGridView1.Rows)
    {
        if (row.IsSelected)
        {
            row.IsVisible = true;
        }
        else
        {
            row.IsVisible = false;
        }
    }
}
 
//restore the rows to be visible
private void radButton2_Click(object sender, EventArgs e)
{
    this.radGridView1.CurrentRow = null;
    foreach (GridViewRowInfo row in this.radGridView1.Rows)
    {
        row.IsVisible = true;
    }
}

As to the grid's height, you can use the following code snippet: 
int height = this.radGridView1.TableElement.GroupHeaderHeight + this.radGridView1.TableElement.TableHeaderHeight +
    this.radGridView1.TableElement.RowHeight+ this.radGridView1.MasterView.TableAddNewRow.MinHeight;

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

Regards,
Dess
Telerik by Progress
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
Jay
Top achievements
Rank 1
answered on 20 Feb 2017, 04:41 PM

Thank you, Dess.

Those snippets work well.  I have this detail to resolve:

I have two options available for selecting a row:

  1. The user can enter (scan) an item number and the program will search the DataTable for that item and select the gridview row if the item is found.  That works fine.
  2. The user can click on a row in the gridview.  I am handling this with CurrentRowChanged but it's not working for me.  There is no selected row when that event fires.  Should I switch that to a Click event or something else?

Thank you,

Gary

0
Jay
Top achievements
Rank 1
answered on 21 Feb 2017, 12:29 AM

This seems to work fine for setting IsSelected = true for the row I click.

private void gvInstructions_CurrentRowChanged(object sender, CurrentRowChangedEventArgs e)
 {
     // Comment out code for reading purposes...
 
                 e.CurrentRow.IsSelected = true;
 
 }
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Feb 2017, 07:39 AM
Hello Gary, 

Thank you for writing back. 

In order to detect when the current row is changed, the RadGridView. event is the appropriate event. However, in this event, the current row is still not selected. That is why the IsSelected property of the row returns false. You can handle the SelectionChanged event which is fired after the CurrentRowChanged event when the selected row is changed. 

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

Regards,
Dess
Telerik by Progress
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
Jay
Top achievements
Rank 1
answered on 24 Feb 2017, 10:13 PM
Back to the grid's height, how do I test for the HScrollBar being visible and get its height?  If it's visible, I'll add the height to the gridview, too.
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Feb 2017, 03:05 PM
Hello Gary, 

Thank you for writing back. 

Here is demonstrated a sample code how to detect whether the horizontal scrollbar is disabled and how to get its size:
private void radButton1_Click(object sender, EventArgs e)
{
    if (this.radGridView1.TableElement.HScrollBar.Visibility == Telerik.WinControls.ElementVisibility.Visible)
    {
        Console.WriteLine(this.radGridView1.TableElement.HScrollBar.Size);
    }
}

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

Regards,
Dess
Telerik by Progress
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
Jay
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Jay
Top achievements
Rank 1
Share this question
or