How do you go about adding images and links to the grid. We are using asp.net with json datasource.
Thanks
Sy
hello martin
I was able to enter the links to the grid, thanks for your help, I will share the code so others can resolve the problem, first I would like to ask you help again, I can't do is disable the filtering and sorting, as mentioned problems initially however does not work.
this is an image of iggrid:
and this is my RowTemplate:
.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>")
will have something to go with it.
Thank you very much in advance.
regards
Hello ckorrat,
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.
Hope this helps,
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 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:
Sorry this is the HTML generate:
<!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: ' ' }, { 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>