Multi Select ComboBox in Silverlight

Problem:

              Need a way to use the combo box of silverlight which has check boxes and user can select multiple options from the combo box.

Solution:

             When I came across this requirement to implement the multi selection in combo box the first thing which I have done which many of the developer do is to search on the Google for possible solution.The solution which I found is from the stack over flow, here you can see it has give complete code and you can easily implement it. But here in my post I have changed some of the code but the the user control which is inherit from combo box. I will explain you where I have modified the code as I discuss it.
The main application which I have used for this is shown in image 1 here you can see a combo box control which is used for multiple selection and a data grid control which filter records based on the selected item from combo box. In this test application I am using the customer xml to show the records in the data grid control and I have get the countries names in the combo box control so that user can select country or countries to filter out the records in the data grid control.

Image 1

Let use discuss code for the sample application. As I have said that the control which inherit from the combo box is same as you can see on the post on the stack over flow but the code which I have modified is the model of the combo box item and the text property of the combo box which is dependency property to show the comma separate values of the selected record of the combo box control.

The first thing which I have modified is the item source collection of the combo box which raise the checked changed event I have inherit from INotifyPropertyChanged interface and use it to raise the property changed event of the class. As you can see in the code in List 1 that I have only raise the property changed for the IsChecked property which is of boolean type is bind to the IsChecked Property of the check box control which is place inside the combo box control.

List 1

Next is some modification in the view model of the Home view which is located in the viewModel folder, The thing which I modified is the display value of the combo box, in original post stack over flow if you implement the code as it is or read it you can see that combo box will display selected item is comma separated format but I have display the static text "Select Country" and don't display the comma separated value.
In List 2 I have code which is used to populate the list for the combo box, here you can see that function take list of customer and then by using the LINQ get the distinct country name which are order by country and after getting the countries I have populate the ComboBoxList which is of type "ComboBoxItemsModel " which is listed in List 1. Here you can see that I have created new object and then attached the PropertyChanged with the newly created object and assign text and then add in the list.

List 2

I have used same code to get the selected item as I need to check the country or countries name is the list and then filter the data grid records which used the PagedCollectionView as filtering of record is quite easy if you use the PagedCollectionView. If you didn't know about the PagedCollectionView filter then you can refer to my post for detail. After getting the comma separate value of the selected item from the combo box list I have just called the Refresh function of the PagedCollectionView to Refresh the collection of the data grid control to display the filtered records.

The last code which is listed in List 3 is the xaml code for the combo box. Here you can see that I have bind the Text Property of the combo box as it was bind in the original code and item source the only thing which I have changed in this code is the ItemTemplate I have used the combo box item template.

List 3

Note: As you can see that in the xaml code for the combo box, that the tag for the combo box is change not the ComboBox which is the default control for the silverlight. So you have to create separate style for the newly create control with the controls:MyComboBox tag so that it can apply to the custom combo box control. I have created one for my control which you can find in the app.xaml file.

Image 2

Output of the can be seen in the Image 2, here you can see that I have selected three countries and records for the selected countries are displayed in the grid. After filter I have sort the grid records by using the country.You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!

Delete Record Using oData Call

Problem:

              Need to delete record from Microsoft CRM 2011 by using the oData call in Microsoft CRM 2011.

Solution:
             The solution to delete record using oData call is similar to the what we have done in my last post "Update Record Using oData Call" where we use the current record Id to update the record here we use same code but with some modification to delete the current record. You can see the code in the List 1 , here you can see similar code which I have used for update of record in "Update Record Using oData Call" post with some modification. First I have only passed the record Id which is used for the delete purpose. Second is the X-HTTP-Method here I have passed DELETE as I am performing the delete operation for the passed GUID.

List 1

And the last modification in the code is the send method of the XMLHttpRequest, here I didn't pass any parameter.On successful deletion of the record it will return status of the 204 or 1223 same as used for the update. Above is the sample piece of code which is used to delete the record by using oData call.

All and any comments / bugs / suggestions are welcomed!

Update Record Using oData Call

Problem:

              Need to update existing record from the JavaScript by using the oData call in Microsoft CRM 2011.

Solution:

             For updating the existing record I have used the same record which I have created in my last post "Insert New Record In Micosoft CRM 2011 Using oData Call ", where I have created new record by using odata call in JavaScript. You can see in the Image 1, here you can see that I have highlighted the Main Phone and the address : City , mean I am going to update these fields Main Phone and the address of the account is going to update using the code here.

Image 1

Code for updating record using oData call in JavaScript is listed in List 1 here you can see that I have first created object for updating the account record then I have used the Address1 to update the City, Line1, Postal code and State or Province of the address and then at the end I have used the Main Phone to be updated.

List 1

After creating the account object for update, next is to create the request object for the oData call, here I have created updateAccountRequest which is used to update the account record. Next is open function of the request which take "POST" as first argument as we are posting data to the server and in the next parameter for the URL note that here we have to pass the Id of the record which is going to be updated by this call. The statement which need to be noted is listed in the List 2 here you can see that in case of update we need to use this extra statement so that record will be updated. For X-HTTP-Method you can refer to the following link Here you can find detail of X-HTTP-Method. We have use the marge request which updates only the properties indicated in the request body, and leaves untouched anything not mentioned in its current state.

List 2

Next is the send function of the HttpRequest to send the updated object and also attached the callback function with the request object.  Here you can see that I have passed record Id to the callback function so that if record is updated successfully then Id will be shown to the client with message and one thing that you can also pass parameter to the completed or callback function which is attached with the request object, mean if you want to send some information which you need in the callback function.

In the callback function I just check the status of the the request for 204 and 1223 as it is the update option and it will return different status. In case of successful it will display message to the client and the if you refresh the active account then you can see the Main Phone and the Address1 : City are update for the record you can see in the Image 2 as below.

Image 2

This is how you can use the oData call to update the record by using JavaScript. I have used simple attribute to update on load of the form you can use this technique.
 
All and any comments / bugs / suggestions are welcomed!

DateTime Format While Retrieving Using oData

Problem:

            While retrieving date attribute using oData call, the format of date is not correct , need to format data value so that it can be user friendly. As you can see in the Image 1.

Image 1

Solution:

            The solution of the above problem is listed in List 1. Here you can see that I have taken this code from my post "Insert New Record In Micosoft CRM 2011 Using oData Call ", where I have show you how to insert new record by using oData call and you can see in Image 2 of the last post date is not correctly formatted. Here in the code I have modified the completed callback of the Account create async call of my post "Insert New Record In Micosoft CRM 2011 Using oData Call .

List 1

You can see in above code that I have first store CreatedOn value in the stringDataValue object by using eval and converting to string so that I can perform string function on that. In the next statement I have used the Date constructor to create the date, In the Data constructor I have used the parseInt function of JavaScript to parse the value which is return by using the replace function of the string, then I have replace the unwanted characters from the data value like "/Data(" and ")/" so that I have the exact integer value of the date.You can see the output of the result in Image 2. 

That is how you can format the date when you use the odata call to get the date attribute of the entity. As you can see that the output also show you the time zone as well here it will show +5 for my time zone you can use this as well if you have different time value to shown based on your requirements.  

All and any comments / bugs / suggestions are welcomed!

Insert New Record In Micosoft CRM 2011 Using oData Call

Problem:

              Need to insert new record from the JavaScript by using the oData call in Microsoft CRM 2011.

Solution:

              The solution of the above problem is very simple and you can find the solution in the Microsoft CRM 2011 SDK as well. In Microsoft CRM 2011 SDK you can find separate file which contain all the function like Create, Update  and delete record using oData which you can reuse. But in this post I will use oData call without using the help JavaScript file. The JavaScript code is listed in the List 1. In the code you can see that I have created addAccountRecord object and then assigned appropriate value to some of the property of the object.

Note: You can use the Schema Name of the attribute as you can see in the Image 1, here you can see that PrimaryContactId is used to set the Primary Contact of the account.

Image 1

Similarly I have other attribute of the account entity like Name, Description, Revenue , DoNotPhone etc, you can use the name from the schema name from the attribute list of the entity. In the JavaScript code listed in List 1 you can see that Name and the Description attribute are of type Text mean you can assign simple string value to these two attribute.
The PrimaryContactId which is lookup type of contact entity , you have to provide the object which has the Id of the contact , LogicalName of the entity which in this case will be the contact entity and the name of the contact which "Susan Burk (Sample)" in this case. So in order to set the value for a lookup field of the account you have to provide Id , logical name and name.Here I have get the Id of the contact by using the developer toolbar to inspect the HTML of the active account grid so that I can assign value to the lookup field you may use different technique to get the Id and name of the contact.
Next is how to set the value to the picklist and the currency. If you have created plugin then you have idea how to set the value to the picklist and the currency attribute. You need to set the Value of the picklist and currency type and here in the code you can see that I have used that value to set the value to of picklist and the currency type. Last is how to set the value of the boolean type it is just simple either set true of false the only value for the boolean type.

List 1

Next point which I would like to mention here is the how the XMLHttpRequest object is open as I am sending data to the server mean to submit in the sever to I will use "POST", here you can notice that if we need to get data from the server we use "GET" but as you know we are inserting record in the database so we use "POST". Next is the URL which is appended with the "AccountSet" which is the name of the entity "Account". Last parameter for the open function is the boolean value to indicate whether we are making async or sync call by passing true we indicate that we are making async call if you pass false then call weill be sync.
In XMLHttpRequest object send function we pass the object by calling JSON.stringify function which is use to converting JavaScript data structures into JSON text. In the "onAccountCreateCallBack" event handler we check for the readyState of the passed object and status of the object. Here you can see that in this case it will return 201 if record is inserted successfully in the database.

Image2

It will return whole record of the account which is just added in the database. I have only used the Name and the Creation date to be shown that record is added in the database. As you can see in the above image Image 2. You can see the newly added record in the active account view which is shown in the Image 3 as below.

Image3

You just need one extra resource JSON2 which you can get from here. Just add the JSON2 as web resource and add that web resource in the form reference so that it can be accessible when you refere it. Just click the "From properties" by opening the form from customization and you will see the dialog as shown in the Image 4 and here you have to add the JSON2 web resource to access in the form.

Image 4

Hope you get some idea of how to add the record using JavaScript and odata call. I have call above JavaScript on load of form so that when form is loaded new record will be created and alert will be shown which display name of the account and created time of the record.

All and any comments / bugs / suggestions are welcomed!