What's New?

[CLOSED] Conditional Editor

  1. #1
    Dec 31, 2014, 10:37 PM

    [CLOSED] Conditional Editor

    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!
    Last edited by Daniil; Feb 03, 2015 at 2:11 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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>

Similar Threads

  1. [CLOSED] Conditional Confirmation
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 12, 2011, 2:46 PM
  2. Conditional data display
    By huzzy143 in forum 1.x Help
    Replies: 10
    Last Post: Aug 26, 2011, 3:14 PM
  3. Conditional display of menu
    By olakara in forum 1.x Help
    Replies: 2
    Last Post: Apr 15, 2010, 3:23 AM
  4. GridPanel conditional edit
    By sharif in forum 1.x Help
    Replies: 1
    Last Post: Feb 20, 2010, 4:37 PM
  5. Conditional AjaxEvents
    By grmontero in forum 1.x Help
    Replies: 1
    Last Post: May 29, 2009, 10:40 AM

Posting Permissions