PDA

View Full Version : [CLOSED] Row Editor- Remote Confirmation: getting the value of a non editable column



otouri
Apr 24, 2013, 3:54 PM
Hello,

Based on the sample provided here:
http://examples2.ext.net/#/GridPanel/Plugins/RowEditor_Remote/

I am using the same methodology to get grab the values of the row on an update action.

The diffrence between my sample below and you sample is that i have added an extra column that should not be ediatable but it's value should be used when collecting the data for that row to do some back end work. how can I get that value.

right now if I uncomment :

Rank = Convert.ToByte(values["Rank"]);
I get an error "The given key was not present in the dictionary."

Thank you.

Sample is below:

aspx:


<html>
<head id="Head1" runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();

// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
Rank: '',
name: 'New Guy',
email: 'new@object.net',
start: new Date(),
salary: 500,
active: true
}, 'Employee');

grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};

var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();

grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};

var validateSave = function () {
var plugin = this.editingPlugin;
if (this.getForm().isValid()) { // local validation
App.direct.ValidateSave(plugin.context.record.phan tom, this.getValues(false, false, false, true), {
success : function (result) {
if (!result.valid) {
Ext.Msg.alert("Error", result.msg);
return;
}

plugin.completeEdit();
}
});
}
};
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>GridPanel with RowEditor Plugin and remote confirmation</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="400"
Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="Rank" ServerMapping="Rank" Type="Int" />
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" SaveHandler="validateSave" />
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
<ext:Column ID="Column3" runat="server"
Text="Rank"
DataIndex="Rank"
>
</ext:Column>
<ext:Column ID="Column1" runat="server"
Text="Name"
DataIndex="name"
Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server"
Text="Start Date"
DataIndex="start"
Format="MM/dd/yyyy"
Width="100">
<Editor>
<ext:DateField ID="DateField1"
runat="server"
AllowBlank="false"
Format="MM/dd/yyyy"
MinDate="01.01.2006"
MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>"
AutoDataBind="true"
/>
</Editor>
</ext:DateColumn>
<ext:NumberColumn ID="NumberColumn1"
runat="server"
Text="Salary"
DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField ID="NumberField1"
runat="server"
AllowBlank="false"
MinValue="1"
MaxValue="150000"
/>
</Editor>
</ext:NumberColumn>
<ext:CheckColumn ID="CheckColumn1"
runat="server"
Text="Active?"
DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox ID="Checkbox1" runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length) ;" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>


aspx.cs


protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();

store.DataSource = new List<object>
{
new {
Rank = 1,
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Rank = 2,
Name = "Bill Little",
Email = "bill.little@object.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
},
new {
Rank = 3,
Name = "Bob Jones",
Email = "bob.jones@object.net",
Start = new DateTime(2008, 10, 6),
Salary = 70000,
Active = true
},
new {
Rank = 4,
Name = "Bob Train",
Email = "bob.train@object.net",
Start = new DateTime(2009, 5, 5),
Salary = 68000,
Active = true
},
new {
Rank = 5,
Name = "Chris Johnson",
Email = "chris.johnson@object.net",
Start = new DateTime(2009, 1, 25),
Salary = 47000,
Active = true
}
};

store.DataBind();
}
}

[DirectMethod]
public object ValidateSave(bool isPhantom, JsonObject values)
{
byte Rank = 0;
string Name = null;
string Email = null;
DateTime Start;
decimal Salary = 0;

bool Active = false;

if (!isPhantom)
{
//Rank = Convert.ToByte(values["Rank"]);
Name = Convert.ToString(values["name"]);
Email = Convert.ToString(values["email"]);
Start = Convert.ToDateTime(values["start"]);
Salary = Convert.ToDecimal(values["salary"]);
Active = Convert.ToBoolean(values["salary"]);
return new { valid = true };

}

if (!values.ContainsKey("salary") || Convert.ToInt32(values["salary"]) < 1000)
{
return new { valid = false, msg = "Salary must be >=1000 for new employee" };
}

return new { valid = true };
}

Daniil
Apr 24, 2013, 5:41 PM
Hi @otouri,

You can get a required value direct from a record.

record.get("Rank")

And pass it to a DirectMethod as well.

otouri
Apr 24, 2013, 6:05 PM
Thank you that worked.

One more thing, if the following scenario occurs only one item in the list object:


protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();

store.DataSource = new List<object>
{
new {
Rank = 1,
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},

};

store.DataBind();
}
}


Then double clicked in the row to edit the row, the update/cancel is not visible, you have to scroll down to see it.

I need the grid to extend it's lenght to fit one row + the update/cancel dialog box so that everything is visible without using the scroller

Daniil
Apr 25, 2013, 4:41 AM
I think we have a ticket for that.
https://github.com/extnet/Ext.NET/issues/103

At the moment we can suggest the only solution - set up MinHeight for a GridPanel.

otouri
Apr 25, 2013, 1:05 PM
Thank you, I will use you solution for now and hoping there will be a resolution soon.