Show only the current row

7 posts, 0 answers
  1. Gary
    Gary avatar
    24 posts
    Member since:
    Jul 2016

    Posted 17 Feb 2017 Link to this post

    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.

     

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

    Posted 20 Feb 2017 Link to this post

    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.
  3. Gary
    Gary avatar
    24 posts
    Member since:
    Jul 2016

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

    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

  4. Gary
    Gary avatar
    24 posts
    Member since:
    Jul 2016

    Posted 20 Feb 2017 Link to this post

    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;
     
     }
  5. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4081 posts

    Posted 21 Feb 2017 Link to this post

    Hello Gary, 

    Thank you for writing back. 

    In order to detect when the current row is changed, the RadGridView.CurrentRowChanged 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.
  6. Gary
    Gary avatar
    24 posts
    Member since:
    Jul 2016

    Posted 24 Feb 2017 Link to this post

    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.
  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4081 posts

    Posted 27 Feb 2017 Link to this post

    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.
Back to Top