Knockout js devextreme longpress to open action sheet

Question

Hi all I have written the following code to find the longpress which works fine when I am not binding any data and trying gives me the right result

<div data-options="dxView : { name: 'lngPress', title: 'lngPress' } ">
<div data-options="dxContent : { targetPlaceholder: 'content' } ">
    <div data-bind="event: { mousedown: function() { myFunction() },mouseleave: function() { mymouseleave() },mouseup: function() { mymouseup() } }">
        Mouse over me
    </div>
</div>

My Script is as follows

var longpress = 100;
var start;

testMobileApplication.lngPress = function (params) {
var viewModel = {
    myFunction: function () {
        start = new Date().getTime();
    },
    mymouseleave: function () {
        start = 0;
    },
    mymouseup: function () {
        if (new Date().getTime() >= (start + longpress)) {
            alert('long press!');
        } else {
            alert('short press!');
        }
    }
};

return viewModel;
};

But the same code when I bind some data this is not working as expected

<div data-options="dxView : { name: 'lngPress', title: 'lngPress' } ">
<div data-options="dxContent : { targetPlaceholder: 'content' } ">
    <div data-bind="dxList: { dataSource: dataSource }" id="pr">
        <div data-options="dxTemplate: { name:'item' }" data-bind="event: { mousedown: function() { myFunction() },mouseleave: function() { mymouseleave() },mouseup: function() { mymouseup() } }">
            <span class="dx-field-label" data-bind="text: name"></span>
            <span class="dx-field-label" data-bind="text: hire"></span>
        </div>
    </div>
</div>

Script is as follows

var longpress = 100;
var start;

testMobileApplication.lngPress = function (params) {
var viewModel = {
    myFunction: function () {
        start = new Date().getTime();
    },
    mymouseleave: function () {
        start = 0;
    },
    mymouseup: function () {
        if (new Date().getTime() >= (start + longpress)) {
            alert('long press!');
        } else {
            alert('short press!');
        }
    },

    dataSource: [
{ id: 1, name: "Bob", hire: 2005 },
            { id: 2, name: "John", hire: 2007 },
            { id: 3, name: "Frank", hire: 2001 },
            { id: 4, name: "Robert", hire: 2007 },
    ]
};

return viewModel;
};

So can some one help me

score 1 · Accepted Answer · answered Apr 03 '14 at 20:58

The dxList widget has special callback itemHoldAction. You can use this callback to handle hold event on item. Moveover you'll get item data and item element in params.

http://phonejs.devexpress.com/Documentation/ApiReference/Widgets/dxList/Configuration?version=13_2#itemHoldAction

If you need hold timeout tuning use dxhold event like this:

$("#myElement").on("dxhold", { timeout: 1000 }, function() {
    alert("The element is being held during 1000 milliseconds");
});

http://phonejs.devexpress.com/Documentation/ApiReference/UI_Events?version=13_2#dxhold

Hope it'll help.

Knockout js devextreme longpress to open action sheet

1 Answers1