After we prepared our data service it is time to put some client UI into it. We will use 2 grids and a context menu.
To start with, add a SilverLight application in your solution:
In the process of adding you will have to setup where the SilverLight will be hosted:
This is also doable from the settings of the web project: invoke the context menu on your web site project then go to Property Pages > SilverLight Applications > New… and add/setup the SilverLight project.
After we successfully have made the setup, we can start enhancing our SilverLight application.
Now let’s start tweaking our UI!
The Grid that will hold our orders is defined like this:
Now let’s have a look in the code behind:
First we need initialize the data service context in the constructor. We will also subscribe the RowLoaded events of each grid to a custom handler that will provide each grid with nice context menu.
What you really have to understand is that we always use asynchronous way of working with data in SilverLight, because of the nature of the data services that we use. The real job is done in the callback method that gets executed when the service logic finishes processing the communication part:
Now lets handle the context menu clicking. Firstly we need to know which item was clicked. Here is where the menuOpened method kicks in:
This will let us know for which row the context menu was clicked. And here are the cases of the context menu and what happens when you click an item:
The same menu is implemented for the OrderDetails grid as well. Now as you can see When you click Add on your context menu the BeginInsert method of the corresponding grid is called. Here is the code that will handle the inserting:
This will cause the grid to insert a new row with the corresponding fields and let you insert some data. When you are done with the inserting the RowEditEnded event will be fired where we will persist our changes.
And that’s all that you need to handle inserts.
Having the insert functionality baked and ready, gives us the oportunity to implement the other parts of CUD: the delete operations. Remember the collection that we added earlier when reverse mapping the classes? Let’s go to the Order class in the Model class library. Open the file containing the private declarations of the field and add [Telerik.OpenAccess.Depend()] attribtue above the OrderDetails field. That’s all you need for cascade deleting. Now OpenAccess will know that when ever you delete an Order all corresponding details should be deleted as well. And now the code! As you can see from the context menu, when you click on the delete button in the context menu the DeleteOrder method is called:
And that’s all you need for deleting. It is really nice, isn’t it? :)
Now lets enable editing of cells in the grid. As you can see for every grid there is aCellEditEnded eventhandler method implemented. Lets look at the Orders grid implementation(it’s the same for OrderDetails just the Selected Item is cast to OrderDetail instead):
Finally we need a way to populate the details grid on selecting any order. This is as simple as it sounds. We just need to handle the Orders grid selection changing event:
Every time you click on a different Item in the first grid a new asynchronous call will be made that will retrieve all order details based on the selected OrderID. Basically our dataservice gives us back the required resources based on the URI we provide. In our case we provide OrderDetails?$filter=OrderID eq "+selectedOrd.OrderID. If we would to translate this to something human-readable it will mean exactly “Give me from the OrderDetails extent every OrderDetail that has field OrderID that is equal to selectedOrd.OrderID”. Finally we need a method that will be executed when the communication with the dataservices ends:
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required