Hiding details table tab on the fly

Master-details is a very useful feature but the details table may clutter the UI. We have seen projects where people have more than a dozen details tables and it would be useful if we can hide some that are not relevant to the current master table record.

Let us take a look at this completely artificial example. A typical setup with Orders table as a master and Order Details, Employees, and Customers as details. We would like to hide the Employees table tab when OrderID is more than 10300.

$("[id^=details_]").bind("click", function(){

        // get ID of the current master table record   
	var id = $(this).attr("data-record-id"), res = false;

        // loop through all master table records on the page
	var allRecords = pageObj.getAllRecords();
	rem = false;
	$.each(allRecords, function(i, row){

        // If we found our record and value of OrderID is more than 10300
        // than we will remove the tab. This is where you can add your own condition
        if(row.recordId()== id && row.getFieldText("OrderID")>"10300")
            rem = true;
    });
        // actually removing the tab, 1 means second tab, 0 means first tab etc 
	if(rem) {
		$("#tabs-details_details_preview"+id).find("[data-tabidx=1]").remove();
	
  	        // uncomment the following line if you need to hide the first tab
		// $("#tabs-details_details_preview"+id").find("[data-tabidx=1]").find("a").click();
        }

});

This is pretty much it. This code will work in version 10.x or better of PHPRunenr, ASPRunner.NET and ASPRunnerPro. Enjoy!