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.
Unfortunately, activation email could not send to your email. Please try again.

Images in Grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

122058 Feb 12,2016 03:53 AM Feb 22,2016 07:02 AM ASP.NET Web Forms 7
loading
Tags: TreeGrid
Jorge Pampin
Asked On February 12, 2016 03:53 AM

Hello,

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

Thanks!

Gowthami V [Syncfusion]
Replied On February 15, 2016 02:27 AM

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.


Jorge Pampin
Replied On February 16, 2016 11:57 AM

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

Gowthami V [Syncfusion]
Replied On February 17, 2016 07:21 AM

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.


Jorge Pampin
Replied On February 17, 2016 11:01 AM

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!

Gowthami V [Syncfusion]
Replied On February 18, 2016 08:01 AM

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.

Jorge Pampin
Replied On February 19, 2016 12:23 PM

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!



Mahalakshmi Karthikeyan [Syncfusion]
Replied On February 22, 2016 07:02 AM

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;