Language Checkbox status are not getting changed after implementing Select All Checkbox in Transalation Manager Job View

Question

I am trying to implement "Select All" check functionality in Transalation Manager Job View.

"Select All" check box is implemented quite well and it is selecting/deselecting the Languages checkboxes very well.

The problem is that its changing just on display not setting the value which will be passed to transalation manager, so if you click "select all" it select all below checkboxes and vice versa, now if you want to remove the some publication for not to send world server, you deselect the required checkboxes below. However in my case it is not happening, it always takes the default loaded value of checkboxes. Below is the code sample:

SelectAll Javascript Code:

TranslationManager.Extensions.SelectAllCheckboxExtension.prototype.initialize = function SelectAllCheckboxExtension$initialize(id, parentTab)
{
    var mainDiv = document.createElement('div');
    mainDiv.className = 'field';

    var innerDiv = document.createElement('div');
    innerDiv.className = 'SelectAllCheckBox';

    var newlabel = document.createElement("Label");
    newlabel.innerHTML = "Select All";

    var selectCheckbox = document.createElement('input');
    selectCheckbox.type = "checkbox";
    selectCheckbox.name = "selectCheckbox";
    selectCheckbox.id = "selectCheckboxID";

    innerDiv.appendChild(selectCheckbox);
    innerDiv.appendChild(newlabel);

    mainDiv.appendChild(innerDiv);

    var BusinessUnitsContainerID = document.getElementById('BusinessUnitsContainer');
    BusinessUnitsContainerID.parentNode.insertBefore(mainDiv,BusinessUnitsContainerID);

    $evt.addEventHandler(selectCheckbox, "change", this.getDelegate(this._onSelectAllCheckBoxChange));

    if($j('.Publications input[type=checkbox]').length == $j(".Publications input[type=checkbox]:checked").length) {
        $j("#selectCheckboxID").attr("checked", "checked");
    } else {
        $j("#selectCheckboxID").removeAttr("checked");
    }
};

TranslationManager.Extensions.SelectAllCheckboxExtension.prototype._onSelectAllCheckBoxChange = function  SelectAllCheckboxExtension$_onSelectAllCheckBoxChange()
{
    var checkboxes = document.querySelectorAll('.Publications input[type=checkbox]');   
    for (var i =0; i < checkboxes.length; i++) 
    {
     checkboxes[i].checked = $("#selectCheckboxID").checked;

    }
    $j('.Publications input[type=checkbox]').click(function()
    {   
        if($j('.Publications input[type=checkbox]').length == $j(".Publications input[type=checkbox]:checked").length) {
            $j("#selectCheckboxID").attr("checked", "checked");
        } else {
            $j("#selectCheckboxID").removeAttr("checked");
        }

    });
};
TranslationManager.Extensions.SelectAllCheckboxExtension.prototype.disposeInterface = Tridion.OO.nonInheritable(function SelectAllCheckboxExtension$disposeInterface()
{
    var selectAllCheckbox = $j("#selectCheckboxID");
    $evt.removeEventHandler(selectAllCheckbox, "change", this.getDelegate(this._onSelectAllCheckBoxChange));

});

Any idea how we can set the changed value of below check boxes.

Below is the screenshot:

Answer 1

Finally got resolved by adding this javascript:

Type.registerNamespace("TranslationManager.Extensions");

/**
 * Implements SelectAll checkbox extension.
 * @constructor
 */
TranslationManager.Extensions.SelectAllCheckboxExtension = function TranslationManager.Extensions$SelectAllCheckboxExtension()
{
    //alert("Inside");
    Tridion.OO.enableInterface(this, "TranslationManager.Extensions.SelectAllCheckboxExtension");
    this.addInterface("Tridion.DisposableObject");

    this.properties.controls = {};
};

/**
 * Initialize
 * @param {Stiting} id. The id of extended tab.
 * @param {Tridion.Controls.DeckPage} parentTab. The reference to extended tab object.
 */
TranslationManager.Extensions.SelectAllCheckboxExtension.prototype.initialize = function SelectAllCheckboxExtension$initialize(id, parentTab)
{
    var p = this.properties;
    var c = p.controls;

    var mainDiv = document.createElement('div');
    mainDiv.className = 'field';

    var innerDiv = document.createElement('div');
    innerDiv.className = 'CustomizedSelectAllCheckBox';

    var newlabel = document.createElement("Label");
    newlabel.innerHTML = "Check All";
    newlabel.id = "lblSelectAll";

    var selectCheckbox = document.createElement('input');
    selectCheckbox.type = "checkbox";
    selectCheckbox.name = "selectCheckbox";
    selectCheckbox.id = "selectCheckboxID";
    selectCheckbox.checked = true;
    innerDiv.appendChild(selectCheckbox);
    innerDiv.appendChild(newlabel);

    mainDiv.appendChild(innerDiv);

    var BusinessUnitsContainerID = document.getElementById('BusinessUnitsContainer');
    BusinessUnitsContainerID.parentNode.insertBefore(mainDiv,BusinessUnitsContainerID);
    $evt.addEventHandler(selectCheckbox, "click", this.getDelegate(this._onSelectAllCheckBoxClick));

    var item = $display.getItem();
    if (item) 
    {
    $evt.addEventHandler(item, "load", this.getDelegate(this._onItemLoaded));
      if (item.isLoaded()) {
            this._onItemLoaded();
        }
    }

};

TranslationManager.Extensions.SelectAllCheckboxExtension.prototype._onItemLoaded = function SelectAllCheckboxExtension$_onItemLoaded() {
    console.log("Item Loaded");
    var item = $display.getItem();

    this._updateCheckbox(item);
};

TranslationManager.Extensions.SelectAllCheckboxExtension.prototype._updateCheckbox = function SelectAllCheckboxExtension$_updateCheckbox(item) {
    $("#selectCheckboxID").disabled = item.isReadOnly() || item.isLoading();    

     if(item.isReadOnly())
     {
        $("#selectCheckboxID").checked = false;
     }
};
/**
* Called when you click the select all checkbox
*
*/
TranslationManager.Extensions.SelectAllCheckboxExtension.prototype._onSelectAllCheckBoxClick = function  SelectAllCheckboxExtension$_onSelectAllCheckBoxClick()
{
    $j('.Publications input[type=checkbox]').click();    
    return true;
};


/**
 * Dispose
 * @param {Stiting} id. The id of extended tab.
 * @param {Tridion.Controls.DeckPage} parentTab. The reference to extended tab object.
 */
TranslationManager.Extensions.SelectAllCheckboxExtension.prototype.disposeInterface = Tridion.OO.nonInheritable(function SelectAllCheckboxExtension$disposeInterface()
{
    /**
    *   TODO: 
    *       Implement  disposig
    */
    var selectAllCheckbox = $("#selectCheckboxID");
    $evt.removeEventHandler(selectAllCheckbox, "click", this.getDelegate(this._onSelectAllCheckBoxClick));

});

Tridion.Controls.Deck.registerInitializeExtender("GeneralTab", TranslationManager.Extensions.SelectAllCheckboxExtension);