dataadapter not updating with new row data

[IxzionParticipant]

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?

[adminKeymaster]

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

[IxzionParticipant]

Hi Peter,

Thanks for the quick response.

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

[IxzionParticipant]

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!

[Peter StoevKeymaster]

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/

[Author]

Posts