[CLOSED] Question about how to set up value in Grid Editor

  1. #1

    [CLOSED] Question about how to set up value in Grid Editor

    Hello. I'm working on my project and have a question about how to handle data when keyup event is occured in textfield.
    In detail, There is a number field that is called "Numberfiled1" for ID

    <ext:NumberField ID="NumberField1" runat="server" AllowDecimals="true" DecimalPrecision="1" MinValue="-99" MaxValue="99" 
                                                    SelectOnFocus="true" MaxLength="3" Cls="GridNumCss" EnableKeyEvents="true">
                                                    <Listeners>
                                                        <KeyUp Handler="this.getValue() * True_Price" />
                                                    </Listeners>
    </ext:NumberField>
    and I want to set the value of multiplication True_Price and value of input field.

    Moreover, when keyup event is occured, the value should be in column where header is "TotalPrice"

    <ext:Column Header="TotalPrice" Width="200" Align="Center" ColumnID="TotalPrice" MenuDisabled="true">

    Partial code of my project is following... I hope some codes don't bother you because it is korean.

    Please advice me how to set up the value of "this.getValue() * True_Price" and put it into header is called "TotalPrice"


    <ext:GridPanel ID="OrderGrid_2" runat="server" Width="1140" AutoHeight="true" Frame="false" Border="false" StripeRows="true" BaseCls="GridCss" ClientIDMode="Static">
                                <Store>
                                    <ext:Store ID="OrderStore2" runat="server" ClientIDMode="Static">
                                        <Reader>
                                            <ext:JsonReader>
                                                <Fields>
                                                    <ext:RecordField Name="B_Code" Type="Auto" />
                                                    <ext:RecordField Name="Term" Type="Auto" />
                                                    <ext:RecordField Name="Grade" Type="Auto" />
                                                    <ext:RecordField Name="Gubun" Type="Auto" />
                                                    <ext:RecordField Name="B_Name_S" Type="Auto" />
                                                    <ext:RecordField Name="Order_Book" Type="Auto" DefaultValue="0" />
                                                    <ext:RecordField Name="True_Price" Type="Auto" />
                                                    <ext:RecordField Name="Min_Cnt" Type="Auto" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
    
                                <Plugins>
                                    <ext:EditableGrid ID="EditableGrid2" runat="server" />
                                </Plugins>
    
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column Header="학기" Width="100" Align="Center" DataIndex="Term" MenuDisabled="true" />
                                        <ext:Column Header="학년" Width="100" Align="Center" DataIndex="Grade" MenuDisabled="true">
                                            <Renderer Fn="GradeName" />
                                        </ext:Column>
                                        <ext:Column Header="교재구분" Width="130" Align="Center" DataIndex="Gubun" MenuDisabled="true" />
                                        <ext:Column Header="교재명" Width="410" DataIndex="B_Name_S" MenuDisabled="true" />
                                        <ext:Column Header="주문부수" Width="200" Align="Center" MenuDisabled="true" DataIndex="Order_Book">
                                            <Editor>
                                                <ext:NumberField ID="NumberField1" runat="server" AllowDecimals="true" DecimalPrecision="1" MinValue="-99" MaxValue="99" 
                                                    SelectOnFocus="true" MaxLength="3" Cls="GridNumCss" EnableKeyEvents="true">
                                                    <Listeners>
                                                        <KeyUp Handler="this.getValue() * True_Price" />
                                                    </Listeners>
                                                </ext:NumberField>
                                            </Editor>
                                            <EditorOptions CompleteOnEnter="true" CancelOnEsc="true" /> 
                                        </ext:Column>
                                        <ext:Column Header="TotalPrice" Width="200" Align="Center" ColumnID="TotalPrice"  MenuDisabled="true">
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
    
                                <%-- RowSelectionModel --%>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="Order_Grid_Select2" runat="server" SingleSelect="true" />
                                </SelectionModel>
                                <%-- RowSelectionModel --%>
    
                                <LoadMask ShowMask="true" Msg="데이터 조회중..." />
                                <View>
                                    <ext:GridView EmptyText="조회된 데이터가 존재하지 않습니다." />
                                </View>
    
                            </ext:GridPanel>
    Last edited by Daniil; Mar 26, 2012 at 9:49 PM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    Unfortunately, it's not an option to implement your scenario in the EditableGrid plugin context due to its implementation.

    I can suggest to handle the Blur event to apply changes.

    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[] { 1, 2, 2 },
                    new object[] { 3, 4, 12 },
                    new object[] { 5, 6, 30 },
                };
                store.DataBind();
            }
        }
    </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="price" />
                                    <ext:RecordField Name="coef" />
                                    <ext:RecordField Name="total" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Price" DataIndex="price">
                            <Editor>
                                <ext:NumberField runat="server" EnableKeyEvents="true">
                                    <Listeners>
                                        <Blur Handler="var rec = this.grid.record;
                                                       rec.data.total = this.getValue() * rec.get('coef');" />
                                    </Listeners>
                                </ext:NumberField>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Coef" DataIndex="coef" />
                        <ext:Column Header="Total" DataIndex="total" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:EditableGrid runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3

    Question about Event

    If I use Blur event, it doesn't change the value of input box right away when text is entered.
    So, I tired it with keyup event but, it didn't work too.
    Could you please let me know what kinds of event I have to use to the value is applied right away ?


    Quote Originally Posted by Daniil View Post
    Hi,

    Unfortunately, it's not an option to implement your scenario in the EditableGrid plugin context due to its implementation.

    I can suggest to handle the Blur event to apply changes.

    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[] { 1, 2, 2 },
                    new object[] { 3, 4, 12 },
                    new object[] { 5, 6, 30 },
                };
                store.DataBind();
            }
        }
    </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="price" />
                                    <ext:RecordField Name="coef" />
                                    <ext:RecordField Name="total" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Price" DataIndex="price">
                            <Editor>
                                <ext:NumberField runat="server" EnableKeyEvents="true">
                                    <Listeners>
                                        <Blur Handler="var rec = this.grid.record;
                                                       rec.data.total = this.getValue() * rec.get('coef');" />
                                    </Listeners>
                                </ext:NumberField>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Coef" DataIndex="coef" />
                        <ext:Column Header="Total" DataIndex="total" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:EditableGrid runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    Hi,

    You cannot apply new value to another column during typing because whole row will be rerendered immediately after setting a new value
    Rerendering means that old grid row will be destroyed (and editor also) and new row (with new values and new editor field) will be generated. Editor focus can be lost or caret can change position or typing symbols can be lost (symbols are inputted during rerendering) because editor will be rerendered also

    Therefore better choice to apply new value on blur event
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. [CLOSED] Grid CommandColumn Question
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 18, 2011, 1:11 PM
  2. Grid (Store) filtering question
    By quasimidi in forum 1.x Help
    Replies: 2
    Last Post: Jun 15, 2010, 9:10 AM
  3. Tab in Grid Editor
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 2
    Last Post: Aug 24, 2009, 10:44 AM
  4. Replies: 3
    Last Post: Jun 17, 2009, 10:32 AM
  5. Question about hidding a column in a grid
    By nuno_Santos in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2009, 3:01 PM

Tags for this Thread

Posting Permissions