Master/Detail

Example

This page (or more specifically the Demos & Example section) is a master detail.

The master detail concept is that you have a master list in one area, and the details of items in the list display in another area. This Demos & Examples area uses master/detail. This prevents the back and forth of stepping in and out of multiple records to find thing you want. Many users are familiar with this model from applications like Outlook or other email programs.

Within the IxF, you will usually want to use the layout panels to provide your master and detail areas. The separator and controls for the panels are added via the panel system.

Basically the masterDetail currently only fully works on a table that is static, and shows all rows by default (no "more" button). Other then that you may get lucky and it will work, but often it will not.

Unless all filtering/sorting/more-ing are tracked in the URL, there isn't a way to get back to the correct conditions where the row was shown. Even then, the row may not show if it is a dynamic list and records have been added in a way that the correct row will no longer display when the conditions match the saved state. The record could have been displayed after clicking more twice, but due to new records it now shows only after clicking more three times.

Open to suggestions :)

Documentation

This plugin is custom written for the IxF and so this page is the documentation.

This is a quick stab at some rough documentation. Ask about what you don't know so we can know how to expand it. Below is a list of accepted options and a few of the methods you are likely to care about.

Options/Methods

Name Type Default Options Description
detailLink string a selector for where the link to the detail is
focusKeyboard boolean true should we trap the keyboard right off the bat for navigating the master list
filter string selector of where the optional filter field is
loaderID string md-loading id of the element used to show the loading indicator (created by script)
loaderText string Loading text used to display in the loading indicator
hashLabel string detail ID of the element where the detail should be loaded into. also used to create the hash in the URL for history tracking.
casheResults boolean true should the script cache the results of ajax requests for details
hashLabel2 string optional hashLabel for a sub-master so we can set it to 0 on it's initial load
masterParent string optional hashLabel/ID for a parent detail
masterChild string optional hashLabel/ID for a child detail
loadFirst boolean true should the script load the first row of the master list if none are marked as selected or defined in the URL
selectedClass string selected class to use on selected rows
onloaddetail function callback that fires when the detail is loaded
getSelectedRow method returns the row (object) that is currently selected
getSelectdRowID method returns the ID of the row that is currently selected
clearCache method clears the cache. if an ID is provided it clears only the cache for that ID
rowCreate method expects rowID, data, dontFollow(optional). rowID = the ID the row should be given. data = a JSON object as shown here http://datatables.net/api for fnAddData, dontFollow = only add the row don't click it
rowDestroy method expects rowID, gotoID(optional) rowID = id of row we are destroying, gotoID = id on the page we should then fire a click event on (to load another page, etc)
nomatch function callback that fires when there isn't a match for the provided id. Defaults to an alert, but you can override to show an inline error if you prefer.
error function(event,self) callback that fires when ajax throws an error (404, 500, etc). See self.jqXHR for ajax response and self.element for the detail element.

Options Column = The script only recognizes these values

There is no currently exposed API via the IxF.