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 martin.
I apply what you mention above, however, did not work, I show you a picture of the code I have in my grid:
also show you a screen with the running result, only doubles the column, but do not see the button or in this case the image.
i hope you can help me.
thanks in advance.
regards
Hello ckorrat,
I tried to reproduce this behavior but with no success.
I need more information on the subject. Here are my questions:
1 Which version of the MVC helper do you use?
2 I'm interested in html which is generated. Can you post it for me to inspect? (You can attach it to the post.)
3 What browser are you using to test it?
4 Can you test it with jQuery code(without Razor) and tell me what you observe?
For your information my sample is using 11.2 version of NetAdvantage for jQuery.
Best regards,
Infragistics, Inc.
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>
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,
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.