PDA

View Full Version : Delete record on long press



RaphaelSaldanha
Apr 22, 2016, 7:50 PM
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; }
}
}

fabricio.murta
Apr 23, 2016, 12:57 PM
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! :)