Grouplist events

Discontinued products DHTMLX Touch
#1

I’m looking for an event to fire after clicking on a grouplist item, after the next level is displayed (after the scrolling of the next level completes).

I can program my own code if needed, but just wanted to know if there’s something ready out-of-the-box that I can hook in to. :question:

#2

:mrgreen:

Answered my own question.

What I’m doing is I’ve added checkboxes to the Grouplist view. Unfortunately, those checkbox values aren’t saved when the list is traversed. However, I’ve come up with some logic that will take care of that problem.

A) I created some classes to handle the checkbox

.sprt_chek {
    position              : absolute;
    width                 : 18px;
    height                : 18px;
    right                 : 5px;
    background-image      : url("../imgs/sprt_chek.png");
    background-repeat     : no-repeat;
    margin-top            : -20px;
}

.sprt_chek-off {
    background-position   : 0 0;
}

.sprt_chek-on {
    background-position   : 0 -18px;
}

B) I created an array that stores each item’s ID (from XML) and a value of 0 (unchecked) or 1 (checked)

var arry_comp_sets = [];

C) I modified some touchui.js, first by adding the #id# to the element and adding an onclick function

        templateStart:dhx.Template("<div dhx_l_id='#id#' id='#id#' onclick='dely_chek(\"#id#\")' class='dhx_list_item dhx_list{obj.$count?_group:_item}{obj.$template?_back:}{obj.$selected?_selected:}' style='width:{common.width}px; height:20px; padding:5px; margin:{common.margin}px; overflow:hidden;'>"),

D) Additional modifying so the checkbox only appears at the end of a node

            if(obj.$count) {
                html += "<div class='dhx_arrow_icon'></div>";
            } else {
                html += '<div class="sprt_chek sprt_chek-off"></div>'
            }

E) Custom functions to handle the checkbox clicks

// =============================================================================
// Delay grouplist checkbox toggle
// NOTE: Unsure why this needs to be embedded within a setTimeout, but will fix later.
// =============================================================================
function dely_chek(obj) {
    setTimeout("tggl_cstm_chek('" + obj + "')", 1);
}

// =============================================================================
// Toggle grouplist checkbox
// =============================================================================
function tggl_cstm_chek(obj) {
    slct_item = $("#" + obj + " div");

    if(slct_item.hasClass("sprt_chek")) {
        if(slct_item.hasClasses(["sprt_chek-off", "sprt_chek-on"])) {
            slct_item.toggleClass("sprt_chek-off sprt_chek-on");

            arry_comp_sets[obj] = (slct_item.hasClass("sprt_chek-on")) ? 1 : 0;
        }
    }
}

F) inally, capture the HTML of the newly-rendered page (whatever it may be), and compare each node’s checkbox value. If the value in the array is different than the HTML value, change checkbox value.

        // -------------------------------------------------------------------
        // Check HTML against Saved Checkbox Array every time list is rendered
        // -------------------------------------------------------------------
        $$("lstv_comp_sets").attachEvent("onAfterRender", function() {
            // Compare and change checkboxes
        });

Hope this helps somebody.