Forum Replies Created

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts

  • Novato
    Participant

    Hi, Todor.

    Thank you very much for the example it is working very well for me.

    Thank you.


    Novato
    Participant

    Hi, Todor.

    Do you have an example that you can show me ?.

    I tried it with ‘savestate’ and ‘loadstate’ but I have not had any results

    Thank you.

    • This reply was modified 3 years ago by  Novato.

    Novato
    Participant

    Hi Todor.

    The example helped me solve my first problem. Thank you very much, but I still have the second problem and not if it is possible to do this:

    How to save the state of the selected checkbox without a database and that when refreshing the page, these are still marked?

    • This reply was modified 3 years ago by  Novato.

    Novato
    Participant

    Hello Todor, thank you very much, it is working correctly.


    Novato
    Participant

    Hi Todor, thank you very much for your help, it served me a lot and I will check if it is possible to deactivate the update when the checkbox is pressed but if it is not possible I will leave it like this.

    Thank you.


    Novato
    Participant

    Hi Todor how could I do this without using the cellbeginedit and cellsrenderer, because I am using dynamic columns.

    I also want to ask you if it is possible that by clicking on the checkbox this does not update my data.

      In summary I want that by clicking on any checkbox in my checkbox column this disables the edit button so that the data can no longer be updated without updating the data by itself when clicking on the checkbox.

    Thank you.

    Here I put my code.

    
    
    function obtener_datos() {
    
        var persona = $("[id*=ddlPersona]").val();
        var Sucursal = "";
     
        if (persona != 0) {
           
            var valores;
            var datafields = new Array();
            var columns = new Array();
            var columnsArray = [];
          
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "frmPersona.aspx/Intervalo",
                contentType: "application/json; charset=utf-8",
                data: '{id_persona:"' + persona + '",Sucursal:"' + Sucursal + '"}',
                async: false,
    
                success: function(data) {
    
                    if (data != '') {
              
                        valores = JSON.parse(valores[0]);
    
                        for (var i in valores[0]) {
                            datafields.push({ name: i, type: 'string' });
                            columns.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 });
                           
                        }
    
                        for (var j = 1; j < columns.length; j++) {
                            columnsArray.push(columns[j]);
                          
                        }
    
                    }
    
                    var gridSource =
                    {
    
                        datatype: "json",
                        datafields: datafields,
                        localdata: valores, 
                        async: false,
                        updaterow: function(rowid, rowdata, commit) {
    
                         
                                             var id = $("#gvDatos").jqxGrid('getrowdata', rowid);
                                             var id_fila = id.id_Persona;
    
                            var usuario = "";
                         
    
                            $.ajax({
                                type: "POST",
                                datatype: "json",
                                url: "frmPersona.aspx/Actualiza_Persona_Bono",
                               // contentType: "application/json; charset=utf-8",
                                data: 
                                                          '{id_bonos:"' + id_fila +
                                                          '",Total_porcentaje:"' + $("#txtTotal_BonoPorcentaje").val() +
                                                          '",Total_pesos:"' + $("#txtTotal_BonoPesos").val() +
                                                          '",Total_porcentaje:"' + $("#txtTotal_GarantizadoPorcentaje").val() +
                                                           '"}',
    
                                async: false,
                                success: function(data, status, xhr) {                            
                                 
                                    commit(true);
                                },
                                error: function(error) {
                                    alert(error.responseText);
                                    console.log(error.responseText);
                                    jsonValue = jQuery.parseJSON(Error.responseText);
                                    alert(error.respose.Text);
                                    alert("Error");
                                }
                            });
    
                        }
    
                    };
    
                    var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
    
                    var editrow = -1;
    
                    columnsArray.push({ text: 'Edit', datafield: 'Edit', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, columntype: 'button', cellclassname: "color_especial",  
                        cellsrenderer: function() { },
                        buttonclick: function(row) {
    
                            editrow = row;
                           
                            var dataRecord = $("#gvDatos").jqxGrid('getrowdata', editrow);
    
                            var nombre_col_Total_bono_porcentaje = $("#gvDatos").jqxGrid('getcolumnat', 12).datafield;
                            var nombre_col_Total_bono_pesos = $("#gvDatos").jqxGrid('getcolumnat', 13).datafield;
                            var nombre_col_Total_garantizado_porcentaje = $("#gvDatos").jqxGrid('getcolumnat', 14).datafield;                    
    
                          
                            $("#txtTotal_BonoPorcentaje").val(dataRecord[nombre_col_Total_bono_porcentaje]);
                            $("#txtTotal_BonoPesos").val(dataRecord[nombre_col_Total_bono_pesos]);
                            $("#txtTotal_GarantizadoPorcentaje").val(dataRecord[nombre_col_Total_garantizado_porcentaje]);
                            
    
                         //Popup bootstrap display data in the input text. 
                           $("#Popup_Actualizar").modal('show');
                        }
                    });
    			
    				//******************     Here I put my checkbox type column     *********************************************//
    				 columnsArray.push({ text: 'Aprobar', datafield: 'Aprobar', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, threestatecheckbox: false, columntype: 'checkbox', type: 'bool' });
    
                    $("#gvDatos").jqxGrid({
                        source: gridDataAdapter,
    					editable:true,
                        width: '100%',
                        columnsresize: true,
                        autoheight: false,
                        autorowheight: false,
                        pageable: true,
                        showfilterrow: true,
                        filterable: true,
                        rowdetails: true,
                        initrowdetails: initrowdetails_BI2,
                        rowdetailstemplate: { rowdetails: "<div id='grid' style=' margin: 10px; '></div>", rowdetailsheight: 250, rowdetailshidden: true },
                     
                        handlekeyboardnavigation: function(event) {
                            var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                            if (key == 13) {
                               
                                return true;
                            }
                            else if (key == 27) {
                             
                                return true;
                            }
                        },
    
                        columns: columnsArray
    
                    });
    
                   //Button html input type button 
                    $("#btnActualizar").click(function() {
    
                        if (editrow >= 0) {
    
                            var row = {
                                                    
                                "Total Bono %": $("#txtTotal_BonoPorcentaje").val(),
                                "Total Bono $": $("#txtTotal_BonoPesos").val(),
                                "Total Garantizado %": $("#txtTotal_GarantizadoPorcentaje").val(),                        
    
                                  };
    
                            var rowID = $('#gvDatos').jqxGrid('getrowid', editrow);
                            var id_bonos_fila = rowID;
                            console.log("Este es id_bonos_fila: ", id_bonos_fila);
    
                            $('#gvDatos').jqxGrid('updaterow', id_bonos_fila, row);
    
                            $("#Popup_Actualizar").modal('hide');
    
                        }
                    });
    
                },
    
                error: function(error) {
                    alert(error.responseText);
                    console.log(error.responseText);
                    jsonValue = jQuery.parseJSON(Error.responseText);
                    alert(error.respose.Text);
                    alert("Error");
                }
            });
    
        }
        else {
          
            $('#PopupDatos').modal('show');
        }
    }
    
    

    Novato
    Participant

    Hello Hristo, thank you for your answer, my situation is what you show in the example that you sent me.

    Use setcellvalue to update my rows since as you mention with updaterow I have to pass also the rows that are not updated. But unlike updaterow setcellvalue calls my database for every cell that is updated.

    Thank you.


    Novato
    Participant

    Hi Hristo, thank you very much it works perfect


    Novato
    Participant

    Hello Hristo I have placed async: false as you said and clicking on the first row of my main grid shows me the nested grid. But when I click on my second row of the main grid it shows me a gray line. This is my code

    var columnsArray = [];
    var datafields_detalle = new Array();
    var colums_detalle = new Array();
    var valores_detalle;
    var _nesteddatafield = new Array();
    var _nestedColums = new Array();
    
    /******************************************* Main grid functions ****************************************************/////
    
    function obtener_intervalo() {
                   var id_Intervalo = 1;
                    var Sucursal = "";
                    var id_Rol = 1;
    
                    if (id_Intervalo != 0) {
                       
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "frmBI.aspx/ListarIntervalo",
                            contentType: "application/json; charset=utf-8",
                            data: '{id_Intervalo:"' + id_Intervalo + '",Sucursal:"' + Sucursal + '",id_Rol:"' + id_Rol + '"}',
                            async: false,
    
                            success: function(data) {
                                
                                Datasourcefuncion(data.d);
                            },
    
                            error: function(error) {
                                alert(error.responseText);
                                console.log(error.responseText);
                                jsonValue = jQuery.parseJSON(Error.responseText);
                                alert(error.respose.Text);
                                alert("Error");
                            }
                        });
                    }
                    else
                        alert("error en id_intervalo");
                    return false;
    
                }
        
              
    function Datasourcefuncion(data) {
    
      
        var datafields_bonos = new Array();
        var columns_bonos = new Array();
       
    
        if (data != '') {
           valores = jQuery.parseJSON(data);   
    
                   for (var i in valores[0]) {
                       datafields_bonos.push({ name: i });
                       columns_bonos.push({ text: i, datafield: i, width: 200 });
                   }
    
                   for (var j = 1; j < columns_bonos.length; j++) {                   
                       columnsArray.push(columns_bonos[j]);
                   }
                                 
            }
    
                var source =
                {
                    datatype: "json",
                    id: "id_Bonos",
                    datafields: datafields_bonos, 
                    localdata: valores             
    
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
                rellenar_grid(dataAdapter);
                
            }
    
    function rellenar_grid(dataAdapter) {
    
        $("#gvDatosBI").jqxGrid(
                {
        
                    width: 1000, //1600,
                    columnsresize: true,
                    autoheight: true,
                    autorowheight: true,
                    autoheight: true,
                    altrows: true,
                    rowsheight: 35,
                    rowdetails: true,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 130, rowdetailshidden: true },
                    initrowdetails: initrowdetails,                             
                    ready: function() {
                        $("#gvDatosBI").jqxGrid('showrowdetails');
                                    },                
                    source: dataAdapter,
                    columns: columnsArray,
                   
                    pageable: true,
                    sortable: true,
                    filterable: true,       
    
                });
    }
    
     /********************************************************** secondary grid functions *********************************************************/
    
    function obtener_intervalo_detalle(id) {
    
        if (id != 0) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "frmBI.aspx/ListarIntervalo_Detalle",
                contentType: "application/json; charset=utf-8",
                data: '{id_bono:"' + id + '"}',
                async: false,
    
                success: function(data) {
                    // alert(data.d);
                    DatasourcefuncionDetalle(data.d);
    
                },
    
                error: function(error) {
                    alert(error.responseText);
                    console.log(error.responseText);
                    jsonValue = jQuery.parseJSON(Error.responseText);
                    alert(error.respose.Text);
                    alert("Error");
                }
            });
            }
            else
                alert("error en id_bonos");
            return false;
    
        }
    
    function DatasourcefuncionDetalle(data) {
    
        if (data != '') {
           valores_detalle = jQuery.parseJSON(data);
                                   
                for (var i in valores_detalle[0]) {
           
                    datafields_detalle.push({ name: i });
                    colums_detalle.push({ text: i, datafield: i, width: 200 });
                    //console.log(colums_detalle);
                }
                nesteddatafield = datafields_detalle;
                nestedColums = colums_detalle;     
    
            }
    
     }
    
    /**********************************************************************************************************************************************/
    
    var initrowdetails = function(index, parentElement, gridElement) {
            var row = index;
            var id = $("#gvDatosBI").jqxGrid('getrowdata', row)['id_Bonos'];
            obtener_intervalo_detalle(id);    
            var grid = $($(parentElement).children()[0]);
       
        var source_nested =
                           {                          
                               datafields: _nesteddatafield, //datafields_detalle,
                               localdata: valores_detalle
                           }
                           var adapter = new $.jqx.dataAdapter(source_nested);
                          
        if (grid != null) {
           
                grid.jqxGrid({
                    source: adapter, height: 180, width: 800,                           
                    columns: _nestedColums 
                });
        }
    
    }
    <code></code>
    
    In the console shows this error
    
    

    Uncaught Error: jqxGrid: Invalid column ‘datafield’ setting. jqxGrid’s columns should be initialized with unique data fields.
    at Object.<anonymous> (jqxgrid.js:7)
    at Function.each (jquery-1.11.1.min.js:2)
    at b.(anonymous function)._initializeColumns (http://localhost:58646/scripts/jqxgrid.js:7:178361)
    at b.(anonymous function)._render (http://localhost:58646/scripts/jqxgrid.js:7:74805)
    at b.jqx.dataview.dataview.update (jqxgrid.js:7)
    at k (jqxgrid.js:7)
    at b.jqx.dataview.databind (jqxgrid.js:7)
    at b.(anonymous function).databind (http://localhost:58646/scripts/jqxgrid.js:7:51857)
    at b.(anonymous function).createInstance (http://localhost:58646/scripts/jqxgrid.js:7:9518)
    at Object.a.jqx.applyWidget (jqxcore.js:7)`


    Novato
    Participant

    hi hristo my problem with the nested grid is that it does not show me the data correctly. When I select the button of the first row to see the nested grid of each row it shows me blank but in my web method it sends me the corresponding data. When I click on the second row to see the nested grid it shows me the data of the first row that I clicked on. when I click on the third row it shows nothing and the other cells.


    Novato
    Participant

    Hello these messages appear to me in the console

    Uncaught Error: jqxGrid: Invalid column 'datafield' setting. jqxGrid's columns should be initialized with unique data fields.
        at Object.<anonymous> (jqxgrid.js:7)
        at Function.each (jquery-1.11.1.min.js:2)
        at b.(anonymous function)._initializeColumns (http://localhost:58646/scripts/jqxgrid.js:7:178361)
        at b.(anonymous function)._render (http://localhost:58646/scripts/jqxgrid.js:7:74805)
        at b.jqx.dataview.dataview.update (jqxgrid.js:7)
        at k (jqxgrid.js:7)
        at b.jqx.dataview.databind (jqxgrid.js:7)
        at b.(anonymous function).databind (http://localhost:58646/scripts/jqxgrid.js:7:51857)
        at b.(anonymous function).updatebounddata (http://localhost:58646/scripts/jqxgrid.js:7:69901)
        at b.(anonymous function).propertyChangedHandler (http://localhost:58646/scripts/jqxgrid.js:7:202849)

    The second grid shows it to me with the data but it keeps loading. I will read the articles you gave me. Can you tell me how to hide the second grid and show it remembering that it is a nested grid? Thank you.

Viewing 11 posts - 16 through 26 (of 26 total)