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
hi martin.
Here i have the answers of your questions:
1. I'm using MVC 3.
2. this is the HTML:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Catalogo de Pais</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <link href="/Content/IGStyles/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" /> <link href="/Content/IGStyles/min/base/ig.ui.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.min.js" type="text/javascript"></script> <script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" ></script> <script src="/Scripts/IG/ig.ui.min.js" type="text/javascript"></script> <script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="/Scripts/IG/ig.util.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.dataSource.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.dataSource-en.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.shared.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.grid-en.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.grid.framework.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.grid.updating.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.grid.updating-en.min.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.editors.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.editors-en.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.validator.js" type="text/javascript"></script> <script src="/Scripts/IG/ig.ui.validator-en.js" type="text/javascript"></script>
</head><body> <div class="page"> <header style="height: 87px; width: 800px"> <div id="title"> <img alt="Cuentas por Cobrar URBI." src="../../Content/Iconos/Banner1.png" /> </div> <div id="logindisplay"> [ <a href="/Direcciones/Account/LogOn">Log On</a> ]
</div> </header> <section id="main" style=" height: 500px"> <table style="width: 100%; border-width:0px"> <tr> <td class="menulat" style="width: 15%"> <div id="MenuLat"> <dl> <dt>Direcciones:</dt> <dd><a href="/Direcciones/Paises">Paises</a></dd> <dd><a href="/Direcciones/Estados">Estados</a></dd> <dd><a href="/Direcciones/Municipios">Municipios</a></dd> <dd><a href="/Direcciones/Ciudades">Ciudades</a></dd> <dd><a href="/Direcciones/Colonias">Colonias</a></dd> <dd><a href="/Direcciones/Calles">Calles</a></dd> </dl> <dl> <dt>Organizacion:</dt> <dd><a href="/Organizacion/Secciones">Secciones</a></dd> <dd><a href="/Organizacion/Regiones">Regiones</a></dd> <dd><a href="/Organizacion/Plazas">Plazas</a></dd> <dd><a href="/Organizacion/Fraccionamientos">Fraccionamientos</a></dd>
</dl> </div> </td> <td style="width: 2%"></td> <td>
<script type="text/javascript">
function editar() {
var cell = $('#gridPaises').igGridSelection('selectedCell'); var dataview = $('#gridPaises').data('igGrid').dataSource.dataView(); if (cell == null) { window.alert("Debe Seleccionar un renglon de la tabla.") return; } var cellRowId = dataview[cell.rowIndex]["idPais"]; var adress = '/Direcciones/Paises/Edit' + "/" + cellRowId; window.location = adress;
} function detalle() {
var cell = $('#gridPaises').igGridSelection('selectedCell'); var dataview = $('#gridPaises').data('igGrid').dataSource.dataView(); if (cell == null) { window.alert("Debe Seleccionar un renglon de la tabla.") return; } var cellRowId = dataview[cell.rowIndex]["idPais"]; var adress = '/Direcciones/Paises/Details' + "/" + cellRowId; window.location = adress;
}
function eliminar() {
var cell = $('#gridPaises').igGridSelection('selectedCell'); var dataview = $('#gridPaises').data('igGrid').dataSource.dataView(); if (cell == null) { window.alert("Debe Seleccionar un renglon de la tabla.") return; } var cellRowId = dataview[cell.rowIndex]["idPais"]; var adress = '/Direcciones/Paises/Delete' + "/" + cellRowId; window.location = adress;
} </script>
<h2>Catalogo de Pais</h2><form action="/Direcciones/Paises" method="post"> <a id="btnCrear" href="/Direcciones/Paises/Create"><img alt="Agregar Pais" src="/Content/Iconos/AGREGARM.png" /></a> <a id="btnEditar" onclick="editar()"><img alt="Editar Pais" src="/Content/Iconos/MODIFICARM.png" /></a> <a id="btnDelete" onclick="eliminar()"><img alt="Eliminar Pais" src="/Content/Iconos/ELIMINARM.png" /></a> <a id="btnDetalle" onclick="detalle()"><img alt="Detalle de Pais" src="/Content/Iconos/CONSULTARM.png" /></a> <br /> <br /><table id="gridPaises"></table><script type="text/javascript">$(function(){$('#gridPaises').igHierarchicalGrid({ dataSourceUrl: '/Direcciones/Paises',dataSource: {"Records":[{"idPais":"AR","Nombre":"Argentina","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CA","Nombre":"Canadas","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CL","Nombre":"Chile","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CO","Nombre":"Colombia","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CR","Nombre":"Costa Rica","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CU","Nombre":"Cuba","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"EC","Nombre":"Ecuador","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"US","Nombre":"Estados Unidos","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"GT","Nombre":"Guatemala","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"HT","Nombre":"Haiti","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}}],"TotalRecordsCount":13,"Metadata":{"timezoneOffset":-28800000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,responseDataKey: 'Records', generateCompactJSONResponse: false, columns: [ { key: 'idPais', dataType: 'string', headerText: 'idPais' }, { key: 'Nombre', dataType: 'string', headerText: 'Nombre' } ], columnLayouts: [ { autoGenerateColumns: false,autoGenerateLayouts: false,responseDataKey: 'Records', generateCompactJSONResponse: false, key: 'tblClientes' } ], features: [ { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', sortedColumnTooltip: 'Ordenado' }, { name: 'Selection', mode: 'cell', multipleSelection: false }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 10, firstPageLabelText: null, firstPageTooltip: 'Ir a primera pagina', prevPageLabelText: null, prevPageTooltip: 'Ir a pagina Anterior', showPagerRecordsLabel: false, lastPageLabelText: null, lastPageTooltip: 'Ir a Ultima pagina', nextPageLabelText: null, nextPageTooltip: 'Ir a Siguiente pagina', pageSizeDropDownLabel: 'Mostrar', pageSizeDropDownTrailingLabel: 'Registros', totalRecordsCount: 13 }, { columnSettings: [ { columnIndex: -1, allowFiltering: true, filterType: 'automatic', columnKey: 'idPais', condition: 'startsWith' }, { columnIndex: -1, allowFiltering: true, filterType: 'automatic', columnKey: 'Nombre', condition: 'startsWith' } ], filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', filterButtonLocation: 'right' } ], primaryKey: 'idPais', fixedHeaders: true, height: '350', localSchemaTransform: false });});</script></form> </td> </tr> </table> <br /> <br /> </section> <footer> Sistema de Cuentas por Cobrar URBI. </footer> </div></body></html>
3. I'm using IE9 in all my projects.
4. Well... had already implemented in jquery grid to find this functionality and there was no better, again without success probe.
I'm using too Infragistics 2011.2.
if you need something more tell me.
thanks again and regards
Sorry this is the HTML generate:
<h2>Catalogo de Pais</h2><form action="/Direcciones/Paises" method="post"> <a id="btnCrear" href="/Direcciones/Paises/Create"><img alt="Agregar Pais" src="/Content/Iconos/AGREGARM.png" /></a> <a id="btnEditar" onclick="editar()"><img alt="Editar Pais" src="/Content/Iconos/MODIFICARM.png" /></a> <a id="btnDelete" onclick="eliminar()"><img alt="Eliminar Pais" src="/Content/Iconos/ELIMINARM.png" /></a> <a id="btnDetalle" onclick="detalle()"><img alt="Detalle de Pais" src="/Content/Iconos/CONSULTARM.png" /></a> <br /> <br /><table id="gridPaises"></table><script type="text/javascript">$(function(){$('#gridPaises').igHierarchicalGrid({ dataSourceUrl: '/Direcciones/Paises',dataSource: {"Records":[{"idPais":"AR","Nombre":"Argentina","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CA","Nombre":"Canadas","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CL","Nombre":"Chile","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CO","Nombre":"Colombia","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CR","Nombre":"Costa Rica","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"CU","Nombre":"Cuba","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"EC","Nombre":"Ecuador","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"US","Nombre":"Estados Unidos","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"GT","Nombre":"Guatemala","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}},{"idPais":"HT","Nombre":"Haiti","tblClientes":{"Records":[],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-28800000}}}],"TotalRecordsCount":13,"Metadata":{"timezoneOffset":-28800000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,responseDataKey: 'Records', generateCompactJSONResponse: false, columns: [ { key: 'idPais', dataType: 'string', headerText: ' ' }, { key: 'idPais', dataType: 'string', headerText: 'idPais' }, { key: 'Nombre', dataType: 'string', headerText: 'Nombre' } ], columnLayouts: [ { autoGenerateColumns: false,autoGenerateLayouts: false,responseDataKey: 'Records', generateCompactJSONResponse: false, key: 'tblClientes' } ], features: [ { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', sortedColumnTooltip: 'Ordenado' }, { name: 'Selection', mode: 'cell', multipleSelection: false }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 10, firstPageLabelText: null, firstPageTooltip: 'Ir a primera pagina', prevPageLabelText: null, prevPageTooltip: 'Ir a pagina Anterior', showPagerRecordsLabel: false, lastPageLabelText: null, lastPageTooltip: 'Ir a Ultima pagina', nextPageLabelText: null, nextPageTooltip: 'Ir a Siguiente pagina', pageSizeDropDownLabel: 'Mostrar', pageSizeDropDownTrailingLabel: 'Registros', totalRecordsCount: 13 }, { columnSettings: [ { columnIndex: -1, allowFiltering: true, filterType: 'automatic', columnKey: 'idPais', condition: 'startsWith' }, { columnIndex: -1, allowFiltering: true, filterType: 'automatic', columnKey: 'Nombre', condition: 'startsWith' } ], filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', filterButtonLocation: 'right' } ], primaryKey: 'idPais', fixedHeaders: true, rowTemplate: '<tr><td><a id=\'btnEditar\' onclick=\'editar()\'><img alt=\'Editar Pais\' src=\'@Url.Content(\'~/Content/Iconos/modificarSmall.png\')\' /></a></td><td>${idPais}</td><td>${Nombre}</td></tr>', jQueryTemplating: true, height: '350', localSchemaTransform: false });});</script></form> </td> </tr> </table> <br /> <br /> </section> <footer> Sistema de Cuentas por Cobrar URBI. </footer> </div></body></html>
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.
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.
Here's an example of my current grid: $("#SearchResults").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Id", key: "Id", width: "80px", dataType: "string" }, { headerText: "Name", key: "EntityName", width: "140px", dataType: "string" }, { headerText: "Address", key: "EntityAddress1", width: "160px", dataType: "string" }, {headerText: "City", key: "EntityCity", width: "80px", dataType: "string" }, { headerText: "State", key: "EntityState", width: "30px", dataType: "string" }, { headerText: "Zip", key: "EntityZip", width: "55px", dataType: "string" }, { headerText: "DOB", key: "DateOfBirth", width: "60px", dataType: "date" }, { headerText: "Phone", key: "HomePhone", width: "80px", dataType: "string" } ], dataSourceType: 'json', dataSource: obj, height: '300px', features: [ { name: 'Sorting', type: "local", columnSettings: [ { columnKey: "EntityName", currentSortDirection: "ascending" }, { columnKey: "SelectEntity", editorType: 'button' } ] }, ] });
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.
Thanks Martin.
that's work!!
this is the image of my igGrid:
Then I leave the code used, with the features: Sorting, Filtering, Selection, Row Template, Paging, plus methods to obtain the value of the selected cell.
@model IQueryable<CxcModels.Models.tblPaises>@using Infragistics.Web.Mvc;
@{ ViewBag.Title = "Catalogo de Pais"; Layout = "~/Views/Shared/_Layout.cshtml";} <script type="text/javascript">
function crear() {
var adress = '@Url.Action("Create")'; window.location = adress; }
var cell = $('#gridPaises').igGridSelection('selectedCell'); var dataview = $('#gridPaises').data('igGrid').dataSource.dataView(); if (cell == null) { window.alert("Debe Seleccionar un renglon de la tabla.") return; } var cellRowId = dataview[cell.rowIndex]["idPais"]; var adress = '@Url.Action("Edit")' + "/" + cellRowId; window.location = adress;
var cell = $('#gridPaises').igGridSelection('selectedCell'); var dataview = $('#gridPaises').data('igGrid').dataSource.dataView(); if (cell == null) { window.alert("Debe Seleccionar un renglon de la tabla.") return; } var cellRowId = dataview[cell.rowIndex]["idPais"]; var adress = '@Url.Action("Details")' + "/" + cellRowId; window.location = adress;
var cell = $('#gridPaises').igGridSelection('selectedCell'); var dataview = $('#gridPaises').data('igGrid').dataSource.dataView(); if (cell == null) { window.alert("Debe Seleccionar un renglon de la tabla.") return; } var cellRowId = dataview[cell.rowIndex]["idPais"]; var adress = '@Url.Action("Delete")' + "/" + cellRowId; window.location = adress;
<h2>Catalogo de Pais</h2>@using (Html.BeginForm("Index", "Paises")){ <img alt="Agregar Pais" src="@Url.Content("~/Content/Iconos/AGREGARM.png")" onclick="crear()" /> <br /> <br /> @(Html.Infragistics().Grid(Model).ID("gridPaises").AutoGenerateColumns(false).PrimaryKey("idPais").FixedHeaders(true).AutoGenerateLayouts(false) .JQueryTemplating(true) .RowTemplate("<tr><td><img alt='Editar' onclick='editar()' src='../../../../Content/Iconos/modificarTable.png' /></td><td><img alt='Detalle' onclick='detalle()' src='../../../../Content/Iconos/consultarTabla.png' /></td><td>${idPais}</td><td>${Nombre}</td></tr>") .Columns(column => { column.For(x => x.idPais).HeaderText(" ").Width("30px").Column.Key = "Editar"; column.For(x => x.idPais).HeaderText(" ").Width("30px").Column.Key = "Detalle"; column.For(x => x.idPais).DataType("string").HeaderText("idPais").Width("380px"); column.For(x => x.Nombre).DataType("string").HeaderText("Nombre").Width("430px"); }) .Features(features => { features.Sorting().ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Editar").AllowSorting(false); settings.ColumnSetting().ColumnKey("Detalle").AllowSorting(false); settings.ColumnSetting().ColumnKey("idPais").AllowSorting(true); settings.ColumnSetting().ColumnKey("Nombre").AllowSorting(true); }); features.Selection().Mode(SelectionMode.Cell).MultipleSelection(false); features.Paging().PageSize(10).FirstPageLabelText("").FirstPageTooltip("Ir a primera pagina").PrevPageLabelText("").PrevPageTooltip("Ir a pagina Anterior").ShowPagerRecordsLabel(false) .LastPageLabelText("").LastPageTooltip("Ir a Ultima pagina").NextPageLabelText("").NextPageTooltip("Ir a Siguiente pagina").PageSizeDropDownLabel("Mostrar").PageSizeDropDownTrailingLabel("Registros"); features.Filtering().FilterButtonLocation(Location.Left) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Editar").AllowFiltering(false); settings.ColumnSetting().ColumnKey("Detalle").AllowFiltering(false); settings.ColumnSetting().ColumnKey("idPais").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("Nombre").AllowFiltering(true).FilterCondition("startsWith"); }); }) .Height("350") .DataSourceUrl(Url.Action("Index")) .DataBind().Render() )
I hope that helps somewhat!.
Regards.
Thanks Martin
I was able to workaround the problem.
Simply speaking you have to change the keys of the columns with links (because 3 columns has the same keys) and then use the columnSettings to disable sorting and filtering for these two columns by key.
Your code for the columns definition should look like this:
Your code for the Features definition should look like this:
Hope this helps,Martin PavlovInfragistics, Inc.