Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
saevar
300
adding images and links
posted

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

Thanks

Sy

Parents Reply
  • 765
    posted 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

Children