get checkbox checked status in listview data-click event

[fang]

hello,

<ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset">
    <li class="km-group-container words">
        <div class="km-group-title">
            <div class="km-text">test</div>
        </div>
        <ul class="km-list">
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item1">A1</label></li>
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item2">A2</label></li>
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item3">A3</label></li>
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item4">A4</label></li>
        </ul>
    </li>
</ul>

there is  a checkbox group in listview ,  when user tap checkbox , data-click="listViewClick" ,event fire

function listViewClick(e){
     if(e.target.hasClass("boxlimit")){

        //setTimeout(function(){

            var target=e.target.find("input[type=checkbox]");

            MYAPP.MultiObj=target;

            var fathernode=e.target.parent();
            var root=fathernode.parent();

            var max=parseInt(fathernode.attr("cbl"));
            if(max=="" || max<=0)  return;
            var total=0;
            var obj=root.find("input[type=checkbox]");
            for(var i=0; i<obj.length;i++){
                //console.log("index:"+i+obj.eq(i).attr("checked"));
                //console.log("index:"+i+obj.eq(i).prop("checked"));
                if(obj.eq(i).prop("checked")){
                    total=total+1;
                    if(total>max){
                        //obj.eq(i).removeAttr("checked");
                        MYAPP.MultiObj.removeAttr("checked");
                        openSubmitDailog(" exceed max number what can be choosed!");
                        //console.log("no more than...");
                        return false;
                    }

                }
            }
        //},300);
    }

}

Test env:  ipad mini
        when tap down on any  one of  chekcbox group in listview,  checkbox 's  checked status can not be access by right now ,  I have tested, maybe about 300ms delay later,  the choosed  checkbox's checked status can be get. I guess kendui  framework optimized it for touch screen to avoid wrong operation
BUT, My goal is to limit the  number of checkbox can be choosed,  for example ,   in this  code snippets,  four checkbox in group ,can be choose no more than 2 items, so in function listViewClick, I am trying to count the number that checked when user tap down every time,  So because of delay change of  checked status ,  My way can not work !  

 Q: how to get checked status right now when user tap down? or other suggestion for limit the number user can be choose?




 

[Petyo]

Hello,

As you have correctly guessed, this behavior is by design. The listview data-click event uses touchend, while the checkboxes are changed on the click DOM event (triggered after ~300ms). 

To avoid this, you may consider using the checkbox change event instead. 

Regards,
Petyo
Telerik

[fang]

hi Petyo,
 thanks a lot for your answer,  please do you have any  code snippets to show how to using the checkbox change event instead? 
I have read documentions of kendoui  about form part,  find nothing about this.
 btw,I have tried to use ontouchend event in checkbox,also need to delay about 300ms , then get ckecked status.

<li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item4">A4</label></li>

function touchEnd(event){
    var delayTime=300;

    if(MYAPP.running) delayTime=delayTime+100;

    setTimeout(function(){
        MYAPP.running=true;
    //console.log("touch end"+$(event.target).html());

    var li_target = $(event.target).parent();
    var max = parseInt(li_target.attr("cbl"));
    //console.log(max);

    if (max == "" || max <= 0)  return;
    var total = 0;
    var obj = li_target.parent().find("li>label>input[type=checkbox]");
    for (var i = 0; i < obj.length; i++) {
        if (obj.eq(i).attr("checked") == "checked") {

            total = total + 1;
            if (total > max) {
                obj.eq(i).removeAttr("checked");

                openSubmitDailog("本题限选" + max + "项，请勿多选！");
                return false;
            }

        }
    }
        delayTime-100;
        MYAPP.running=false;

    },delayTime);

}

 

[Petyo]

Hello,

We do not have such code samples present, as such samples are not related to the features offered by the Kendo UI Widgets. In general, such samples should be available when searched for in Google. 

Regards,
Petyo
Telerik