[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!

[IxzionParticipant]

Hi Peter,

Thanks for the quick response.

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

[Author]

Posts