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 christhian

    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>

     

    Christhian Villa

    Regards

Children