Post
Ask Question

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.

last.png

Step 2 : Create a new table such as Student.

image2.png

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

image3.png

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

image4.png

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..

image5.png

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.

image6.png

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

image7.png

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

image8.png

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

image9.png

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

image10.png

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.

image11.png

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.

image12.png

Conclusion

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

Some Helpful Resources


Similar Articles