I am working at an organization that has a hierarchy of locations where at the top is Company HQ, Regional HQ, City HQ, and then local office. (four levels)
I need to create a web application where users will enter the number of customers served by each local office. The report should automatically add up the number of customers at all local offices within a City HQ and display that number for City HQ. Likewise, it should add up the number of customers at each City HQ and display that number for Regional HQ.
I’ve written code that looks like this:
var header = '<b>Location</b>,Number Of Customers,Button';
var initWidths = '300,75,75';
var colAlign = 'left,center,center';
var colTypes = 'tree,txt,txt';
mygrid = new dhtmlXGridObject('gridbox');
mygrid.selMultiRows = true;
mygrid.imgURL = "content/images/dhtmlx/";
mygrid.setHeader(header);
mygrid.setInitWidths(initWidths);
mygrid.setColAlign(colAlign);
mygrid.setColTypes(colTypes);
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("CustomersByLocationXml.ashx");
As you can see, the location column is a tree column and Number Of Customers is a text column. The third column “Button”, displays a widget that the user can click on to update the number of customers at the given location.
Here is the code that runs when the user enters a new number of customers:
var location = selectedLocation
var numberOfCustomers = $('#txtNumberOfCustomers').val();
if (!/^\d+$/.test(numberOfCustomers)) { // The user may enter only digits.
alert('Please enter a number.');
return;
}
$.ajax({
type: "POST",
url: 'Customers.aspx/UpdateNumberOfCustomersAtLocation',
data: JSON.stringify({location: location, numberOfCustomers: numberOfCustomers}),
dataType: "json",
contentType: "application/json;",
async: false,
success: function (response) {
},
error: function (xhr, status) {
alert(xhr.responseText);
alert('There was an error processing your request.');
}
}); // end - $.ajax
mygrid.clearAll(false);
mygrid.loadXML("CustomersByLocationXml.ashx");
This function runs fine and successfully updates the number of customers on the server. It also reloads all the data (Remember that when the user updates the number of customers at a local office, it also will change the number of customers at the associated City HQ, Region HQ, and Company HQ!!!). The crux is that it would be insufficient to update only the row the user changed.
What I’ve done here wipes the chart from the page and reloads it. The problem is that the user’s place expanding and collapsing branches of the hierarchy is lost.
What is a better way to do this?