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

Hello ckorrat,

Yes, you can.

Here is the example which uses row templating in Razor:

<%= Html.Infragistics().Grid(Model).ID("grid1").ShowHeader(false).DefaultColumnWidth("175px")
    .RowTemplate("<tr><td> ${Name} </td> <td> <button type="button" onclick="showDetails(${ID})"><img width='110' height='150' src='${ImageUrl}'></img></button></td><td> <a href='${Link}'> ${Link} </td></tr>")
    .JQueryTemplating(true).Height("400").DataSourceUrl(Url.Action("PagingGetData")).DataBind().Render()%>

In order to work in your code you should add "RowTemplate" and "JQueryTemplating" methods to your Razor code.

We have sample on the subject which you can find here:

http://samples.infragistics.com/jquery/grid/row-template

 

Hope this helps,

Martin Pavlov,

Infragistics, Inc.

Hi Martin thanks again for you response.

i have any problems, i can't show the button of the rowtemplate, this is my code.

i hope you can helpme, thanks in advance!!.

 

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... 

Unless someone has posted such an example on the forums, there isn't one available from the official control samples at http://samples.infragistics.com/jquery.

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.

Actually, the editorType options is used for the columnSettings of the Updating feature - just take a look at http://help.infragistics.com/jQuery/2012.1/ui.iggridupdating#options. If you take a look at editorType's description, you will see that it cannot be a button.
The complex columnSettings option is unique to each grid feature so you have defined your sorting columnSettings and if you wanted to use Updating, you'd have to define a separate columnSettings array for it.

// Generally I'd advice going through the official API help http://help.infragistics.com/jQuery/2012.1 as it's easy to become confused by such peculiarities. I consult with it regularly so I don't need to remember too much stuff :D

 I've attached a simle HTML sample page to my reply which will hopefully provide you with the solution you are looking for.

PS: I've thrown in the selection feature because you mentioned it. 

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

     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