Return value to an editing cell

  1. #1

    Return value to an editing cell

    Hi there, I want to create a grid with inline row editing plugin with right button or image button. The objective is I must able to click on the button and pop up a search window. The result from the window will be store to the active cell. I have a few questions here and hope anyone can help. Kindly refer the attachments. (p/s, I am able to get the return value from the search window to parent control)

    The issues,
    1. The right button show after grid is loaded but i need it to be hidden until i hit "Add Employee".
    2. The right button does not show in editing mode
    3. I want to call a popup search window (during edit mode) and return value to the cell where the right button belongs to. Error encounters after I hit select on the search window.

    Please help! Thanks in advance.

    Here below show the sample code,

    Webform2.aspx
    --------------------
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html>
    <head id="Head1" runat="server">
    <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
    <ext:XScript ID="XScript1" runat="server">
    <script>
    // First outer
    //-----------------------------------------------------------
    function createLvl_1_Window( inTitle, inKeyRef, inURL, inPara, inModal) {
    var modalTF
    if (inModal==null) {
    modalTF = false;
    }
    else {
    modalTF = inModal;
    }

    var win = parent.Ext.create("Ext.window.Window", {
    id: '_OuterWin_',
    title: inTitle + ' ' + inKeyRef,
    autoScroll: true,
    height: 800,
    width: 1080,
    layout: 'fit',
    collapsible: true,
    //maximizable: true,
    resizable: false,
    minimizable: true,
    //closeAction: "close",
    icon: "Application",
    modal: modalTF,
    autoLoad: {
    maskMsg: "Loading...",
    showMask: true,
    mode: "frame",
    renderer: "frame",
    script: false,
    url: inURL + inPara
    }
    });
    win.center();
    win.show();
    };


    var addEmployee = function () {
    var grid = #{GridPanel1};
    grid.editingPlugin.cancelEdit();

    // Create a record instance through the ModelManager
    var r = Ext.ModelManager.create({
    name: 'New Guy',
    email: 'new@object.net',
    start: Ext.Date.clearTime(new Date()),
    salary: 50000,
    active: true,
    fobcode: 'P12345'
    }, '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 editOp = function (grid) {
    Ext.getCmp('Toolbar1').setDisabled(false);

    var sm = grid.getSelectionModel();
    // get the selected record
    var selectedRecord = sm.getSelection()[0];
    var selectedIdx = grid.store.indexOfId(selectedRecord.data.name);

    if ( selectedIdx < 0 ) selectedIdx = 0;

    grid.store.getAt(selectedIdx).commit();

    };
    //This delete the phantom row when user click cancel
    //
    var cancelOp = function (phant) {
    var grid = #{GridPanel1},
    sm = grid.getSelectionModel();

    if (phant) {
    grid.store.remove(sm.getSelection());
    }
    Ext.getCmp('Toolbar1').setDisabled(false);
    };


    //This will pass para to code behind for further validation
    //
    var validateSave = function () {
    var plugin = this.editingPlugin;
    if (this.getForm().isValid()) { // local validation
    App.direct.ValidateSaveServer(plugin.context.recor d.phantom, 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" ScriptMode="Debug" />
    <h1>
    GridPanel with RowEditor Plugin</h1>
    <ext:GridPanel ID="GridPanel1" runat="server" Width="1000" Height="800" Frame="true"
    Title="Employees">
    <Store>
    <ext:Store ID="Store1" runat="server" PageSize="2">
    <Sorters>
    <ext:DataSorter Property="start" Direction="ASC" />
    </Sorters>
    <Model>
    <ext:Model ID="Model1" runat="server" Name="Employee">
    <Fields>
    <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" />
    <ext:ModelField Name="fobcode" ServerMapping="FOBCode" Type="String" />
    </Fields>
    </ext:Model>
    </Model>
    </ext:Store>
    </Store>
    <Plugins>
    <ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false"
    SaveHandler="validateSave">
    <Listeners>
    <BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el); " />
    <Edit Handler="#{Spot1}.hide(); editOp(#{GridPanel1});" />
    <CancelEdit Handler="#{Spot1}.hide(); cancelOp(e.record.phantom);" />
    </Listeners>
    </ext:RowEditing>
    </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>
    <BottomBar>
    <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
    </BottomBar>
    <ColumnModel>
    <Columns>
    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
    <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>
    <ext:ComponentColumn ID="ComponentColumn3" runat="server" Editor="true" DataIndex="code"
    Text="Code" Flex="1">
    <Component>
    <ext:TextField ID="txtCode" runat="server" Cls="no-padding">
    <RightButtons>
    <ext:Button ID="Button4" runat="server" Icon="Find">
    <Listeners>
    <Click Handler="createLvl_1_Window( 'Search FOB', '',
    'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
    </Listeners>
    </ext:Button>
    </RightButtons>
    </ext:TextField>
    </Component>
    </ext:ComponentColumn>
    <ext:Column ID="Column3" runat="server" Text="Partcode" DataIndex="partcode" Flex="1">
    <Editor>
    <ext:TextField ID="txtFOBCode" runat="server" AllowBlank="false" />
    </Editor>
    </ext:Column>
    <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="pickPC">
    <Commands>
    <ext:ImageCommand CommandName="pickPC" Icon="TextAlignRight" ToolTip-Text="pickPC">
    </ext:ImageCommand>
    </Commands>
    <Listeners>
    <Command Handler="createLvl_1_Window( 'Search FOB', '',
    'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
    </Listeners>
    </ext:ImageCommandColumn>
    </Columns>
    </ColumnModel>
    <Listeners>
    <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selecte d.length) ;" />
    </Listeners>
    </ext:GridPanel>
    <ext:Spotlight ID="Spot1" runat="server" />
    </form>
    </body>
    </html>


    Webform2 code behind
    ------------------------------
    Imports Ext.Net
    Imports ExtX = Ext.Net.X

    Public Class WebForm2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


    If Not ExtX.IsAjaxRequest Then
    Dim store As Store = Me.GridPanel1.GetStore()

    store.DataSource = New List(Of Object)() From { _
    New With { _
    Key .Name = "Bill Foot", _
    Key .Email = "bill.foot@object.net", _
    Key .Start = New DateTime(2007, 2, 5), _
    Key .Salary = 37000, _
    Key .FobCode = "COD", _
    Key .Active = True _
    }, _
    New With { _
    Key .Name = "Bill Little", _
    Key .Email = "bill.little@object.net", _
    Key .Start = New DateTime(2009, 6, 13), _
    Key .Salary = 53000, _
    Key .FobCode = "COO", _
    Key .Active = True _
    }, _
    New With { _
    Key .Name = "Bob Jones", _
    Key .Email = "bob.jones@object.net", _
    Key .Start = New DateTime(2008, 10, 6), _
    Key .Salary = 70000, _
    Key .PartCode = "Bill Foot", _
    Key .Active = True _
    }, _
    New With { _
    Key .Name = "Bob Train", _
    Key .Email = "bob.train@object.net", _
    Key .Start = New DateTime(2009, 5, 5), _
    Key .Salary = 68000, _
    Key .FobCode = "COD", _
    Key .Active = True _
    }, _
    New With { _
    Key .Name = "Chris Johnson", _
    Key .Email = "chris.johnson@object.net", _
    Key .Start = New DateTime(2009, 1, 25), _
    Key .Salary = 47000, _
    Key .FobCode = "COO", _
    Key .Active = True _
    } _
    }

    store.DataBind()
    End If
    End Sub


    <DirectMethod()> _
    Public Function ValidateSaveServer(isPhantom As Boolean, values As JsonObject) As Object
    If Not isPhantom Then
    Return New With { _
    Key .valid = True _
    }
    End If

    If Not values.ContainsKey("salary") OrElse Convert.ToInt32(values("salary")) < 1000 Then
    Return New With { _
    Key .valid = False, _
    Key .msg = "Salary must be >=1000 for new employee" _
    }
    End If


    Return New With { _
    Key .valid = True _
    }


    End Function
    End Class

    Search_window.aspx
    ----------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="SearchFOBMaster" runat="server">
    <ext:ResourceManager ID="myExtRM" runat="server" DisableViewState="false">
    </ext:ResourceManager>

    <input id="targetParentFormID" type="hidden" runat="server" />

    <div>
    <ext:Panel ID="PanelListView" runat="server" Header="false" >
    <Items>
    <ext:GridPanel ID="PanelGridListView" runat="server" Height="520" Cls="x-grid-custom" AutoScroll="true">
    <Store>
    <ext:Store ID="StoreGrid1" runat="server" OnReadData="Store_RefreshData"
    OnRefreshData="Store_RefreshData">
    <Model>
    <ext:Model ID="Model1" runat="server" IDProperty="rowid">
    <Fields>
    <ext:ModelField Name="fob_code" />
    <ext:ModelField Name="fob_desc" />

    </Fields>
    </ext:Model>
    </Model>
    <Sorters>
    <ext:DataSorter Property="fob_code" Direction="ASC" />
    </Sorters>
    </ext:Store>
    </Store>
    <ColumnModel ID="ColumnModel1" runat="server">

    <Columns>
    <ext:CommandColumn ID="CommandColumn2" runat="server" Width="60">
    <Commands>
    <ext:GridCommand Icon="Accept" CommandName="Select">
    <ToolTip Text="Select this record" />
    </ext:GridCommand>

    </Commands>
    <Listeners>
    <Command Handler="if (command == 'Select')
    {
    var sm = parent.App.GridPanel1.getSelectionModel();
    var selectedRow= sm.getSelection()[0];
    selectedRow.data.fobcode = record.data.fob_code;
    parent.App._OuterWin_.hide();
    }" />
    </Listeners>
    </ext:CommandColumn>
    </Columns>
    <Columns>
    <ext:Column ID="Column1" runat="server" DataIndex="fob_code" Text="FOB Code" Width="120" />
    <ext:Column ID="Column3" runat="server" DataIndex="fob_desc" Text="Description" Width="200" Flex="1" />
    <ext:Column ID="Column2" runat="server" DataIndex="rowid" Visible="false" />
    </Columns>
    </ColumnModel>
    <Plugins>
    <ext:FilterHeader ID="FilterHeader1" runat="server" OnCreateFilterableField="OnCreateFilterableField"
    UpdateBuffer="100" CaseSensitive="False" />
    </Plugins>

    <BottomBar>
    <ext:PagingToolbar ID="PagingToolbar1" runat="server">
    <Items>
    <ext:Label ID="Label2" runat="server" Text="Page size:" />
    <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="10" />
    <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
    <Items>
    <ext:ListItem Text="10" />
    <ext:ListItem Text="20" />
    <ext:ListItem Text="50" />
    </Items>
    <SelectedItems>
    <ext:ListItem Text="20" />
    </SelectedItems>
    <Listeners>
    <Select Handler="onSelect(this, #{PanelGridListView});" />
    </Listeners>
    </ext:ComboBox>
    </Items>
    <Plugins>
    <ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
    </Plugins>
    </ext:PagingToolbar>
    </BottomBar>
    <Listeners>
    <AfterRender Handler="var pnl = parent.App._OuterWin_.getSize();
    this.height=pnl.height-36;
    this.width=pnl.width-15;" />
    </Listeners>
    </ext:GridPanel>
    </Items>
    </ext:Panel>
    </div>
    </form>
    </body>
    </html>

    Search_window code behind
    -------------------------------------
    Imports Ext.Net
    Imports ExtX = Ext.Net.X
    Imports System.Xml

    Public Class Search_window
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not ExtX.IsAjaxRequest Then

    BindData()
    End If
    End Sub

    Protected Function OnCreateFilterableField(ByVal sender As Object, ByVal column As ColumnBase, ByVal defaultField As Field) As Field
    If column.DataIndex = "fob_code" Then
    DirectCast(defaultField, TextField).Icon = Icon.Magnifier
    End If

    Return defaultField
    End Function

    Protected Sub Store_RefreshData(ByVal sender As Object, ByVal e As StoreReadDataEventArgs)
    Me.BindData()
    End Sub

    Private Sub BindData()
    Dim gridData As New List(Of Object)() From { _
    New With { _
    Key .fob_code = "FOB", _
    Key .fob_desc = "FREE ON BOARD", _
    Key .rowid = 1 _
    }, _
    New With { _
    Key .fob_code = "COD", _
    Key .fob_desc = "CASH ON DELIVERY", _
    Key .rowid = 2 _
    }, _
    New With { _
    Key .fob_code = "COO", _
    Key .fob_desc = "CASH ON ORDER", _
    Key .rowid = 3 _
    }, _
    New With { _
    Key .fob_code = "FOC", _
    Key .fob_desc = "FREE OF CHARGE", _
    Key .rowid = 4 _
    } _
    }

    StoreGrid1.DataSource = gridData
    StoreGrid1.DataBind()
    End Sub

    End Class
    Attached Thumbnails Click image for larger version. 

Name:	extV2_att01.png 
Views:	12 
Size:	46.6 KB 
ID:	15841   Click image for larger version. 

Name:	extV2_att02.png 
Views:	12 
Size:	56.6 KB 
ID:	15851   Click image for larger version. 

Name:	extV2_att03.png 
Views:	14 
Size:	48.6 KB 
ID:	15861   Click image for larger version. 

Name:	extV2_att04.png 
Views:	15 
Size:	65.1 KB 
ID:	15871  
  2. #2

    I found the issues and they are solved!

    I solved them,
    I changed editor column to,
    <ext:Column ID="Column3" runat="server" Text="FOBCode" DataIndex="fobcode" Flex="1">
    <Editor>
    <ext:TextField ID="txtFOBCode" runat="server" AllowBlank="false">
    <RightButtons>
    <ext:Button ID="Button2" runat="server" Icon="Find">
    <Listeners>
    <Click Handler="createLvl_1_Window( 'Search FOB', '',
    'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
    </Listeners>
    </ext:Button>
    </RightButtons>
    </ext:TextField>

    </Editor>
    </ext:Column>

    And the return value from search window,
    <Listeners>
    <Command Handler="if (command == 'Select')
    {
    parent.App.txtFOBCode.setValue(record.data.fob_cod e);
    parent.App._OuterWin_.hide();
    }" />
    </Listeners>

    Thank you.
  3. #3
    Please use [CODE] tags, see #3.
    Forum Guidelines For Posting New Topics
  4. #4

    Please close this thread

    Hi Daniil, sorry for that.

    Please close this thread as I have found the solution. thank you very much.

Similar Threads

  1. [CLOSED] Disabling cell editing based on cell value in Ext.Net 2.1
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 30, 2013, 5:35 PM
  2. [CLOSED] Cell editing with complex editor
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 21, 2012, 5:21 PM
  3. Replies: 4
    Last Post: Jul 10, 2012, 5:35 PM
  4. [CLOSED] Editing cell of gridPanel
    By supera in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: May 23, 2012, 12:47 PM
  5. [CLOSED] ColumnTree cell editing
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 7:38 AM

Posting Permissions