jQuery UI Widgets Forums ASP .NET MVC Update with popup editing does not update in the database

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 2 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Novato
    Participant

    Hi, I hope you can help me with these two problems that I have using jqxgrid.

    My problem number one is that I am using jqxgrid to edit with popup when I click on a button in the jqxgrid. I have 6 rows in total and I only update 3, when updating only the data of the 3 updated columns are shown, the other data of that same row that were not updated disappear and are not displayed in the jqxgrid.

    My second problem is that the updated data is not updated in the database. When consulting the database, these data are not updated.

    I am working with dynamic columns but I have read the documentation and it does not work out here I put the code I hope you can help me thank you.

    
    
    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_Bonos;
    
                            var usuario = "";
                         
    
                            $.ajax({
                                type: "POST",
                                datatype: "json",
                                url: "frmBI2.aspx/Actualiza_Bonos",
                               // contentType: "application/json; charset=utf-8",
                                data: 
                                                          '{id_bonos:"' + id_fila +
                                                          '",Total_bono_porcentaje:"' + $("#txtTotal_BonoPorcentaje").val() +
                                                          '",Total_bono_pesos:"' + $("#txtTotal_BonoPesos").val() +
                                                          '",Total_garantizado_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: 'Editar', 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');
                        }
                    });
    
                    $("#gvDatos").jqxGrid({
                        source: gridDataAdapter,
                        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_Mensaje').modal('show');
        }
    }
    
    

    Hristo
    Participant

    Hello Novato,

    I would like to mention that the initialization from the function could be very dangerous.
    You should be sure that happens just once (the initialization of the jqxGrid).

    About the second question, it is not relevant to our library.
    You could fetch each one row or all rows at once and send to the server on a preferable way (with AJAX, too).
    If you have some doubts about the updaterow” callback of the DataAdapter’s source this callback only update the UI (the jqxGrid) when you confirm that.
    With commit(true) you accept the changes and with commit(false) refuse it.

    If I understand you well then this example should explain why this happens.
    You miss the data of one rows for other columns that are not changed because with updaterow method you should provide whole data for this particular row.
    Otherwise, you could use setcellvalue to update each one cell separately (also you could use the setcellvaluebyid).
    I would like to ask you to provide us with a simplified example that demonstrates only the first behavior.
    Please, try to do the mentioned suggestions and then try to reproduce it in one jsfiddle example if you still have a troubles.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    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.


    Hristo
    Participant

    Hello Novato,

    You could provide a whole data for one row to prevent this behavior.
    Because if there is no value for each one field then they will have an empty cell for these columns.
    In this case, you could get the whole data for each one row with getrowdata method (getrowdatabyid” method also) and to set required data for missed fields.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.