Create a new record within Editable Related Columns
No changes required for this extension to work on your grid.
Type: Javascript
/** Add a New link to the Editable Related Popup. If user clicks the link the new row appears in the popup as well as in the related object table on the grid */
jq(document).ready(function() {
addNewButton();
jq(mainTableJqueryId).on('click', '#relatedColumnWidget .createNew', function(e) {
jq('.gbPage .gbBtnGroup .saveBtn').addClass('savePending');
var parentTableName = jq('#relatedColumnWidget').attr('data-parent-row-name');
var childTableName = jq('#relatedColumnWidget .childTable').attr('name');
var gridInfo = gridInfoMap[childTableName.charAt(1)];
var childRows = jq('.cr[name="'+parentTableName+'"]');
var relatedColumnsWidget = jq('#relatedColumnWidget');
var relatedColumnsWidgetFrozenHeader = relatedColumnsWidget.find('.frozenTableHeader');
var relatedColumnsWidgetBody = relatedColumnsWidget.find('.body');
//find the child object in the grid
for(var i = 0, len = childRows.length; i < len; i++){
var childRow = childRows[i];
var childTable = jq(childRow).find('.childTable[name="'+childTableName+'"]');
var newRow;
if(childTable.length > 0){
if (GBFreezeHeaders.isFreezeHeadersEnabled() && childTable.is(':visible')) {
// scroll back to the child object container before adding the new record
GBHelpers.scrollTo(childTable.closest('.crDataContainer'), function() {
newRow = insertNewRow(childTable);
jq(window).trigger('gbScroll', {refreshHeader: true});
});
} else {
newRow = insertNewRow(childTable);
}
var childTableCloneForFrozenHeader = childTable.clone().addClass('copy').removeAttr('width');
var childTableClone = childTable.clone().addClass('copy').removeAttr('width');
childTable.find('td select').each(function() {
var selectElem = jq(this),
selectMetaCol = getMetaCol(selectElem, gridInfo),
cellContainer = selectMetaCol.getCellContainer(),
parentCell = selectElem.parents(cellContainer + ':first'),
parentCellName = parentCell.attr('name'),
parentRowName = parentCell.closest('tr.dr').attr('name'),
selectElemClone;
if (parentCell.hasClass('dvc')) {
selectElemClone = childTableClone.find('tr.dr[name="' + parentRowName + '"] ' + cellContainer + '[name="' + parentCellName + '"].dvc select');
} else {
selectElemClone = childTableClone.find('tr.dr[name="' + parentRowName + '"] ' + cellContainer + '[name="' + parentCellName + '"]:not(.dvc) select');
}
selectElemClone.val(selectElem.val());
if (selectElem.is(':disabled')) {
selectElemClone.prop('disabled', true)
}
});
relatedColumnsWidgetFrozenHeader.empty();
relatedColumnsWidgetBody.empty();
relatedColumnsWidgetFrozenHeader.append(childTableCloneForFrozenHeader.find('.dr').remove().end()); // set frozen header
relatedColumnsWidgetFrozenHeader.find('.summaryRow').remove(); // would be duplicate
relatedColumnsWidgetBody.append(childTableClone); // set content
// If freeze cols is enabled, make sure that all the columns are shown
if (GBFreezeCols.isFreezeColsEnabled(true)) {
relatedColumnsWidgetBody.find('td.none').removeClass('none');
}
//set up event listeners for new rows
relatedColumnsWidgetBody.find('tr.nr').each(function(){
newRow = jq(this);
setEventsForNewRow(newRow);
});
// set child table with a negative margin so the first row is flush with the frozen header.
childTableClone.css('margin-top', -(childTableClone.find('.childHeaderRow').height()));
GBRowHelper.setWidthsForRelatedWidgetFrozenHeader(childTableClone, childTableCloneForFrozenHeader);
_setupRelatedWidgetEvents(relatedColumnsWidgetBody, childTableClone, childTableCloneForFrozenHeader);
// this is needed to avoid the child section from collapsing after clicking New
e.stopPropagation();
break;
}
}
});
});
function addNewButton() {
jq('#relatedColumnWidget .header .count').after('<span class="createNew" style="padding-left: 10px; color: white !important;">New</span>');
}
function _setupRelatedWidgetEvents(relatedColumnsWidgetBody, childTableClone, childTableCloneForFrozenHeader) {
relatedColumnsWidgetBody.scroll(function() {
var scrollLeft = jq(this).scrollLeft();
childTableCloneForFrozenHeader.css('margin-left', -(scrollLeft));
});
_setupRelatedWidgetTextAreaResizeEvent(childTableClone, childTableCloneForFrozenHeader);
}
function _setupRelatedWidgetTextAreaResizeEvent(childTableClone, childTableCloneForFrozenHeader) {
// reisze frozen header when text area width changes the cell widths
var textAreas = childTableClone.find('textarea');
// store init (default) state
textAreas.data('x', textAreas.outerWidth());
textAreas.data('y', textAreas.outerHeight());
textAreas.mouseup(function(){
var jqThis = jq(this);
if (jqThis.outerWidth() != jqThis.data('x') || jqThis.outerHeight() != jqThis.data('y')) {
setWidthsForRelatedWidgetFrozenHeader(childTableClone, childTableCloneForFrozenHeader);
}
// store new height/width
jqThis.data('x', jqThis.outerWidth());
jqThis.data('y', jqThis.outerHeight());
});
}
