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

Can you help me choose the correct option to apply this RowTemplate, sorry for the inconvenience.

thank you

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

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;
     }

     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 = '@Url.Action("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 = '@Url.Action("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 = '@Url.Action("Delete")' + "/" + cellRowId;
         window.location = adress;

     }
    
 </script>

<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