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.
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.
<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 });
|
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.