jQuery UI Widgets › Forums › ASP .NET MVC › Updatebounddata does not work
This topic contains 3 replies, has 2 voices, and was last updated by Hristo 3 years, 2 months ago.
-
Author
-
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.
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 HristovjQWidgets team
https://www.jqwidgets.comHi 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 3 years, 2 months ago by Novato. Reason: edit code
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 theget_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 theupdatebounddata
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 thesuccess
callback of the AJAX –gridSource.localdata = data;
.
After that use theupdatebounddata
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 thedata
member and especiallyformatData
callback where you could set needed settings when clicking on the button to update.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.