Display Images in a Grid in DotNetNuke

This post has 10 replies

Not Ranked
Posts: 8
eiskarlsson Posted: Sun Mar 2, 2008 @ 10:09 AM
Hello,

I would like to display some pictures in a CA Grid in a dnn module, but I am not sure exactly how.

I am using CA Web.UI 2007.2 and dnn 4.8.0.

Any help is appreciated!

Regards,

Eis Karlsson
Top 10 Contributor
Posts: 6,694
stephen Posted: Mon Mar 3, 2008 @ 1:39 PM
I'm afraid this isn't something we currently support... do you have the grid displaying in the module at present? If so, have you tried using client templates to display an image in a column (as we have in our demos)?
Not Ranked
Posts: 8
eiskarlsson Posted: Mon Mar 3, 2008 @ 5:44 PM
Yes, the grid is working just fine, I am able to display some text data from the database.

I forgot to say that I would like to get the pictures from a SQL server database and was wondering if it is possible to use the dnn data access layer for that or I should query the database directly?

Client templates seem to work only with 'data-binding expressions that evaluate to strings'. How would I get a path to the picture if it is stored as a byte array?

I have an example that uses an http handler and a formatURL function to display the images, that works as a standalone application, but I am not sure if and how it would work in dnn.

Also which demo exactly shows the use of client templates?

Eis Karlsson
Top 10 Contributor
Posts: 6,694
stephen Posted: Tue Mar 4, 2008 @ 12:17 PM
"Also which demo exactly shows the use of client templates? "

Quite a few do, but check out the first demo- ajax grid. This template is used (among others):

          <ComponentArt:ClientTemplate Id="PriorityIconTemplate">
            <img src="images/## DataItem.GetMember('PriorityIcon').Value ##" width="8" height="10" border="0" >
          </ComponentArt:ClientTemplate>


However, if what I'm reading above is correct this won't be much help, as you're storing the image in the database, not a reference to the image, correct? If so, you need to use your handler, and server templates. This is not the most straightforward process- basically, you'lll create a template that contains an image control. That image control's image property has to be set on databound. This article explains how to do this using the framework standard datagrid. Is this how you're using your handler?
Not Ranked
Posts: 8
eiskarlsson Posted: Tue Mar 4, 2008 @ 6:22 PM
Yes, this is exactly how the handler is used in this example. It replaces the GetImage.aspx page from the above article with a one line .ashx file with a code-behind that handles the connection to the database. I found out that the following code works with the CA Grid:

<ServerTemplates>
    <ComponentArt:GridServerTemplate ID="ImageTemplate">
      <Template>
        <img id="Img1"   src="<%# formatURL((Container.DataItem[0]).ToString()) %>" runat="server" />
      </Template>
    </ComponentArt:GridServerTemplate>
</ServerTemplates>


Where I am confused is how to make this work in DotNetNuke. I'm trying to write the module in C# and also I'd like to use dnn's DAL to get the images from the database. I guess I could use a GetImage.aspx page and place it in the module's folder, but if I wanted to use a http handler I would have to place the code-behind file in the App_Code folder. I don't know if it will compile at all, since it will have files in two different languages and if it does, will dnn's DAL be accessible from there?

I understand that the basic questions I am asking might not be directly related to ComponentArt's products and it is very nice of you to answer!

Eis Karlsson
Top 10 Contributor
Posts: 6,694
stephen Posted: Wed Mar 5, 2008 @ 12:28 PM
Unfortunately I can't be of much help here; we don't run DNN any longer and I'm no longer familiar with it's DAL.... this seems like a a question, though, that users of DNN and grids must have faced before; have you had any luck finding resources for, say, the standard datagrid and the image datatype in DNN?
Not Ranked
Posts: 8
eiskarlsson Posted: Wed Mar 5, 2008 @ 6:40 PM
The only thing I have found so far is this post.

Eis Karlsson
Top 10 Contributor
Posts: 6,694
stephen Posted: Tue Mar 11, 2008 @ 11:44 AM
I'm sorry I couldn't be more helpful... I did a few searches, and this does seem to be a fairly common situation. You might want to try the DNN developer forums- someone there is bound to have dealt with grids and images before (and who will likely be more knowledgeable of DNN than I).
Not Ranked
Posts: 8
eiskarlsson Posted: Tue Mar 11, 2008 @ 4:49 PM
Thank you for all your help, Stephen! I think now I have an idea how to do that, but to find out more I posted my question on the DNN Forums also. Here is the link.

Thanks again,

Eis Karlsson
Not Ranked
Posts: 8
eiskarlsson Posted: Mon Mar 17, 2008 @ 4:31 PM
OK, I finally figured it out. I put the code in an aspx page in the module folder and removed the <form> tags from it. The codebehind is shown here:

ViewImage.aspx.cs

{insert the necessary using statements here}

 
namespace MyCompany.Modules.MyModule
{

    public partial class ViewImage : System.Web.UI.Page

    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int imageId;
            int moduleId;
            if ((Request.QueryString["imageId"] == null) || (Request.QueryString["moduleId"] == null))
                return;
            if (!(int.TryParse(Request.QueryString["imageId"].ToString(), out imageId)))
                return;
            if (!(int.TryParse(Request.QueryString["moduleId"].ToString(), out moduleId)))
                return;
            writeImage(moduleId, imageId);

        }
        
protected void writeImage(int _ModuleID, int _ItemID)
        {
            MyModuleController objMyModulePerson = new MyModuleController();
            MyModuleInfo MyModulePerson = new MyModuleInfo();
            MyModulePerson = objMyModulePerson.GetMyModule(_ModuleID, _ItemID);

           
            if (MyModulePerson.CreatedByUser > 0)
            {
                if (MyModulePerson.Picture.Length != 0)
                    Response.BinaryWrite(MyModulePerson.Picture);
            }


        }
    }
}


This is pretty much it, except for that I needed to place the css file for the grid in a module.css file in the module folder in order to style the CA grid.

Hope this helps somebody.
Top 10 Contributor
Posts: 6,694
stephen Posted: Tue Mar 18, 2008 @ 5:37 AM
Excellent- thanks so much for posting this.
Page 1 of 1 (11 items)