Updatebounddata does not work

[NovatoParticipant]

Hello community I hope you can help me with this problem thanks.

I have a main grid that is displayed when consulting the data of my web application.

In this main grid I have two important columns.

First column: The column is called status and is automatically updated from the database when a new record is added.

Second column: The column is called add, it is a column of buttons where a modal is shown with the data from the main grid, the data is modified and added to the database in a different table.

My problem is the following.

I want to update my jqxgrid to see the new status but the grid is not updated. I can observe the status when reloading the page and looking for the record.

The functions I use to update my grid are the following but none work for me.

$('#gvData').jqxGrid('updatebounddata');
$('#gvData').jqxGrid('updatebounddata', 'cells');

Do you know how to solve this problem?

I work with asp.net c # webforms and ajax jquery.

[HristoParticipant]

Hello Novato,

It should work in the mentioned way.
I also, test it and it seems to work fine this approach:
http://jsfiddle.net/nwapxhob/
Is there any error message in your environment.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NovatoParticipant]

Hi Hristo.

I don’t have any console errors when running updatebounddata.

What I have seen in your example and in the documentation for this to work are these two lines.

    source.localdata = generatedata(10);
    $("#jqxgrid").jqxGrid("updatebounddata", "cells");

In your example, commenting on this line and executing it does not update the data.

    //** source.localdata = generatedata(10); // commented line
    $("#jqxgrid").jqxGrid("updatebounddata", "cells");

In my case I only put this line that is why it does not work.

$("#gvData").jqxGrid("updatebounddata", "cells");

This is my complete code, I work with dynamic columns and step parameters. As I mentioned above when using the function to update my grid it is not updated, I still see the same status after inserting. I can see the new status only if I refresh the page and check the data again.

Can you tell me how I can use your function to update the grid?

Thank you very much.

function get_information() {

    var person = $("[id*=ddlPerson]").val(); //dropdownlist person
    var Branch = "";
 
    if (persona != 0) {
              
	var values;
        var datafields = new Array();
        var columns = new Array();
        var columnsArray = [];
      
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmPerson.aspx/Information_person",
            contentType: "application/json; charset=utf-8",
            data: '{id_person:"' + person + '",Sucursal:"' + Branch + '"}',
            async: false,

            success: function(data) {

                if (data != '') {
          
                    values = JSON.parse(values[0]);
				
	/**************************************  This is my dinamyc columns    ***********************************************************/
                    for (var i in values[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: values, 
                    async: false
                   
                };

                var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

                var editrow = -1;

                columnsArray.push({ text: 'Add', datafield: 'Edit', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, columntype: 'button', cellclassname: "color_especial",  
                    cellsrenderer: function() { },
                    buttonclick: function(row) {

                        editrow = row;
                       
    /*******************  Here I get the data I just put some data as an example ***************/
	
						 var datarecord = $("#gvData").jqxGrid('getrowdata', editrow);

                        var person_name = $("#gvData").jqxGrid('getcolumnat', 1).datafield;
                        var person_age = $("#gvData").jqxGrid('getcolumnat', 2).datafield;
					    var payment1 = $("#gvData").jqxGrid('getcolumnat', 3).datafield;
						var payment2 = $("#gvData").jqxGrid('getcolumnat', 4).datafield;
						var payment3 = $("#gvData").jqxGrid('getcolumnat', 5).datafield;			
                      
                        $("#txtName_Person").val(dataRecord[name_person]);
                        $("#txtAge_Person").val(dataRecord[age_person]);
						$("#txtPayment1").val(dataRecord[payment1]);
						$("#txtPayment2").val(dataRecord[payment2]);
						$("#txtPayment3").val(dataRecord[payment3]);
                    
                     //Popup bootstrap display data in the input text. 
                       $("#Popup_AddData").modal('show');
                    }
                });
			

                $("#gvData").jqxGrid({
                    source: gridDataAdapter,
	            editable:false,
                    width: '100%',
                    columnsresize: true,
                    autoheight: false,
                    autorowheight: false,
                    pageable: true,
                    showfilterrow: true,
                    filterable: 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
                });
				
				
	//******  This is the button to add the data to the database this button is within the modal *********//
				
          $("#btnAcept").click(function() {
					 
		$.ajax({
                        type: "POST",
                        datatype: "json",
                        url: "frmPerson.aspx/Payment_person",
                        contentType: "application/json; charset=utf-8",
                        data: '{person_name:"' + $("#txtName_Person").val() + '",person_age:"' + Number(("#txtAge_Person").val())+ '",payment1:"' + Number(("#txtPayment1").val()) + '",payment2:"' + Number(("#txtPayment2").val()) + '",payment3:"' + Number(("#txtPayment2").val()) + '"}',
                        cache: false,
                        success: function(data) {
                           
		 //******** here I update my grid but it doesn't update me ******//
			
                    $('#gvData').jqxGrid('updatebounddata');
		//$('#gvData').jqxGrid('updatebounddata', 'cells');						   
						   
                        },
                        error: function(error) {
                            alert(error.responseText);
                            console.log(error.responseText);
                            jsonValue = jQuery.parseJSON(Error.responseText);
                            alert(error.respose.Text);
                            alert("Error");
                        }
                    }); 
			 
					 
		});

            },

            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }
        });

    }
   
}

• This reply was modified 1 year, 10 months ago by  Novato. Reason: edit code

[HristoParticipant]

Hello Novato,

I saw a few things that you could clear or check.
For example, the initialization of the widget should happen just once.
In your case the jqxGrid is created in the get_information function – you could check to be invoked that function just once.
You could create it outside of it and just use the methods to update it.
About the updatebounddata method you do not set any new data in your DataAdapter’s source – gridSource.localdata = values.
Maybe you already saw that how in previous example I update the jqxGrid.
This you should do in the success callback of the AJAX – gridSource.localdata = data;.
After that use the updatebounddata method.

Or another option if you load data from the server you could bind directly the DataAdapter vie url member to it.
I would like to mention that the jqxDataAdapter is as a wrapper for the AJAX and you could use it in the same way.
Also, I would like to suggest you look at this tutorial which demonstrates how you could send extra variables.
You could check the data member and especially formatData callback where you could set needed settings when clicking on the button to update.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts