none
Modal jqgrid RRS feed

  • Pregunta

  • Hola gente pueden ayudarme tengo un popup que tiene una jqgrid 

    Esta es la jqgrid 
    
    jQuery("#jQGridDemo").jqGrid({
                    datatype: 'json',              
                    colNames: ['', 'RAZON', 'CUIT', 'NRO. DOCUMENTO', 'ACCIONES'],
                    colModel: [
                                { name: 'ID_PROVEEDOR', index: 'ID_PROVEEDOR', hidden: true, key: true },
                                { name: 'RAZON', index: 'RAZON', width: 200, sortable: true, search: true, searchoptions: { sopt: ['cn', 'eq', 'ew', 'bw'] } },
                                { name: 'CUIT', index: 'CUIT', width: 200, sortable: true, search: true, searchoptions: { sopt: ['cn', 'eq', 'ew', 'bw'] } },
                                { name: 'DOCUMENTO_NRO', index: 'DOCUMENTO_NRO', width: 200 },
                                { name: 'Acciones', index: 'Acciones', width: 250, search: false }
    
                    ],
                    rowNum: 20,
                    mtype: 'POST',
                    loadonce: true,
                    rowList: [10, 20, 30],
                    pager: '#jQGridDemoPager',
                    sortname: 'RAZON',
                    viewrecords: true,
                    sortorder: 'desc',
                    ignoreCase: true,
                    width: 'auto',
                    height: 'auto',
                    gridComplete: function () {
                        var ids = jQuery("#jQGridDemo").jqGrid('getDataIDs');
    
                        for (var i = 0; i < ids.length; i++) {
                            var cl = ids[i];
                            var cuit = jQuery("#jQGridDemo").getCell(cl, 'CUIT');
                            var razon = jQuery("#jQGridDemo").getCell(cl, 'RAZON');
                            var dni = jQuery("#jQGridDemo").getCell(cl, 'DOCUMENTO_NRO');
    
                            if (cuit != "")
                                ver = "<a style='cursor:pointer;' onclick=\"DetalleCUIT(" + cl + "," + cuit + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
                            else if (dni != "")
                                ver = "<a style='cursor:pointer;' onclick=\"DetalleDNI(" + cl + "," + dni + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
                            else
                                ver = "<a style='cursor:pointer;' onclick=\"Detalle(" + cl + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
    
    
                            jQuery("#jQGridDemo").jqGrid('setRowData', ids[i], {
                                Acciones: ver
                            });
                        }
                    }
                });
                $("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
                    {
                        edit: false,
                        add: false,
                        del: false,
                        refresh: false,
                        search: false
    
                    }
                );
                $("#jQGridDemo").jqGrid('filterToolbar', { searchOperators: true });
    
    
    $("#btnDialog").click(function () {
                    $("#dialog").dialog({
                        autoOpen: true,
                        height: 800,
                        width: 900,
                        show: {
                            effect: "explode",
                            duration: 1000
                        },
                        hide: {
                            effect: "explode",
                            duration: 1000
                        },
                        modal: true,
                        open: function (event, ui) {
                            $.ajax({
                                type: "POST",
                                url: "T_ESTADOSListado.aspx/GetProveedores",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (response) {
    
                                },
                                failure: function (response) {
                                        alert(response.d);
                                    }
                            });
                        }
                    });
                });

    no se como hacer para llenar la grilla en el success del ajax ...

    miércoles, 18 de marzo de 2015 16:47

Respuestas

Todas las respuestas

  • hola

    aqui explico como podrias hacerlo

    jqGrid – Listar Orden Compra (Maestro-Detalle)

    como veras se usa $.ajax para invocar un webmethod en el aspx y el json resultante se asigna al grid

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta efinten jueves, 19 de marzo de 2015 12:50
    miércoles, 18 de marzo de 2015 19:00
  • Hola Leandro te hago una consulta, no me funciona la paginacion quiero ir pasando de pagina y siempre queda en la 1 pagina 

    var grid = new
                {
                    page = 1,
                    records = lista.Count(),
                    total = lista.Count(),
                    
                    rows = from item in lista
                           select new
                           {
                               id = item.ID_PROVEEDOR,
                               cell = new string[]{                              
                                   item.RAZON,
                                   item.CUIT,
                                   item.DOCUMENTO_NRO
                               }
                           }
    
                };
    
    
                return JsonConvert.SerializeObject(grid)

    y esta la jqgrid 

    jQuery("#jQGridDemo").jqGrid({
                    datatype: 'json',                
                    //url: 'HandlerProveedores.ashx',                
                    colNames: ['RAZON', 'CUIT', 'NRO. DOCUMENTO', 'ACCIONES'],
                    colModel: [
                                //{ name: 'ID_PROVEEDOR', index: 'ID_PROVEEDOR', hidden: true, key: true },
                                { name: 'RAZON', index: 'RAZON', width: 200, sortable: true, search: true, searchoptions: { sopt: ['cn', 'eq', 'ew', 'bw'] } },
                                { name: 'CUIT', index: 'CUIT', width: 200, sortable: true, search: true, searchoptions: { sopt: ['cn', 'eq', 'ew', 'bw'] } },
                                { name: 'DOCUMENTO_NRO', index: 'DOCUMENTO_NRO', width: 200 },
                                { name: 'Acciones', index: 'Acciones', width: 250, search: false }
    
                    ],
                    rowNum: 20,
                    mtype: 'POST',
                    loadonce: true,
                    rowList: [10, 20, 30],
                    pager: '#jQGridDemoPager',
                    sortname: 'RAZON',
                    viewrecords: true,
                    sortorder: 'desc',
                    ignoreCase: true,
                    width: 'auto',
                    height: 'auto',                
                    gridComplete: function () {
                        var ids = jQuery("#jQGridDemo").jqGrid('getDataIDs');
    
                        for (var i = 0; i < ids.length; i++) {
                            var cl = ids[i];
                            var cuit = jQuery("#jQGridDemo").getCell(cl, 'CUIT');
                            var razon = jQuery("#jQGridDemo").getCell(cl, 'RAZON');
                            var dni = jQuery("#jQGridDemo").getCell(cl, 'DOCUMENTO_NRO');
    
                            if (cuit != "")
                                ver = "<a style='cursor:pointer;' onclick=\"DetalleCUIT(" + cl + "," + cuit + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
                            else if (dni != "")
                                ver = "<a style='cursor:pointer;' onclick=\"DetalleDNI(" + cl + "," + dni + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
                            else
                                ver = "<a style='cursor:pointer;' onclick=\"Detalle(" + cl + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
    
    
                            jQuery("#jQGridDemo").jqGrid('setRowData', ids[i], {
                                Acciones: ver
                            });
                        }
                    }
                });
                $("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
                    {
                        edit: false,
                        add: false,
                        del: false,
                        refresh: false,
                        search: false
    
                    }
                );
                $("#jQGridDemo").jqGrid('filterToolbar', { searchOperators: true });

    saludos

    jueves, 19 de marzo de 2015 16:56
  • hola

    pero alli no estas paginando nada

    si defines

      page = 1,
      records = lista.Count(),
      total = lista.Count(),

    y

    rows = from item in lista

    eso no es paginar

    no se de donde obtienes la lista si es que aplicas algun paginado o si usas linq con take() y skip()

    ----

     Ayuda con un filtro en JQGRID Y ASP.NET usando Webmethod

    cuando habilitas la paginascion en el webmethod deberias definir parametros para que el jqgrid envie la pagina y la cantidad de rows que necesita mostrar

    aunque no estoy seguro si usando $.ajax esto se podria lograr de forma simple, yo recuero haberlo logrado con asp.net mvc pero en ese caso se define la url al action directo sin usar $.ajax

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    jueves, 19 de marzo de 2015 18:16
  • mira este articulo

    jqGrid y Asp.net, un primer acercamiento

    alli si veras como paginar


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta efinten viernes, 20 de marzo de 2015 14:27
    jueves, 19 de marzo de 2015 18:21
  • Hola Leandro ! funciono la paginacion, lo unico que no entiendo que hace esto 

    jsonReader: {
                           // root: "Rows",
                            page: "totalpages",
                            total: "Total",
                            records: "totalrecords",
                            repeatitems: false
                           // id: "ProductID"
                        }

    asi me quedo el codigo...

    $("#btnDialog").click(function () {
                    $("#dialog").dialog({
                        autoOpen: true,
                        height: 800,
                        width: 900,
                        show: {
                            effect: "explode",
                            duration: 1000
                        },
                        hide: {
                            effect: "explode",
                            duration: 1000
                        },
                        modal: true,
                        open: function (event, ui) {
                            jQuery("#jQGridDemo").jqGrid({
                                //datatype: 'json',       
                                datatype: function (postdata) {
    
                                    var params = new Object();
                                    params.page = postdata.page;
                                    params.pageSize = postdata.rows;
    
                                    // params.sortIndex = postdata.sidx;
                                    // params.sortDirection = postdata.sord;
                                    //params.total = postdata.total;
    
                                    $.ajax({
                                        url: 'T_ESTADOSListado.aspx/GetProveedores',
                                        type: 'POST',
                                        async: false,
                                        data: JSON.stringify(params),
                                        contentType: "application/json; charset=utf-8",
                                        error: function (data, textStatus) {
                                            alert('Error loading json');
                                        },
                                        success: function (data, st) {
                                            if (st == 'success') {
    
                                                var grid = $("#jQGridDemo")[0];
                                                grid.addJSONData(jQuery.parseJSON(data.d));
    
                                            }
                                        }
                                    });
                                },                            
                                colNames: ['RAZON', 'CUIT', 'NRO. DOCUMENTO', 'ACCIONES'],
                                colModel: [
                                            //{ name: 'ID_PROVEEDOR', index: 'ID_PROVEEDOR', hidden: true, key: true },
                                            { name: 'RAZON', index: 'RAZON', width: 200, sortable: true, search: true, searchoptions: { sopt: ['cn', 'eq', 'ew', 'bw'] } },
                                            { name: 'CUIT', index: 'CUIT', width: 200, sortable: true, search: true, searchoptions: { sopt: ['cn', 'eq', 'ew', 'bw'] } },
                                            { name: 'DOCUMENTO_NRO', index: 'DOCUMENTO_NRO', width: 200 },
                                            { name: 'Acciones', index: 'Acciones', width: 250, search: false }
    
                                ],
                                rowNum: 20,
                                mtype: 'POST',
                                loadonce: false,
                                pagination: true,
                                rowList: [10, 20, 30],
                                pager: '#jQGridDemoPager',
                                sortname: 'RAZON',
                                viewrecords: true,
                                sortorder: 'desc',
                                ignoreCase: true,
                                width: 'auto',
                                height: 'auto',
                                gridComplete: function () {
                                    var ids = jQuery("#jQGridDemo").jqGrid('getDataIDs');
    
                                    for (var i = 0; i < ids.length; i++) {
                                        var cl = ids[i];
                                        var cuit = jQuery("#jQGridDemo").getCell(cl, 'CUIT');
                                        var razon = jQuery("#jQGridDemo").getCell(cl, 'RAZON');
                                        var dni = jQuery("#jQGridDemo").getCell(cl, 'DOCUMENTO_NRO');
    
                                        if (cuit != "")
                                            ver = "<a style='cursor:pointer;' onclick=\"DetalleCUIT(" + cl + "," + cuit + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
                                        else if (dni != "")
                                            ver = "<a style='cursor:pointer;' onclick=\"DetalleDNI(" + cl + "," + dni + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
                                        else
                                            ver = "<a style='cursor:pointer;' onclick=\"Detalle(" + cl + ",'" + razon + "')\"><img title='DETALLE'  src='../Imagenes/Botones/Detalles.png' border=0 ></a>";
    
    
                                        jQuery("#jQGridDemo").jqGrid('setRowData', ids[i], {
                                            Acciones: ver
                                        });
                                    }
                                }
                            });
                            $("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
                                {
                                    edit: false,
                                    add: false,
                                    del: false,
                                    refresh: false,
                                    search: false
    
                                }
                            );
                            $("#jQGridDemo").jqGrid('filterToolbar', { searchOperators: true });
    
    
                        }
                    });
                });
    Saludos

    viernes, 20 de marzo de 2015 12:41