PDA

View Full Version : [CLOSED] Conditional Editor



tnwheeler
Dec 31, 2014, 10:37 PM
I have a grid that has a column that changes editability and value type based on a second column's value.

e.g. If the second column is "points" the first column is editable and its valid values are 0-999. If the second column is "percentage" the first column will be read only and its value fixed at "100%".

I am using a roweditor and have been able to disable the editor but I would like to use the formatted value that the renderer produces instead of showing a disabled numberfield. In addition, I would like to add the word "points" after the editable field's value and the symbol "%" when it is readonly.

I am going to try and craft a simplified example of what i have and post it but wanted to get this request out incase someone more knowledgeable than me was board over the holiday.

That said, have a very happy New Year!

Daniil
Jan 03, 2015, 8:03 PM
Hi @tnwheeler,

I would say there is no API to achieve that with ease and it might be challenging.

I will try to come with an example. It will take some time and, hopefully, I will provide something within the week.

Dimitris
Jan 26, 2015, 3:37 PM
@tnwheeler,

Please, feel free to try the following example in case you haven't found a solution yourself.

How it works:

Column Renderers are used to display either % or point(s).
NumberFieldEditor1's min and max values depend (BeforeEdit listener)) on whether points or percentage is selected in the 2nd column. In case of percentage, both min and max values are set to 100 ;) Validation will notify user that 100 is the only acceptable value, too!
RowEditor forces the 100 value (Edit listener) if percentage is selected in the 2nd column.


Hope it fits your scenario.



<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store1.DataSource = this.GetData();
Store1.DataBind();
}
}

private List<Record> GetData()
{
return new List<Record>
{
new Record { Field1 = 1, Field2 = "points" },
new Record { Field1 = 100, Field2 = "percentage" }
};
}

public class Record
{
public int Field1 { get; set; }
public string Field2 { get; set; }
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var c1 = function (value, meta, record) {
var template = '{0} {1}';
if (record.data.Field2 == 'points') {
return Ext.String.format(template, value, (value == 1) ? 'point' : 'points');
} else if (record.data.Field2 == 'percentage') {
return Ext.String.format(template, value, '%');
} else
return value;
};

var beforeEdit = function (editor, context) {
var numberFieldEditor = Ext.getCmp('NumberFieldEditor1'),
field2Value = context.record.data.Field2;
if (field2Value == 'percentage') {
numberFieldEditor.setMinValue(100);
numberFieldEditor.setMaxValue(100);
} else {
numberFieldEditor.setMinValue(0);
numberFieldEditor.setMaxValue(999);
}
};

var edit = function (editor, e) {
if (e.record.data.Field2 == 'percentage') {
e.record.data.Field1 = 100;
}
e.record.commit();
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="400"
Height="200">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Field1" Type="Int" />
<ext:ModelField Name="Field2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="C1" DataIndex="Field1" Width="120">
<Renderer Fn="c1" />
<Editor>
<ext:NumberField ID="NumberFieldEditor1" runat="server" MinValue="0" MaxValue="999" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="C2" DataIndex="Field2" Flex="1">
<Editor>
<ext:ComboBox
runat="server"
DataIndex="Field2">
<Items>
<ext:ListItem Value="points" />
<ext:ListItem Value="percentage" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:RowEditing runat="server">
<Listeners>
<BeforeEdit Fn="beforeEdit" />
<Edit Fn="edit" />
</Listeners>
</ext:RowEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>