kendomobilelistview button click event fire twice

1 posts, 0 answers
  1. Nick
    Nick avatar
    17 posts
    Member since:
    Feb 2011

    Posted 25 Oct 2012 Link to this post

    Hi,

    i am facing some stupid problem. i have try lots other way but i am not getting success.

    i am using kendomobilelistview with template binding with $.ajax every thing working fine but button click event fire on time then if refresh data(using endlessScroll) then button event fire twice and again refresh listview then click on button then fire three time event. if we do same process again then again fire 4 event. 

    if refresh list view then continue increase  event again and again.

    dataSource with service 
    var JobActionItemDataSource = new kendo.data.DataSource({
        pageSize: 15,
        serverPaging: true,
        transport: {
            read: function (options) {
                window.kendoMobileApplication.showLoading();
                $.ajax({
                    url: urlstring + "GetJobTaskByEmployeeID",
                    data: {
                        UserID: JSON.stringify(localStorage.getItem("AuthorizedUserId")),
                        CompanyType: JSON.stringify($('#radio_Marketing').attr('checked') ? 1 : 0),
                        PageSize: options.data.pageSize,
                        PageNumber: JobActionItemPageIndex
                    },
                    dataType: "jsonp",
                    success: function (result) {
                        options.success(result.d);
                        JobActionItemPageIndex += 1;
                    }
                });
            },
     
            data: function (response) {
                alert(response.d);
                return response.d;
            }
        }
    });

    init function 
    // view design here
      <div data-role="view" data-title="Action items" id="view-actionitems" data-init="init_ActionItemsLanding"
            data-show="show_ActionItemsLanding">
            <header data-role="header">
            <div>
              <img  src="img/CompanyLogo.png" width="100px" height="34px" />
               <a class="km-rightitem" data-rel="popover" href="#popover-actionitems" data-role="button">Jump To</a>
              <a class="km-rightitem" data-click="Logout" data-role="button">Logout</a>
            </div>
            
          </header>
            <ul id="endlessscrolling-JobActionItemsBinding">
            </ul>
    </div>
    /// script code
     <script id="endlessscrolling-JobActionItemsBinding-template" type="text/x-kendo-template">
           <div class="tweet">
                <div class="notesmessage">
                  <span >
                  #if(JobID!=0){#
                  <div> <a  id="WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#" data-role="button" class="km-button" data-click="GoActionitemcompleteevent"
                    style="width:auto; background: none repeat scroll 0 0 transparent;box-shadow: none;color: blue;margin-left: 0;text-decoration:underline;padding: 5px;width: auto;text-align: left;" >#= Task #</a></div>
                  <br/>
                  #=DueTimeFrameColorFormat#
                  #} else{#
                    #= Task # <br/>
                  #}#
                  #= DueTimeFrame # </span>
                    <div style="text-align: center;">
                    #if(JobID!=0){#
                   <a  id="#=JobID#" data-role="button" data-click="job_jobdetails" style="width:145px;padding: 5px;" >#= JobNumber # </a>
                   <a  name="0" id="WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#" data-role="button" data-click="GoActionitemcompleteevent" style="width:70px;padding: 5px;" >Complete</a>
                  <br/> #}#
                    
                   <a id="#=CustomerID#&Type=#=CustomerType#" data-role="button" data-click="GotoViewContactInformation" style="width:145px;padding: 5px;" ><span style="font-size: 0.8em; font-style:italic;">#= EmployeeName #</span></a>
                   #if(JobID!=0){#
     
                   <a  id="ID=#=JobID#&JobNumber=#=JobNumber#" data-role="button"   data-click="GoToViewJobAddActionItems" style="width:70px;padding: 5px;" >Add</a>
                    #}else{#
                    <a  id="ID=#=CustomerID#&Type=#=CustomerType#&ContactName=#=EmployeeName#" data-role="button"   data-click="GoToViewAddMarketingActionItem" style="width:70px;padding: 5px;" >Add</a>
                    #}#
                   </div>
                </div>
          </div>
        </script>
     
     
    // init function
    function init_ActionItemsLanding(e) {
        $("#endlessscrolling-JobActionItemsBinding").kendoMobileListView({
            dataSource: JobActionItemDataSource,
            template: kendo.template($("#endlessscrolling-JobActionItemsBinding-template").text()),
            endlessScroll: true,
            scrollTreshold: 30
        });
    }
     
    // show funciton
       JobActionItemPageIndex = 1;
        var refreshJobActionItems = $("#endlessscrolling-JobActionItemsBinding").data("kendoMobileListView");
        refreshJobActionItems.dataSource.read(1);
        refreshJobActionItems.refresh();

    thanks,

    Raghw
     

     
Back to Top