I'm using Ext.NET with VS2008, ASP.NET. I have a unique problem for which I have not been able to find any solution.
There is a GridPanel and in the TopBar there is a delete button. The Grid uses RowSelection Model. after selecting the row the user clicks the Delete button. a client side event is raised for confirmation following is the code snippet
<ext:Button ID="btnDelete" runat="server" Text="Delete" Icon="Delete">
<DirectEvents>
<Click OnEvent="Evt_Delete">
<ExtraParams>
<ext:Parameter Name="recordId" Value="(#{grdSanction}).selModel.getSelected().data.VoucherID" Mode="Raw" />
</ExtraParams>
<Confirmation Message="Do you really want to delete sanction?" ConfirmRequest="true"/>
</Click>
</DirectEvents>
</ext:Button>
But the problem is that I after clicking yes I get the following message basically a 500 Internal Server Error.
Below is what I find in Fiddler:
Result Protocol Host URL Body Caching Content-Type Process Comments Custom
1 500 HTTP onyx /pages/sanction.aspx?_dc=1337773867270 4,268 private text/html; charset=utf-8 chrome:920
Debugger of VS2008 does not work because the event on the code behind is never raised.
other buttons on the toolbar work just fine. Does anyone know what am I missing here?
I think you just need to remove the round brackets from around the #{grdSantion}.
// Not OK
(#{grdSanction}).selModel.getSelected().data.VoucherID
// OK
#{grdSanction}.selModel.getSelected().data.VoucherID
The following sample demonstrates the full scenario and appears to work as per your requirements.
Example
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var store = this.GridPanel1.GetStore();
store.DataSource = this.Data;
store.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" }
};
}
}
protected void Button1_Click(object sender, DirectEventArgs e)
{
X.Msg.Notify("Company", e.ExtraParams["company"]).Show();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="350"
Height="215">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Delete" Icon="Delete">
<DirectEvents>
<Click OnEvent="Button1_Click">
<ExtraParams>
<ext:Parameter Name="company" Value="#{GridPanel1}.selModel.getSelected().data.company" Mode="Raw" />
</ExtraParams>
<Confirmation Message="Do you really want to delete sanction?" ConfirmRequest="true"/>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>
Related
I have a Ext GridPanel named sampleGrid, which has some column. one of them is named IsAssigned holding a bool value.
I have a ext button. When I click it I want to pass all the row that has IsAssigned column value false.
I can pass all the grid rows,
See below code sample,
<ext:Button ID="btnSave" runat="server" Text="Save"
Icon="Accept">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="rows" Value="Ext.encode(#{sampleGrid}.getRowsValues())"
Mode="Raw" ></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
Here Ext.encode(#{sampleGrid}.getRowsValues()) will pass all the rows. But I want to pass only rows that have IsAssigned column value false.
isAssigned column code:
<ext:CheckColumn ColumnID="chkSelect" DataIndex="IsAssigned" MenuDisabled="true"
Sortable="true" Width="30px" Editable="true">
</ext:CheckColumn>
Any help will be appreciated.
I am not sure if it is best solution but give try.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function Test() {
var jsondata = Ext.encode(App.grd.getRowsValues());
alert("{dt:" + jsondata + "}");
var mynewitems = {};
var myobj = JSON.parse('{"dt":' + jsondata +'}');
for (var i = 0; i < myobj.dt.length; i++) {
alert(myobj.dt[i].data2);
if (myobj.dt[i].data2 == true) { myobj.dt.splice(i, 1); }
}
alert(myobj);
return myobj;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Button ID="btnSave" runat="server" Text="Save"
Icon="Accept">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="rows" Value="Test()"
Mode="Raw" ></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:GridPanel runat="server" ID="grd" Height="300" Layout="FitLayout">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="data0"></ext:ModelField>
<ext:ModelField Name="data1"></ext:ModelField>
<ext:ModelField Name="data2"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="data0" Text="data0"></ext:Column>
<ext:Column ID="Column2" runat="server" DataIndex="data1" Text="data1"></ext:Column>
<ext:CheckColumn ID="CheckColumn1" runat="server" DataIndex="data2" Text="data2"></ext:CheckColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
code behind;
protected void Page_Load(object sender, EventArgs e)
{
grd.GetStore().DataSource = GetData();
grd.DataBind();
}
public void btnSave_Click(Object sender,DirectEventArgs e)
{
string js = e.ExtraParams["rows"].ToString();
X.Msg.Alert("aaa", js).Show();
}
private object[] GetData()
{
return new object[] {
new object[] { "test1", "test1", true },
new object[] { "test2", "test2", false },
new object[] { "test3", "test3", false } };
}
Guys i have done it using filterRecord.
<ext:Parameter Name="rows" Value="Ext.encode(#{sampleGrid}.getRowsValues(
{
filterRecord : function (record) {
return (record.data.IsAssigned==false); }
})
)" Mode="Raw" >
</ext:Parameter>
I have a srote like this
<ext:Store ID="strPos" runat="server" AutoSync="false" OnReadData="StoreChange_Event"
OnBeforeRecordUpdated="StorePostGuncelle" OnBeforeRecordInserted="StorePostEkle"
AutomaticResponseValues="false" OnBeforeRecordDeleted="StorePosSil">
I can ınserting values like that way,
grid.store.insert(0, r);
#{strPos}.sync();
grid.store.reload();
but the problem is when updating the value .when clcik the row ,open row editor,then I clcik the update button but no event fire .(I wanna fireOnBeforeRecordUpdaten event ).
I have already tried this ,
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" CancelBtnText="İptal" SaveBtnText="Kaydet" ClicksToEdit="1" TriggerEvent="#{strPos}.sync();#{strPos}.reload();" >
</ext:RowEditing>
</Plugins>
and this one
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" CancelBtnText="İptal" SaveBtnText="Kaydet" ClicksToEdit="1" SaveHandler="#{strPos}.sync();#{strPos}.reload();" SaveHandler="" >
</ext:RowEditing>
</Plugins>
but change nothing.
thank you
**
it is availbale this.up('gridpanel').store.removeAt(recordIndex); and insert method but where is the update method.
EDITED: complete example ;
<ext:XScript ID="XScript1" runat="server">
<script>
function addPlant(btn) {
// Create a model instance
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
var r = Ext.ModelManager.create({
Adi: 'pos bilgisi',
Id:'0'
} ,'Pos');
grid.store.insert(0, r);
#{strPos}.sync();
grid.store.reload();
// grid.editingPlugin.startEditByPosition({ row: 0, column: 1 });
}
</script>
</ext:XScript>
<ext:GridPanel ID="GridPanel1" Scroll="Vertical" runat="server" Title="Pos tanımlamalrı"
Height="200">
<Store>
<ext:Store ID="strPos" runat="server" AutoSync="false" OnReadData="StoreChange_Event" OnAfterStoreChanged="store_change"
OnBeforeRecordUpdated="StorePostGuncelle" OnBeforeRecordInserted="StorePostEkle"
AutomaticResponseValues="false" OnBeforeRecordDeleted="StorePosSil">
<Model>
<ext:Model ID="Model1" runat="server" Name="Pos">
<Fields>
<ext:ModelField Name="Id" Type="Int" SortDir="ASC" />
<ext:ModelField Name="Adi" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Pos ekle" Handler="addPlant" Icon="Add" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column7" runat="server" Text="Id" DataIndex="Id" Flex="1">
</ext:Column>
<ext:Column ID="Column8" runat="server" Text="Banka adı" DataIndex="Adi" Flex="1">
<Editor>
<ext:TextField ID="txtAd" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Width="30" Sortable="false">
<Commands>
<ext:ImageCommand Icon="Decline" ToolTip-Text="Delete Plant" CommandName="delete">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="this.up('gridpanel').store.removeAt(recordIndex);#{strPos}.sync();" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="rowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" CancelBtnText="İptal" SaveBtnText="Kaydet" ClicksToEdit="0" SaveHandler="#{strPos}.sync();" >
</ext:RowEditing>
</Plugins>
</ext:GridPanel>
and the code behind is here
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
strPos.DataSource = ps.Getir();
strPos.DataBind();
}
}
protected void StoreChange_Event(object sender, EventArgs e)
{
strPos.DataSource = ps.Getir();
strPos.DataBind();
}
protected void store_change(object sender, AfterStoreChangedEventArgs e)
{
strPos.DataSource = ps.Getir();
strPos.DataBind();
}
public void StorePostEkle(object sender, BeforeRecordInsertedEventArgs e)
{
// string ss = e.Record.ToString();
Pos pss = e.Object<Pos>();
ps.Ekle(pss);
X.Msg.Notify("store", "storea veri eklendi" + e.Record).Show();
// GridPanel1.Reload();
}
protected void StorePosSil(object sender, BeforeRecordDeletedEventArgs e)
{
X.Msg.Notify("store", "storea dan veri, silindi " + e.Record).Show();
Pos pss = e.Object<Pos>();
try
{
ps.Sil(pss.Id);
}
catch (Exception)
{
throw;
}
}
protected void StorePostGuncelle(object sender, BeforeRecordUpdatedEventArgs e)
{
X.Msg.Notify("store", "storea güncellendi " + e.Record).Show();
Pos pss = e.Object<Pos>();
// Pos pss = JSON.Deserialize<Pos>(e.ToString());
ps.Guncelle(pss);
I am filling a Combobox store values with One Service Using the Ajax Request to automatically display the matched text(filtering) using the following code
<ext:ComboBox ID="cbManager" runat="server" DisplayField="FirstName"
LabelAlign="Right" ValueField="EmployeeID" AllowBlank="false"
HideTrigger="true" MinChars="1" FieldLabel="* Manager" >
<ext:Store ID="storeManager" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Url="~/Modules/eHRMS/FilterEmployeeNames.ashx?empType=1">
<ActionMethods Read="GET" />
<Reader>
<ext:JsonReader Root="employees" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model4" runat="server">
<Fields>
<ext:ModelField Name="EmployeeID" />
<ext:ModelField Name="FirstName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
When i select the any name from the Combobox,it is giving Correct
Value But when i trying to Fill the ComboBox Value using the Code it
showing only EmployeeID(Value) not showing the EmplyeeName
I have used the following code in CodeBehind
Employee emp = GetProject(EmployeeID);
cbManager.SetValue(project.ManagerID);
I have also tried the following one also
cbManager.Select(project.ManagerID.ToString());
but it only showing the int Value instead of String(i.e EmployeeName)
What could be the Reason for this behaviour,Please suggest me the
right way.
Thank you
You should add record that corresponds to this value and then set the value:
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.ComboBox1.GetStore();
store.Data = new object[]
{
new
{
value = "2",
text = "Item 2"
}
};
}
}
protected void Store_OnReadData(object sender, StoreReadDataEventArgs e)
{
Store store = sender as Store;
store.DataSource = new object[]
{
new { value = "1", text = "Item 1" },
new { value = "2", text = "Item 2" },
new { value = "3", text = "Item 3" }
};
store.DataBind();
}
protected void ButtonClick(object sender, DirectEventArgs e)
{
ComboBox1.GetStore().Add(new object[]
{
new
{
value = "4",
text = "Item 4"
}
});
ComboBox1.SetValue("4");
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store runat="server" OnReadData="Store_OnReadData">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<SelectedItems>
<ext:ListItem Index="0" />
</SelectedItems>
</ext:ComboBox>
<ext:Button runat="server" Text="Set some value">
<DirectEvents>
<Click OnEvent="ButtonClick"></Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html>
i'm using VB.net with ext.net (version 1.6).
i have a Gridpanel where i can double click on a row in order to edit it.
I can successfully edit it, but i need a direct event to be called whenever i finish editing ( in order to update the row in my database ).
I tried :
<ext:Column ColumnID="Name" dataindex="Name" Header="Field" Width="210" >
<Editor>
<ext:TextField ID="TextField00" runat="server" />
</Editor>
</ext:Column>
and outside of the column :
<DirectEvents>
<AfterEdit OnEvent="UpdateFieldValue"></AfterEdit>
</DirectEvents>
thanks
It works in this example.
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
protected void GridPanel_AfterEdit(object sender, DirectEventArgs e)
{
X.Msg.Alert("GridPanel_AfterEdit", "Hello from Server!").Show();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test" DataIndex="test">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<DirectEvents>
<AfterEdit OnEvent="GridPanel_AfterEdit" />
</DirectEvents>
</ext:GridPanel>
</form>
</body>
</html>
Hope this helps.
I want to delete a some data in a page and want to warn to user (show a messagebox with YES/NO) and if user click on YES delete data
is it possible to implememt MessageBox in ASP?if yes how?
with confirm it's as simple as:
<input type="submit" value="delete" onclick="javascript:confirm('Are you sure?')"/>
As for ASP.NET, you can do this on server-side:
btnDelete.Attributes.Add("onclick", "return confirm('Are you sure?')");
Or, on markup:
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure?');" />
Edit:
Using a GridView, you can do something like this on the server-side code:
public partial class _Default : System.Web.UI.Page {
Dictionary<string, string> collection = null;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
collection = new Dictionary<string, string>();
collection.Add("Microwave", "$299");
collection.Add("Coffee maker", "$59");
collection.Add("Arm chair", "$89");
}
GridView1.DataSource = collection;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if (DataControlRowType.DataRow == e.Row.RowType)
{
((LinkButton)e.Row.FindControl("lnkDelete"))
.Attributes.Add("onclick", "return confirm('are you sure?')");
}
}
protected void GridView1_RowCommand(Object sender, GridViewCommandEventArgs e) {
if (e.CommandName.ToLower() == "delete")
{
// this code should be executed only when the user clicks "ok"
// in the confirm message that appears on the browser
// your implementation goes here
}
}
}
And your markup could be done similarly to the following. As for the template column, it's easy to create a command column through visual studio and then convert it into a template column, so you can actually have an ID for the delete link button (or a button) and find it through e.Row.FindControl as shown above.
<asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand"
OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Key" HeaderText="Product" />
<asp:BoundField DataField="Value" HeaderText="$$$" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" runat="server" CausesValidation="False"
CommandName="Delete" Text="Remove"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="return confirm('Are you sure you want delete this?');" />
You can use jQuery to do that!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
alert('deleted');
$( this ).dialog( "close" );
},
Cancel: function() {
alert('cancel')
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
</body>
</html>
Reference:
http://jqueryui.com/dialog/#modal-confirmation