Dynamically show/hide commanditem button based on edits

[EM]

Hello all,

I have a grid with multiple row edits allowed, and it opens in edit mode by default.  In my case, a checkboxcolumn displays some options that can be selected, or deselected by the user.

I want to show a commanditem button when any checkbox in the checkboxcolumn is changed , so that an update button appears to save changes.

If a row change (in this case, a checkbox being clicked in a CheckBoxColumn), the grid display an "update" button as a commanditem. When the commanditem is selected, it does a batch update on the server (similar to the batch update example in the doc).

I'm considering using a columnclick event on the client side API, or to go with a custom template column and use regular checkboxes, trapping the checked event client side.   Is there a better method?

Thanks,

Etienne

[Maria Ilieva]

Hi,

In this scenario I could suggest you to use TemplateColumn with regular checkbox in it, or GridCheckBoxColumn. In this cases you will be able to assign the client event of the checkbox elements in "ItemCreated" handler. After that you could use these client events to show the button you need.


Best wishes,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[EM]

Hello,

Thanks for the reply.

What I ended up doing is to add an OnClick handler client-side to all the checkboxes (input type='checkbox') generated by the grid.  This causes the checkbox to call the a client side handler when the user changes a checkbox value.  In this case, the handler shows an "update" button on the client. 

The wiring is done through the TrapCheckboxes() js function.  That function not only wires the checkboxes, it also locates a button and label that can be updated client side.  The lookup uses a neat helper function to lookup elements by their CSS classname, so that name mangling is not a problem.  This function can be found here: http://www.dustindiaz.com/getelementsbyclass/


When the update button fires, the grid can update the new values server side knowing that at least one value was modified.   The idea is to only perform this check if a checkbox was changed on the client, avoiding multiple callbacks.

The way the wiring on the client is done is via a js function that gets a list of all input elements on the document using the  called on the client via a the ResponseScripts property of the RadAjaxManager on the page.  This happens after the grid has rendered.

// Selects or deselects all checkboxes on the page
function trapCheckboxes() {
    //  let's get all the inputs
    var inputElements = document.getElementsByTagName('input');
    for (var i = 0; i < inputElements.length; i++) {
        var myElement = inputElements[i];
        // Filter through the input types looking for checkboxes
        if (myElement.type === "checkbox") {
            // Use the item (our calling element) as the reference
            //  for our checkbox status
            myElement.onclick = checkPressed;
        }
    }

    // find our update button, use the class name to avoid name mangling
    var elements = getElementsByClass("updateButton", document, "input");
    if (elements) {
        _inputButton = elements[0];
        hideApplyButton();
    }

    elements = getElementsByClass("labelStatus");
    if (elements)
        _labelStatus = elements[0];
}

On the server side, UpdatePageWiring() is called in the page load event after the data has been loaded.  This causes the js function using the RadAjaxManager to run on the client after the grid has rendered.  We also hide the update button using a style change (we can't use the visible property as that would cause the button not to be rendered, thus not visible to the client).

        void UpdatePageWiring()
        {
            (Page.Master as CMasterPage).AjaxManager.ResponseScripts.Add("trapCheckboxes();");
            ButtonUpdateAll.Style["Display"] = "none";
        }

The handler client side makes the button visible on change:

// shows the update button
function checkPressed() {
    if (_inputButton) {
        _inputButton.style.display = 'inline';
        if (_labelStatus)
            _labelStatus.innerHTML = 'Settings were modified.';
    }
}

This allows me to use the regular CheckBoxColumn in batch edit mode (all rows editable), without having to do any callbacks until the user decides to save the data.

This can also be done using a template column, and I was intent on using the features of the CheckBoxColumn :)


Cheers,

Etienne