Implementing Master and Detail Grids in Wijmo
We recently pushed an update to our WijMarket sample, implementing an example of implementing Master and Detail grids in Wijmo. You can check out the sample here. Also, I recommend doing a View Source on the page to see what’s going on overall. This demo comes apart of the Studio for MVC Wijmo download.
Really, this isn’t difficult to do.
First thing to notice is that we use two different ways to manage data in the grids. This is done for no particular reason except to show variety in solutions. Here’s the code snippet we use to implement the top (master) grid.
$.ajax({
url: "@Url.Action("StockSymbols")",
data: { symbols: stockApp.symbols },
dataType: "json",
success: function (data) {
$("#stockList").wijgrid({
data: data,
allowSorting: true,
columns: [
{},
{},
{ dataType: "number" },
{ dataType: "number" },
{ dataType: "number" },
{ dataType: "number" },
{ dataType: "number" },
{ dataType: "number" },
{ visible: false },
{ visible: false }
],
selectionchanged: function (e, args) {
stockApp.currentSymbol = $("#stockList").wijgrid("selection").selectedCells().item(0).value();
stockApp.stockChange();
}
});
}
});Let’s walk through what this code is doing. We’re initiating an AJAX call to an action called “StockSymbols”. This action returns all the high level data that we need for our application. With it, we’re passing in a list of symbols we’d like data on. That’s the contents of stockApp.symbols.
When the AJAX call returns, it passes the end result into the success call back. This is where the WijGrid gets created. The data from the callback gets passed in as the data parameter on the WijGrid. We’re also enabled sorting on the grid, and defining properties for the columns we’re going to import. Finally, we have a selectionchanged event for when the user selects a new row (note: this is called for row one on when loaded for the first time.)
The selection changed event is what spawns the magic for our details row. By setting a property for the currentSymbol, we can create a call to our server to pull the latest information for that symbol. That’s what the stockChange method does. Here it is:
stockApp.stockChange = function () {
stockApp.dataSource = stockApp.createDatasource();
$("#stockDetailList").wijgrid("destroy").empty();
$("#stockDetailList").wijgrid({
allowSorting: true,
data: stockApp.dataSource,
columns:[
{}, {},
{dataType: "number"},
{dataType: "number"},
{dataType: "number"},
{dataType: "number"},
{dataType: "number"}
]
});
};This process doesn’t use a jQuery AJAX request directly to gather the data. Instead, it uses a WijDataSource to do the AJAX call and JSON reading automatically. Because WijDataSource doesn’t support refreshing data on demand (at least not in the way we want to use it), I abstracted the creation into the createDatasource method. We’ll go into that method here in a second.
Because our WijGrid datasource doesn’t support refreshing data on demand, we need to recreate the grid for each request. In order to recreate the grid, first it needs to be destroyed and the tag needs to be emptied. Then we can proceed to recreate the grid (or create it for the first time). The details grid takes our WijDataSource as a property, and defines properties for the columns we’re going to load. This call will automatically go to fetch data from our data source.
stockApp.createDatasource = function () {
return new wijdatasource({
proxy: new wijhttpproxy({
url: "@Url.Action("StockSymbolHistoryByDates")",
data: { symbol: stockApp.currentSymbol, startDate: stockApp.minDate, endDate: stockApp.maxDate },
dataType: "json",
success: function (){
stockApp.isDataLoaded = true;
}
}),
reader: new wijarrayreader([
{ name: "Symbol", mapping: "Symbol" },
{ name: "Date", mapping: "DateString" },
{ name: "Open", mapping: "Open" },
{ name: "Close", mapping: "Close" },
{ name: "High", mapping: "High" },
{ name: "Low", mapping: "Low" },
{ name: "Volume", mapping: "Volume" }
])
});
};In the createDatasource method, we make a call to the HTTP url we want to pull data from. In this case, it’s an action on our controller. We want to pass in the currently selected symbol, as well as the minimum and maximum dates for our data. If you’re feeling like playing around, write a filter for this grid for the dates.
The reader takes the array list returned by the action as JSON, and parses it into the columns we want to present in the grid. The mapping property points to the name of the property in our data, and the name is what we want to call that column on the screen.
That’s all the code required to make the master/detail grids to work. And, of course, this is one way to solve the problem. Feel free to play with different approaches and see if something works better!
I hope that helps you in your applications. If you have any comments, questions, or suggestions, feel free to post them in the comments or shoot me an email.
Kevin Griffin
keving@componentone.com
