How do you go about adding images and links to the grid. We are using asp.net with json datasource.
Thanks
Sy
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 () {
$("#grid1").igGrid({
autoGenerateColumns: false,
rowTemplate: "<tr><td> ${Name} </td> <td> <img width='110' height='150' src='${ImageUrl}'></img></td><td> <a href='${Link}'> ${Link} </td></tr>",
columns: [
{headerText: "Name", key: "Name" },
{headerText: "Image", key: "ImageUrl" },
{headerText: "Link", key: "Link" }
],
jQueryTemplating: true,
dataSource: exampleDataSource
});
You can see how to use row template in ASPX and Razor scenario in this sample:
http://samples.infragistics.com/jquery/grid/row-template
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
Hope this helps,
Martin Pavlov
Infragistics
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 ckorrat,
I see that you're using igHierarchicalGrid.
There is a known bug with row template. The bug is that spaces are trimmed from the string.
This bug is already fixed and will be included in the next version of NetAdvantage for jQuery product.
As a workaround you can make string column in your data source which will resemble the column template html and in the template put the placeholder of the column:
Example:
Your row template will look like this:
and your data source should look like this:
Martin Pavlov,
Infragistics, Inc.
Hi Martin
I'm confused, I'm using iggrid, but that appears not igHierarchicalgrid.
I show, I took my data from my controller:
[GridDataSourceAction]public ActionResult Index(){ var paises = _repository.GetAllPaises(); return View("Index", paises);}
the method "GetAllPaises" look this:
public IQueryable<tblPaises> GetAllPaises() { var paises = from d in db.tblPaises orderby d.Nombre select d;
return paises; }
then I do not create my datasource, but rather I pull from my database.
I remember you my code to create the iggrid is this:
Can you help me choose the correct option to apply this RowTemplate, sorry for the inconvenience.
thank you
I think I found the solution.
jQuery MVC wrapper is one for igGrid and igHierarchicalGrid and internally creates the proper grid depending on model and settings which are set. "AutoGenerateLayouts" is the setting which is responsible for generating layouts(layouts are the nodes of igHierarchicalGrid). This setting is by default "true".
In your case I guess that your model(CxcModels.Models.tblPaises) has relationships defined and because "AutoGenerateLayouts" is by default "true" the MVC wrapper generates igHierarchicalGrid.
To fix that you should add AutoGenerateLayouts(false) to your Razor code. This way the generated code will be for igGrid. This should also resolve your template issue.
Related to this, I'm simply trying to add a button column to "select" the row. Right now the row can be selected by double clicking, which then autofills out some fields on the form. Can someone point me to an example of the doing this one the client side as I'm not having much luck finding what I'm looking for... I did find the "features" section of the igGrid, but setting a column's "editorType" to 'button' does not produce a column of buttons. In fact it throws an error...
I appreciate any references, etc.
triffle said: Can someone point me to an example of the doing this one the client side as I'm not having much luck finding what I'm looking for...
triffle said:I did find the "features" section of the igGrid, but setting a column's "editorType" to 'button' does not produce a column of buttons.