Articles → LIGHT SWITCH 2011 → Show And Hide Grid Columns At Runtime In Lightswitch 2011

Show And Hide Grid Columns At Runtime In Lightswitch 2011






Software Requirement




  1. Visual studio 2010 is installed on your machine.
  2. Visual Studio 2010 service pack 1 is installed on your machine.
  3. Microsoft Visual Studio Light switch 2011 is installed on your machine.

Prerequisite Knowledge




  1. What is lightswitch?
  2. What are screens and entities in lightswitch?
  3. How to create an entity in lightswitch?
  4. How to create a screen in lightswitch?



Creation Of Employee Entity




  1. FirstName
  2. LastName
  3. Address
  4. Picture showing the Employee table in lightswitch designer

    Click to Enlarge





Creation Of An Editable Grid




Picture showing the Editable Grid Screen for the Employee table

Click to Enlarge




Adding Data In The Grid




Picture showing adding the data in the Editable Grid Screen

Click to Enlarge




Add Buttons For Show And Hide




  1. Double click on the screen EditableEmployeeGrid inside the Screen folder in Solution Explorer.
  2. On the designer screen click on the Screen Command Bar.
  3. On click of it Add button becomes visible.
  4. Click on the arrow sign on the Add button.
  5. A context menu appears.
  6. Click on New Button… option.
  7. Picture showing adding the new button in the editable grid screen

    Click to Enlarge




Picture showing the popup window for adding a new button

Click to Enlarge





Picture showing the designer screen after adding the button

Click to Enlarge



  1. Click (single click) on the button.
  2. Press F4.
  3. Property window will open on right hand side.
  4. Change the Display Name and save.
  5. Picture showing changing the display name of the button in the properties window

    Click to Enlarge



Add A Dll




  1. Click on the project and click on the arrow as shown in figure below.
  2. Picture showing view change dropdown in the solution explorer

    Click to Enlarge

  3. A context menu appears click on the file view
  4. Picture showing changing the view to File view for the project

    Click to Enlarge

  5. Once you click on file view the project view changes as shown in figure below
  6. Picture showing the project in the File View

    Click to Enlarge




Picture showing adding System.Windows.Control.Data as reference in the project

Click to Enlarge


Code For Showing The Grid Column




  1. Right click on the button
  2. Click Edit Execute Code.
  3. Picture showing opening the code screen by clicking on the Edit Execute Code menu

    Click to Enlarge



    private DataGrid _dataGrid;
    
    partial void Command_Show_Execute() {
      // Write your code here.
      this.FindControl("grid").ControlAvailable += ShowGrid;
    }
    
    private void ShowGrid(object sender, ControlAvailableEventArgs e) {
      if (e.Control is DataGrid) {
        _dataGrid = (DataGrid) e.Control;
        _dataGrid.Columns[2].Visibility = System.Windows.Visibility.Visible;
      }
    }





Code For Hiding The Grid Column




  1. Right click on the button
  2. Click Edit Execute Code.
  3. Add the following code in the execute method.
  4. partial void Command_Hide_Execute() {
      // Write your code here.
      this.FindControl("grid").ControlAvailable += HideGrid;
    }
    
    private void HideGrid(object sender, ControlAvailableEventArgs e) {
      if (e.Control is DataGrid) {
        _dataGrid = (DataGrid) e.Control;
        _dataGrid.Columns[2].Visibility = System.Windows.Visibility.Collapsed;
      }
    }



Output




Picture showing the output of Show and hide grid columns at runtime in lightswitch 2011

Click to Enlarge



Picture showing the output of Show and hide grid columns at runtime in lightswitch 2011

Click to Enlarge



Picture showing the output of Show and hide grid columns at runtime in lightswitch 2011

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, April 10, 2012

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250