Delete record on long press

  1. #1

    Delete record on long press

    On the following example, long press a record to delete it.

    Hope it helps :)

    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var LongPress = function (e) {
                if (e.record && e.record.data) {
                    new Ext.window.MessageBox().show({
                        title: 'Confirm',
                        message: 'Are you sure you want to delete the record?',
                        icon: Ext.Msg.QUESTION,
                        buttons: Ext.Msg.YESNO,
                        modal: true,
                        callback: function (btn) {
                            if (btn == 'yes') {
                                Ext.net.DirectMethod.request({
                                    url: Ext.net.ResourceMgr.resolveUrl("~/Example/Delete"),
                                    cleanRequest: true,
                                    params: {
                                        id: e.record.data.ID
                                    },
                                    success: function (response) {
                                        e.record.store.remove(e.record);
                                    },
                                    failure: function (response) {
                                        Ext.Msg.notify("Failure", response);
                                    }
                                });
                            }
                        }
                    });
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager Theme="Crisp" runat="server" />
        <ext:GridPanel Title="Ext.NET" Border="true" Width="500" Height="500" runat="server">
            <Store>
                <ext:Store AutoLoad="true" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="Int" />
                                <ext:ModelField Name="Name" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                </Columns>
            </ColumnModel>
            <Listeners>
                <LongPress Fn="LongPress" />
            </Listeners>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index() => View();
    
            public StoreResult LoadFakeRecords()
            {
                List<Entity> lst = new List<Entity>();
    
                for (int index = 0; index < 15; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = $"Name - {index}"
                    });
                }
    
                return new StoreResult(lst, lst.Count());
            }
    
            public AjaxResult Delete(int id)
            {
                if (id % 2 == 0)
                {
                    return new AjaxResult
                    {
                        Success = false,
                        ErrorMessage = "It's not possible to delete a record with even id."
                    };
                }
    
                return new AjaxResult
                {
                    Success = true,
                };
            }
        }
    
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    }
  2. #2
    Hello Raphael! Thanks for sharing this nice example!

    Maybe worth mentioning, this example takes advantage of the touch-friendly functionalities being introduced since the version 3 series, and further developed on the current version 4 release! :)
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Tap, Double Tap and Long Press
    By RCN in forum Examples and Extras
    Replies: 0
    Last Post: Mar 05, 2015, 12:28 PM
  2. Replies: 0
    Last Post: Nov 28, 2013, 5:29 AM
  3. how to delete or remove record?
    By richard in forum 2.x Help
    Replies: 0
    Last Post: Jun 08, 2012, 10:12 AM
  4. Delete or remove record from gridpanel
    By lapix in forum 1.x Help
    Replies: 3
    Last Post: Feb 25, 2012, 6:56 PM
  5. Gridpanel delete a record with rowcommand
    By umitcel in forum 1.x Help
    Replies: 3
    Last Post: Jul 23, 2010, 10:27 AM

Posting Permissions