Modal Window of Editable Grid Screen in LightSwitch 2011

Visual Studio LightSwitch is a Microsoft tool used to build business applications. In this article I'm going to explain working with a modal window in an Editable Grid Screen. I have already discussed Editable Grid Screens in the last article.

A modal window is a small window which represents data in the modern look.

Step 1 : First of all open Visual Studio LightSwitch->Click on create new table.

Step 2 : Create a new table such as Student.

Step 3 : Now we will add a screen. Right-click on screens->Add screen.

Step 4 : Select Editable Grid Screen->Select screen data (Students)->Ok.

Step 5 : Run application (Press F5). Click on + sign to fill data. When you click on + sign then you will see a small window open in which you can fill the data then ok. In this small window there are two buttons i.e. Ok and Cancel. When you click the ok button then the data will saved; if you click the Cancel button then the window will close without saving data..

Step 6 : If you want to omit the Ok and Cancel buttons in a modal window, then that is possible. Now I'm going to explain how to remove Ok and Cancel buttons from a modal window.

Rows layout->Add->New group.

Step 7 : Expand rows layout->Select modal window.

Step 8 : Modal window->Add->Selected item.

Step 9 : Now go to properties of group and change the name i.e. StudentEditDialog.

Step 10 : Expand command bar->Right click on Add->Select Edit CanExecute Code and Edit Execute Code->Write the code.

Code

       partial void gridAddAndEditNew_CanExecute(ref bool result)
        {
            // Write your code here.
            result = this.Students.CanAddNew;
        }
        partial void gridAddAndEditNew_Execute()
        {
            // Write your code here.
            Student newStudent = this.Students.AddNew();
            this.Students.SelectedItem = newStudent;
            this.OpenModalWindow("StudentEditDialog");
        }

Step 11 : Do the same as above; right-click on Edit->Select override code->Write the code.

Code

       partial void gridEditSelected_CanExecute(ref bool result)
        {
            // Write your code here.
            result = this.Students.CanEdit && this.Students.SelectedItem != null;
        }
        partial void gridEditSelected_Execute()
        {
            // Write your code here.
            this.OpenModalWindow("StudentEditDialog");
        }

Step 12 : Run the application (Press F5). When you will click on the + sign to fill data then open modal window. Now you will see there are no Ok and cancel buttons. When you fill the field of a modal window and close the modal window then the data will be automatically saved.

Conclusion

So this article showed how to work with a modal window in an Editable Grid Screen.

Some Helpful Resources

• How to Create and Use the Editable Grid Screen in LightSwitch Beta 2
• Data Screens in LightSwitch 2011: Part 3
• Data Screen in LightSwitch : Part 1
• Create custom search screen in Lightswitch Application
  
• Add Static Image on the Home Screen in Visual Studio LightSwitch