databind and updatebounddata do not work

[CXXXVParticipant]

I have looked at a number of examples. Tried many combinations. However, I can’t get the treegrid to refresh.

dataAdapter.dataBind();	
$("#treeGrid").jqxTreeGrid('updatebounddata');	

It appears that the SOURCE is not refreshed to fetch new records.

            var source =
            {
                dataType: "json",
                dataFields: [
                        { name: 'MENID' },
                        { name: 'DESCRIPTION' }
                ],
                id: 'MENID',
				url: 'get_menus.php'
	
            };

[adminKeymaster]

Hi CXXXV,

jqxTreeGrid does not have such method in its API. The method’s correct name is: “updateBoundData”. By calling it, this will do the following: call the bound adapter’s dataBind() method. When the binding is complete, the TreeGrid will be re-rendered. The same can be achieved by setting the “source” property to to a new dataAdapter instance.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[CXXXVParticipant]

The whole code, still does not work

            var source =
            {
                dataType: "json",
                dataFields: [
                        { name: 'MENID' },
                        { name: 'DESCRIPTION' }
                ],
                id: 'MENID',
				async: false,
				url: 'get_menus.php',
	
            };
			
            var dataAdapter = new $.jqx.dataAdapter(source);
			

            $("#treeGrid").jqxTreeGrid(
            {
                width: 280,
				height: 762,
                source: source,
				altRows:true,
				theme:'energyblue',
				showtoolbar: true,
				columnsHeight: 20,
    				
				
				rendertoolbar: function (toolbar) {

					var container = $("<div style='margin: 5px;'></div>");
					toolbar.append(container);
					container.append('<input id="adddmenubutton" type="button" value="Add New Menu" />');	

					
					$("#adddmenubutton").on('click', function () {
					
					PurePopup.prompt({ 
						  title: "Enter new menu", 
						  buttons: {okButton: 'Ok', cancel: 'Cancel'}, 
						  inputs: {menuVal: 'MENU: '}, 
						  vals: {menuVal: ''}, 
						},				
					
						function(result) {			
							if (result.confirm == 'okButton') {
							
								jQuery.ajax({
								type: 'POST',
								url: 'insert_new_menu.php',
								datatype: 'json',
									 data:{
											MNAME:result.menuVal
										  },
											 success: function(result){
											 console.log(result);
										   }		  
								});	
								
								$("#treeGrid").jqxGrid('updateBoundData');	
								
							}
						}
					);							
					
					
                    });			
				},	

                columns: [
                  { text: 'MENU',  dataField: 'DESCRIPTION', width: 262},
                ]

            });	

[CXXXVParticipant]

Anotehr strange issue. WHen examinig the source it has two sets of datafields and no records. Clearly there are records because I can see them on the page.

[object Object]
   {
      [functions]: ,
      __proto__: {
         [functions]: ,
         __proto__: { }
      },
      _bindingUpdate: [
         length: 0
      ],
      _downloadComplete: [
         length: 0
      ],
      _options: {
         [functions]: ,
         __proto__: { },
         async: false
      },
      _source: {
         [functions]: ,
         __proto__: { },
         async: false,
         dataFields: [
            0: {
               [functions]: ,
               __proto__: { },
               name: "MENID",
               type: "number"
            },
            1: {
               [functions]: ,
               __proto__: { },
               name: "DESCRIPTION",
               type: "string"
            },
            length: 2
         ],
         datafields: [
            0: {
               [functions]: ,
               __proto__: { },
               name: "MENID",
               type: "number"
            },
            1: {
               [functions]: ,
               __proto__: { },
               name: "DESCRIPTION",
               type: "string"
            },
            length: 2
         ],
         dataType: "json",
         datatype: "json",
         id: "MENID",
         loadallrecords: true,
         record: "",
         recordendindex: 0,
         recordstartindex: 0,
         root: "",
         url: "get_menus.php"
      },
      records: [
         length: 0
      ]
   }

[Peter StoevKeymaster]

Hi CXXXV,

The code shows a calling of a method of jqxGrid, not jqxTreeGrid. What do you try to achieve exactly? This AJAX call finishes after you call “updateBoundData” of another widget. I think that this should be changed to creating a new jqxDataAdapter instance which handles the AJAX call. Setting the dataAdapter instance as a source of the treeGrid, not the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts