How do you go about adding images and links to the grid. We are using asp.net with json datasource.
Thanks
Sy
Hello ckorrat,
Yes, you can.
Here is the example which uses row templating in Razor:
<%= Html.Infragistics().Grid(Model).ID("grid1").ShowHeader(false).DefaultColumnWidth("175px") .RowTemplate("<tr><td> ${Name} </td> <td> <button type="button" onclick="showDetails(${ID})"><img width='110' height='150' src='${ImageUrl}'></img></button></td><td> <a href='${Link}'> ${Link} </td></tr>") .JQueryTemplating(true).Height("400").DataSourceUrl(Url.Action("PagingGetData")).DataBind().Render()%>
<%= Html.Infragistics().Grid(Model).ID("grid1").ShowHeader(false).DefaultColumnWidth("175px")
.RowTemplate("<tr><td> ${Name} </td> <td> <button type="button" onclick="showDetails(${ID})"><img width='110' height='150' src='${ImageUrl}'></img></button></td><td> <a href='${Link}'> ${Link} </td></tr>")
.JQueryTemplating(true).Height("400").DataSourceUrl(Url.Action("PagingGetData")).DataBind().Render()%>
In order to work in your code you should add "RowTemplate" and "JQueryTemplating" methods to your Razor code.
We have sample on the subject which you can find here:
http://samples.infragistics.com/jquery/grid/row-template
Hope this helps,
Martin Pavlov,
Infragistics, Inc.
thanks for your response Martin.
Can i do this in razor? because i have many features enabled, but i don't know how applicate this option.
thanks again.
There is no column template feature out of the box, but you can use row template to accomplish your scenario.
Your code should look like this:
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: false,
rowTemplate: "<tr><td> ${Name} </td> <td> <button type="button" onclick="showDetails(${ID})"><img width='110' height='150' src='${ImageUrl}'></img></button></td><td> <a href='${Link}'> ${Link} </td></tr>",
columns: [
{headerText: "ID", key: "ID" },
{headerText: "Name", key: "Name" },
{headerText: "Image", key: "ImageUrl" },
{headerText: "Link", key: "Link" }
],
jQueryTemplating: true,
dataSource: exampleDataSource
});
In the example above I defined button for the second column. When the button is clicked it will execute showDetails function and will pass the "ID" value of the row.
Martin Pavlov
hi.
i can create a column template?? I need include imagebutton for all datas in my grid for row, but is possible that issue??
thanks
Hello saevar,
If you want to use images, links etc. in igGrid you should use a feature called row template. Row template uses jQuery Templates (See http://api.jquery.com/category/plugins/templates/ ) and is enabled by setting "rowTemplate" and "jQueryTemplating" properties in igGrid.
Here is an example how to use row template for your case:
var exampleDataSource = [ {"Name": "Row 1", "ImageUrl": "http://exampledomain.com/image1.png", "Link": "http://exampledomain.com/Row1"}];
$(window).load(function () {
rowTemplate: "<tr><td> ${Name} </td> <td> <img width='110' height='150' src='${ImageUrl}'></img></td><td> <a href='${Link}'> ${Link} </td></tr>",
You can see how to use row template in ASPX and Razor scenario in this sample:
You can also check the following blog post which is on row templates subject, but uses igTree widget:
http://forums.infragistics.com/blogs/jordan_tsankov/archive/2011/12/02/setting-up-node-template-in-the-igtree-control.aspx
Infragistics