jQuery UI Widgets Forums TreeGrid databind and updatebounddata do not work

This topic contains 4 replies, has 3 voices, and was last updated by  Peter Stoev 1 year, 8 months ago.

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

  • CXXXV
    Participant

    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'
    	
                };

    admin
    Keymaster

    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/


    CXXXV
    Participant

    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},
                    ]
    
                });	

    CXXXV
    Participant

    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 Stoev
    Keymaster

    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/

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

You must be logged in to reply to this topic.