get checkbox checked status in listview data-click event

4 posts, 1 answers
  1. fang
    fang avatar
    15 posts
    Member since:
    Apr 2013

    Posted 26 Jul 2013 Link to this post

    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?




     
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 30 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. fang
    fang avatar
    15 posts
    Member since:
    Apr 2013

    Posted 30 Jul 2013 Link to this post

    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);
     
    }
     
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 01 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top