We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Images in Grid column

Hello,

How to show images in Grid column that are aviable in Grid datasource?

Thanks!

7 Replies

GV Gowthami V Syncfusion Team February 15, 2016 07:27 AM UTC

Hi Jorge,

Thanks for using Syncfusion products.

Based on your requirement “show images in Grid column that are aviable in Grid datasource”, we have created a simple grid sample and the same can be downloaded from the following  location.

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Exporting-ASPX1075513922

In the above sample, the grid datasource will contain the PhotoPath field which contains the path of the image and used template column to show images in grid column.

The datasource to the grid will be as follows.

protected void Page_Load(object sender, EventArgs e)

        {

            this.Grid.DataSource = GetData();

            this.Grid.DataBind();

        }

        public IEnumerable<object> GetData() {

            List<object> list = new List<object>();

            list.Add(new { EmployeeID = 2, EmployeeName = "Steven", PhotoPath = "Employees Images/2.png" });

            . . . .  .

            return list;

        }

  

The template used to show the images in grid columns will be as follows,

<ej:Grid id="Grid" runat="server" AllowPaging="true">        

<Columns>                          

. . . . . .

<ej:Column HeaderText="Employee Image"

       Template="<img alt='{{:EmployeeID}}' src='/Models/{{:PhotoPath}}' style='height=70px;width:70px'>"/>            

 </Columns>

       

</ej:Grid>


The images are placed in the Models/Employees Images folder in the above sample.

If you want to show the blob column for DB in grid, then first retrieve the blob content from database and write it as file to the disk and then use the above method to show them in the grid columns. For saving the blob content as file to the disk, please refer the below help link.

http://support.microsoft.com/kb/317016

Refer to the below online demo link for more clarification about template columns,

http://asp.syncfusion.com/demos/web/grid/columntemplate.aspx

Regards,

Gowthami V.



JP Jorge Pampin February 16, 2016 04:57 PM UTC

Hello,

Does the grid have any kind of images cache? Because in my application, the images shown in the cells are changed but there is no way to show the new images in the cell.

Thanks


GV Gowthami V Syncfusion Team February 17, 2016 12:21 PM UTC

Hi Jorge,

Before proceeding with your query we need below details,

1.       Share the code example that you are used for changing images in grid.

2.       Share the grid rendering code example.

3.       If any changes made to the grid externally then we need to refresh the grid.


We can refresh the grid externally using “refreshContent” method of the grid.


Refer to the below link for more clarification about refreshContent method,


http://help.syncfusion.com/js/api/ejgrid#methods:refreshcontent

The provided information will help to analyze the requirement and provide you the response as early as possible.

Regards,

Gowthami V.



JP Jorge Pampin February 17, 2016 04:01 PM UTC

Hello,

I use refreshContent, but it doesn't work, the image doesn't change.

This is the column template:

<script type="text/x-jsrender" id="columnTemplateImageCOFs">
        <img style="height: 16px;"  src="FormUtils/GetImage.aspx?Id={{:IdCuenta}}" id="ImgCOFs" runat="server" />
</script>
And this the code that returns the image:

protected void Page_Load(object sender, EventArgs e)
        {
          
            Response.Buffer = true;
            Response.Charset = "";
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            Response.ContentType = "image";

           Response.BinaryWrite(GetImagenById((Request["IdCuenta"]));

            Response.Flush();
            Response.End();
        }

Thanks!


GV Gowthami V Syncfusion Team February 18, 2016 01:01 PM UTC

Hi Jorge,

Thanks for using Syncfusion products.

We have analyzed your issue " the image doesn't change" and we suspect the cause of the issue is the images are maintained in the cache memory of the browser. So that only after refreshing the grid content the images are not changed dynamically.

To resolve the issue " the image doesn't change" we suggest you that use unique url for the image as follows,

<asp:Content ID="scripts" ContentPlaceHolderID="ScriptContent" runat="server">

    <script type="text/x-jsrender" id="columnTemplateImageCOFs">

        <img style="height: 16px;"  src="{{:~getUniqueUrl(IdCuenta)}}" runat="server" />

</script>

    <script>



        function getTimedUrl(id) {

//Generating unique url

            return "/GetImage.aspx?Id=" + id + "&tstmp=" + new Date().valueOf();

        }


        $.views.helpers({

            getUniqueUrl: getTimedUrl

        });


    </script>

</asp:Content>


Now we can refresh the grid content (after changing the image) using “refreshContent” method of the grid for reflecting the dynamic change of the image in grid.

Regards,

Gowthami V.


JP Jorge Pampin February 19, 2016 05:23 PM UTC

Hello,

It's perfect!

Another question, I need to show images in a TreeGrid control this way (from GetImage.aspx with parameters), how can I do this?

Thanks!




MK Mahalakshmi Karthikeyan Syncfusion Team February 22, 2016 12:02 PM UTC

Hi Jorge,

We can also load images to the TreeGrid column with the help of Column template. We need to set “IsTemplateColumn” as true to the template column and need to pass the JSRender template to the “TemplateID” field of the column. Please refer the below code example to initialize the Column template in TreeGrid.

<body>

    <script type="text/x-jsrender" id="columnTemplateImageCOFs">

        <img style="height: 16px;padding:4px;" src="{{:~getUniqueUrl(TaskId)}}" runat="server" />

    </script>


    <ej:TreeGrid ID="TreeGrid1" runat="server">

        <Columns>

            <ej:TreeGridColumn HeaderText="Image Column" Field="ImageColumn" IsTemplateColumn="true" TemplateID="columnTemplateImageCOFs" />

        </Columns>

    </ej:TreeGrid>


    <script type="text/javascript">

        function getTimedUrl(id) {

            return "/GetImage.aspx?Id=" + id + "&tstmp=" + new Date().valueOf();

        }


        $.views.helpers({

            getUniqueUrl: getTimedUrl

        });

    </script>

</body>

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridWithImage1775930011

Regards,

Mahalakshmi K.


Loader.
Up arrow icon