Render toolbar more times

[nico77Participant]

Good evening to everyone,

I’ve two functions that fill a grid and set a toolbar.
First function fill the table with some data and create a button on toolbar, with this button i call the second function that load new data using a key of the selected row and then it should rendering the toolbar, changing the text of button and the code handled, but the toolbar doesn’t refresh.
Here is the code:

function carica_riepilogo_buste(anno,mese) {

    var url = "riepilogobuste.php?anno=" + anno + "&mese=" + mese ;
    

    // prepare the data
      var source_result =
            {
                datatype: "json",
                datafields: [
                    { name: 'id_busta', type: 'int' },
                    { name: 'mese', type: 'string' },
                    { name: 'anno', type: 'string' },
                    { name: 'totale', type: 'decimal' },         
                    { name: 'note', type: 'string' },
                ],
                url: url
            }; //Fine source
            
            
            var dataAdapter = new $.jqx.dataAdapter(source_result,{}
                );//fine dataadapter
            

                    
            $("#jqxgrid").jqxGrid(
            {
                width: 802,
                height: 700,
                rowsheight: 25,
                altrows: true,
                source: dataAdapter,
                columnsresize: true,
                theme:"orange",
                showtoolbar: true,
                localization: getLocalization('it-IT'),
                
                rendertoolbar: function (toolbar) {
                    var me = this;
                    
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="dettaglioButton" type="button" value="Dettaglio" />');
                    $("#dettaglioButton").jqxButton({ template: "primary"});
                    $("#dettaglioButton").on('click', function () {
                        var getselectedrowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
                            if (getselectedrowindexes.length > 0)
                            {
                                selectedRowData = $('#jqxgrid').jqxGrid('getrowdata', getselectedrowindexes[0]);
                                
                            }
                            carica_dettaglio_busta(selectedRowData.id_busta)
                         
                    });
                    
                },
                
                columns: [
                  //{ text: 'user', datafield: 'user', hidden:true }, 
                  { text: 'Mese', datafield: 'mese', width: 120},
                  { text: 'Anno', datafield: 'anno',cellsalign: 'center', width: 80},     
                  { text: 'Totale', datafield: 'totale', cellsalign: 'center',cellsformat:'c2', width: 140},
                  { text: 'Note', datafield: 'note',cellsalign: 'center', width: 250 },
                  { text: 'Dettaglio',cellsalign: 'center', width: 70 },
                  { text: 'Modifica', cellsalign: 'center', width: 70 },
                  
                  
              ]
            }); //fine grid
    

    
}//fine carica_riepilogo_buste

function carica_dettaglio_busta(id_busta) {

    var url = "dettaglio.php?id=" + id_busta;
    

    // prepare the data
      var source_result =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'int' },
                    { name: 'codice', type: 'int' },
                    { name: 'denominazionebusta', type: 'string' },
                    { name: 'clorde', type: 'decimal' },
                    { name: 'ritenute', type: 'decimal' },         
                    { name: 'cnette', type: 'decimal' },
                    { name: 'image',type: 'string' },
                ],
                url: url
            }; //Fine source
            
            
            var dataAdapter = new $.jqx.dataAdapter(source_result,
                {
                    
                    beforeLoadComplete: function (records) {
                            for (var i = 0; i < records.length; i++) {
                                records[i].image = 'mod.png';
                            };
                            return records;
                        }
    
                });//fine dataadapter
            
            
            var imagerenderer = function (row, datafield, value) {
                return '<img onclick="caricafinestra" title="' + row + '" style="margin-left: 15px;"  height="20" width="20" align="middle" src="../imm/' + value + '"/> <a href></a>';

            }
            
            

                    
            $("#jqxgrid").jqxGrid(
            {
                width: 802,
                height: 700,
                rowsheight: 25,
                altrows: true,
                source: dataAdapter,
                columnsresize: true,
                theme:"orange",
                showtoolbar: true,
                localization: getLocalization('it-IT'),
                
                rendertoolbar: function (toolbar) {
                    var me = this;
                    
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="ModificaBustaButton" type="button" value="Modifica" />');
                    $("#ModificaBustaButton").jqxButton({ template: "primary"});
                    $("#ModificaBustaButton").on('click', function () {
                        var getselectedrowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
                            if (getselectedrowindexes.length > 0)
                            {
                                selectedRowData = $('#jqxgrid').jqxGrid('getrowdata', getselectedrowindexes[0]);
                                
                            }

                         
                    });
                    
                },
                
                columns: [
                  //{ text: 'user', datafield: 'user', hidden:true }, 
                  { text: 'Codice', datafield: 'codice', width: 80},
                  { text: 'Descrizione', datafield: 'denominazionebusta',cellsalign: 'left', width: 300},     
                  { text: 'Lordo', datafield: 'clorde', cellsalign: 'right',cellsformat:'c2', width: 120},
                  { text: 'Ritenute', datafield: 'ritenute',cellsalign: 'right',cellsformat:'c2', width: 120 },
                  { text: 'Netto',datafield: 'cnette',cellsalign: 'right',cellsformat:'c2', width: 120 },
                  { text: 'Modifica',datafield: 'image',cellsalign: 'center', width: 565, cellsrenderer: imagerenderer  },
                  
                  
              ]
            }); //fine grid
    
    $('#jqxgrid').jqxGrid('render');
    
}//fine funzione carica_dettaglio

Thank you to everyone.

[DimitarParticipant]

Hello nico77,

First of all, please note that the grid initialization code should be called only once. Afterwards, you should only update the necessary properties or the grid’s source.

As for the issue you are facing – on the call of the second function (i.e. carica_dettaglio_busta) you can only do the following to update the button’s text and action on click:

function carica_dettaglio_busta(id_busta) {

    ...

    $('#dettaglioButton').attr('value', 'Modifica');
    $('#dettaglioButton').off('click');
    $("#dettaglioButton").on('click', function() {
        var getselectedrowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
        if (getselectedrowindexes.length > 0) {
            selectedRowData = $('#jqxgrid').jqxGrid('getrowdata', getselectedrowindexes[0]);

        }
    });
}

Basically, you should be using the button created initially. Only its value and click handler should be changed.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts