adding images and links | Infragistics Forums

300

adding images and links

saevar posted over 13 years ago

How do you go about adding images and links to the grid. We are using asp.net with json datasource.

Thanks

765

christhian posted over 12 years ago in reply to Martin Pavlov

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
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 12 years ago in reply to christhian

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,

Martin Pavlov

Infragistics, Inc.
Cancel
Reply

Cancel
765

christhian posted over 12 years ago in reply to Martin Pavlov

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
Cancel
Reply

Cancel

23953

Offline Martin Pavlov posted over 12 years ago in reply to christhian

Hello ckorrat,

The problem is that in the row template you define 3 columns, but in the column definitions of the table you define 2 columns.

You can choose from 2 solutions:

1.Put the button in one of 2 columns you have defined.
Pros:
You don't have to define 3-rd column, because defining 3-rd column will need extra work(which I'll explain in the second solution).
Cons:
It is not visually appealing.
When clicking on the button the cell will be selected which will annoy the user.

2.Put the button in its own column.
This is what you did, but there is one more step. You have to define another column in the column definitions. The problem is that you cannot define custom column in the column definition so you have to duplicate the definition of one of the existing columns.
For example your column definitions will look like this:


           Columns(column => {
                column.For(x => x.idPais).DataType("string").HeaderText("idPais");
                column.For(x => x.Nombre).DataType("string").HeaderText("Nombre");
                @* this definition will hold the button from the template *@
                column.For(x => x.idPais).DataType("string").HeaderText("");
            })

Pros:
It is much more intuitive solution.
Cons:
There will be filtering enabled on this column.
When clicking on the button the cell will be selected.

Now the question is how to resolve the cons of the second solution.
In order not to select the cell with the button when the button is clicked you should add the following code:


<script type="text/javascript">
 $(function () {
        $(document).delegate("#grid1", "iggridselectionactivecellchanging", function (evt, ui) {
            //cancel activation of the cell for column with the button
            if(ui.cell.index === 2)
                return false;
        });
        $(document).delegate("#grid1", "iggridselectioncellselectionchanging", function (evt, ui) {
            //cancel selection of the cell for column with the button
            if(ui.cell.index === 2)
                return false;
        });
    });
</script>

In order to hide the filter of the column which holds the buttons you can add similar code to this one:


<style type="text/css">
    .hideButtonColumnFilter
    {
        display: none;
    }
</style>
<script type="text/javascript">
$(function () {
     // here I assume that the buttons column is the last column
               $("#grid1 .ui-iggrid-filtercell").last().addClass("hideButtonColumnFilter");
           });
</script>

Note: These workarounds cannot be done in Razor.

Hope this helps,

Martin Pavlov,

Infragistics, Inc.

765

christhian posted over 12 years ago in reply to Martin Pavlov

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!!.
Cancel
Reply

Cancel