jQuery UI Widgets Forums Grid dataadapter not updating with new row data

This topic contains 4 replies, has 3 voices, and was last updated by  Peter Stoev 6 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • dataadapter not updating with new row data #96215

    Ixzion
    Participant

    Hello there,

    I have code which looks like this:

    $(document).on('click', '.employees_link', function () {
    			     $('#employees_chart').show();
    
    			     var id = $(this).data('id');
    
    			     $("#location_title").html(window.CW_Sites[id]['name']);
    
    				 var iCount = 0;
    
    			     var emps = window.CW_Sites[id]['employees'];
    			     rows = [];
    
                    for(x in emps) {
                    	iCount++;
                    	name = "<a href=\"/directory/?search="  + emps[x].userid + "\">" + emps[x].fullname + "</a>";
                    	rows.push({"name": name, "title": emps[x].title, "supervisor": emps[x].supervisor, "phone": emps[x].number, "usertype": emps[x].usertype, "email": emps[x].email});
                    }
    
    	            // prepare the data
    	            var source_emp =
    	            {
    	                datatype: "json",
    	                id: 'id',
    	                localdata: rows,
    					pagesize: 10
    	            };
    	            
    	            var dataAdapter_emp = new $.jqx.dataAdapter(source_emp, {
    	                downloadComplete: function (data, status, xhr) {},
    	                loadComplete: function (data) {},
    	                loadError: function (xhr, status, error) { },
    	                formatData: function (data) {
    	                }
    	            });
    
    	            var cellsrenderer = function (row, column, value, defaultHtml) {
    
    	                var element = $(defaultHtml);
    	                
    	                if (dataAdapter_emp.loadedData[row]['usertype'] == "Contingent Worker") {
    	                    element.attr({ 'class': 'contingent_worker_row' });
    	                    return element[0].outerHTML;
    	                }
    	                return defaultHtml;
    	            }
    
    	            $("#jqxgrid_employees").jqxGrid(
    	            {
    	                width: '100%',
    	                source: source_emp,
    					filterable: true,
    					sortable: true,
    					pageable: true,
    					autoheight: true,
    					autorowheight: true,
    					enablebrowserselection: true,
    	                columns: [ 
    	                	{ text: 'Name', datafield: 'name', width: '25%', cellsrenderer: cellsrenderer, hidden: false}, 
    	                	{ text: 'Title', datafield: 'title', width: '30%', cellsrenderer: cellsrenderer, hidden: false},
    	                	{ text: 'Supervisor', datafield: 'supervisor', width: '25%', cellsrenderer: cellsrenderer, hidden: false},
    	                	{ text: 'Phone', datafield: 'phone', width: '15%', cellsrenderer: cellsrenderer, hidden: false},
    	                	{ text: 'Email', datafield: 'email', width: '5%', cellsrenderer: cellsrenderer, hidden: false}
    	                ],
    				  pagesizeoptions: ['10', '15', '20', '25', '50'],
    				  selectionmode: 'none',
    				  altrows: true,
    				  filtermode: 'excel'
    	            });
    
    	            $('.orgchart_table').html("<b>Total Employees: " + iCount + "</b><br>");
    				return false;
    
    			 });

    Basically, every time someone clicks on a link, I intend the function to create/update the grid with a new set of data. When it updates, I want it to run the cellsrenderer and change the color of rows that match ‘Contingent Worker’.

    This works until I add the cellsrenderer part to this. It will only perform cellrenderer on the first set of data that you click on and ignores everything else. I’ve found that under dataAdapter_emp.loadedData, the dataadapter never gets the updated records, even though the grid itself will show the new records.

    Also, any time I click on a new record past that, I get this error: TypeError: dataAdapter_emp.loadedData[row] is undefined

    What am I doing wrong here?

    dataadapter not updating with new row data #96217

    admin
    Keymaster

    Hi Ixzion,

    Because, the binding is One-Way from the Adapter to the Grid. The Grid rows are accessible through the “getrows” method.

    Regards,
    Peter

    dataadapter not updating with new row data #96222

    Ixzion
    Participant

    Hi Peter,

    Thanks for the quick response.

    What would be the correct way to accomplish what I’m trying to do here?

    dataadapter not updating with new row data #96223

    Ixzion
    Participant

    Okay, I managed to solve my problem. I went to this page:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm

    and looked at the section entitled Dynamic Data Refresh. Now my code looks like this:

    // Initialize employees grid
    			// prepare the data
                var source_emp =
                {
                    datatype: "json",
                    id: 'id',
                    localdata: [],
    				pagesize: 10
                };
    	            
    
    			var dataAdapter_emp = new $.jqx.dataAdapter(source_emp, {
                    downloadComplete: function (data, status, xhr) {},
                    loadComplete: function (data) {},
                    loadError: function (xhr, status, error) { },
                    formatData: function (data) {
                    }
                });
    
                dataAdapter_emp.dataBind();
    
                var cellsrenderer = function (row, column, value, defaultHtml) {
    
                    var element = $(defaultHtml);
    
                    if (dataAdapter_emp.loadedData[row]['usertype'] == "Contingent Worker") {
                        element.attr({ 'class': 'contingent_worker_row' });
                        return element[0].outerHTML;
                    }
                    return defaultHtml;
                }
    
                $("#jqxgrid_employees").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter_emp,
    				filterable: true,
    				sortable: true,
    				pageable: true,
    				autoheight: true,
    				autorowheight: true,
    				enablebrowserselection: true,
                    columns: [ 
                    	{ text: 'Name', datafield: 'name', width: '25%', cellsrenderer: cellsrenderer, hidden: false}, 
                    	{ text: 'Title', datafield: 'title', width: '30%', cellsrenderer: cellsrenderer, hidden: false},
                    	{ text: 'Supervisor', datafield: 'supervisor', width: '25%', cellsrenderer: cellsrenderer, hidden: false},
                    	{ text: 'Phone', datafield: 'phone', width: '15%', cellsrenderer: cellsrenderer, hidden: false},
                    	{ text: 'Email', datafield: 'email', width: '5%', cellsrenderer: cellsrenderer, hidden: false}
                    ],
    			  pagesizeoptions: ['10', '15', '20', '25', '50'],
    			  selectionmode: 'none',
    			  altrows: true,
    			  filtermode: 'excel'
                });
    
                function generateData(id) {
    
                	var id = id;
    
                	var emps = window.CW_Sites[id]['employees'];
    			     rows = [];
    
                    for(x in emps) {
                    	name = "<a href=\"/directory/?search="  + emps[x].userid + "\">" + emps[x].fullname + "</a>";
                    	rows.push({"name": name, "title": emps[x].title, "supervisor": emps[x].supervisor, "phone": emps[x].number, "usertype": emps[x].usertype, "email": emps[x].email});
                    }
    
                    return rows;
    
                }
    
    			 $(document).on('click', '.employees_link', function () {
    			     $('#employees_chart').show();
    
    			     var id = $(this).data('id');
    
    			     $("#location_title").html(window.CW_Sites[id]['name']);
    
    	            // prepare the data
    	            source_emp.localdata = generateData(id);
    
    	            //source_emp.localdata = rows;
    	            dataAdapter_emp.dataBind();
    
    				return false;
    
    			 });

    And it’s working swimmingly. I hope this helps some other poor soul!

    dataadapter not updating with new row data #96233

    Peter Stoev
    Keymaster

    The row’s data is passed to the cellsrenderer, too. This means that this customization and additional logic is unnecessary. You may look at: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/computedcolumn.htm?light

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.