Intersoft Community - ClientUI - Image Binding in ClientUI Reporting

Image Binding in ClientUI Reporting

yudi — Mon, 23 Jun 2014 12:50:07 GMT

Specifying the image/bitmap field owned by the data source can be done like the following.

However, there is a minor glitch with the Reporting control. The image object doesn’t show the picture as specified in the properties owned by the data source.

I will have this forwarded to ClientUI development team to be investigated further. Will keep you updated with any news I heard from the team regarding this.

Edited on June 23, 2014 11:18 PM
Reason: Update Work Item ID

This is filed under CLIENTUI-50.

Image Binding in ClientUI Reporting

aspireectd — Fri, 20 Jun 2014 10:08:03 GMT

Thanks but I refer back to my original question. Using your 2nd example, how do I add a property that is an image/bitmap field in my object.

Brent

Image Binding in ClientUI Reporting

yudi — Thu, 19 Jun 2014 02:53:23 GMT

Since you are using third party data source, you will need to define data definition on the report manually.

To define data source, navigate to the Report Explorer tab and do the following.

Click the AddDataSource button to launch a dialog to add a new data source.
Specify the name and type of the data source.
Specify the properties owned by the data source, including its name and type.
Click OK. Now the Report Explorer tab will look like the following.

Hope this help.

Image Binding in ClientUI Reporting

aspireectd — Tue, 17 Jun 2014 10:20:53 GMT

Thanks for the reply, I am not using Entity Framework but a third party ORM (Telerik) so I was going to simply construct a collection and pass it at run time. when creating/editing a datasource through your designer is there a certain property type that I should be using or what is the best approach in my case.

Brent

Image Binding in ClientUI Reporting

yudi — Tue, 17 Jun 2014 03:30:44 GMT

One of Reporting Reference sample, Product Category sample, has an image object as shown below.

The image object shows image file from a specified Uri based on the CategoryID field.

A partial class named Category (Intersoft.ClientUI.Samples.Reporting.DomainModel\Models\NorthwindModel\Category.cs) is used to define the required properties and methods to handle this object.

public partial class Category
{
    #region Properties

    private static Dictionary<int, BitmapImage> PhotoDictionary = new Dictionary<int, BitmapImage>();

    public ImageSource Photo
    {
        get { return ResolvePhoto(this.CategoryID); }
    }

    #endregion

    #region Methods

    public static ImageSource ResolvePhoto(int categoryID)
    {
        if (PhotoDictionary.ContainsKey(categoryID))
            return PhotoDictionary[categoryID];
        else
            return null;
    }

    public static void RegisterPhoto(int categoryID)
    {
        Uri uri = new Uri(string.Format("/Intersoft.ClientUI.Samples.Reporting.DomainModel;Component/Assets/Images/Categories/{0}.png", categoryID), UriKind.Relative);
        PhotoDictionary[categoryID] = new BitmapImage(uri) { CreateOptions = BitmapCreateOptions.None };
    }

    #endregion
}

In the view model (ProductCategoryViewModel.cs in “Intersoft.ClientUI.Samples.Reporting \ViewModels\Reference” folder), override the LoadPrerequisiteData. Invoke RegisterPhoto() method for each items of result and pass its CategoryID as the parameter.

protected override async void LoadPrerequisiteData()
{
    CategoryRepository productModelRepository = new CategoryRepository(new NorthwindDFEntities());
    SelectResult result = await productModelRepository.LoadDataAsync();

    foreach (Category category in result.Items)
    {
        Category.RegisterPhoto(category.CategoryID);
    }

    base.LoadPrerequisiteData();
}

In the Report Designer, select the Image component; and click on its smart tag to open the Image Task. Set the Image Binding to Category.Photo.

Should you have different scenario, please feel free to let me know.

Image Binding in ClientUI Reporting

aspireectd — Mon, 16 Jun 2014 17:12:03 GMT

How do I specify that a datasource property is an image type that will get picked up by your image object.