Deleting row in GridPanel

  1. #1

    Deleting row in GridPanel

    Hi,

    I have a GridPanel which has a CommandColumn containing a delete button.
    If I click the button nothing happens, however if I click on the 'Name' column it then removes from the grid.

    Why won't it delete the row when I click the button?

    Here is the testing code:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                var store = this.GridPanel1.GetStore();
    
                store.DataSource = dtTest();
                store.DataBind();
            }
        }
    
        protected void odsInvigilator_Selecting(object sender, ObjectDataSourceMethodEventArgs e)
        {
            e.InputParameters["exam_id"] = Values.exam_id;
        }
    
        public DataTable dtTest()
        {
            DataTable dt = new DataTable();
            
            dt.TableName = "Test";
            dt.Columns.Add("name_id", typeof(int));
            dt.Columns.Add("name", typeof(string));
    
            for (int i = 1; i <= 5; i++)
            {
                dt.Rows.Add(i, "Name" + i.ToString());
            }
    
            return dt;
        }
    </script>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Test</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
            <div>
            <ext:GridPanel ID="GridPanel1" runat="server" Height="200" Width="550" Title="Test Names">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:JsonReader IDProperty="name_id">
                                <Fields>
                                    <ext:RecordField Name="name" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ctl279">
                    <Columns>
                        <ext:Column ColumnID="colInv" Header="Name" DataIndex="name" Width="400" />
                        <ext:CommandColumn Width="30">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:GridCommand>
                            </Commands>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
                <Listeners>
                    <Click Handler="#{GridPanel1}.deleteSelected();" />
                </Listeners>
            </ext:GridPanel>
        </div>
        </form>
    </body>
    </html>
  2. #2
    Hi,

    Clicks on GridCommand are handled in Command listener, not Click.

    So, please replace Click listener with:

    Example
    <Command 
        Handler="if (command == 'Delete') { 
                     this.deleteRecord(record); 
                 }" />
    See also
    https://examples1.ext.net/#/GridPane...s/Row_Command/ (ant another examples in <Commands> folder)
  3. #3
    Thanks,

    On a related question, if the GridPanel uses an ObjectDataSource with a delete method.
    Will the handler also run the delete method to remove from the table as well, or is there an additional step required to do this?
  4. #4
    No, it is not fired automatically.

    You could handle Remove listener of store. It is fired when record is deleted.
  5. #5
    I don't really follow.
    How would the record id get passed, won't the record id get deleted before the remove listener is fired?
  6. #6
    There are three arguments passed to Remove listener, including a removed record.

    See Remove event:
    http://dev.sencha.com/deploy/dev/doc...Ext.data.Store
  7. #7
    hi,

    i've implemented the same:

    javascript
    
     var cellClick = function(grid, rowIndex, columnIndex, e) {
               var t = e.getTarget(),
                    record = grid.getStore().getAt(rowIndex),  // Get the Record
                    columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id                
               
    
               if (t.className == "imgEdit" && columnId == "Details") {
                   //the ajax call is allowed
                   return true;
               }
    
               if (t.className == "imgEdit" && columnId == "Delete") {
                   //the ajax call is allowed                
                   return true;
               }
    
               //forbidden
               return false;
           };
    
      function Test(pnr,cmd)
            {            
                if (cmd == 'Delete')
                    RefObjX.DoConfirm(pnr);
                if (cmd == 'Edit')
                    RefObjX.ShowDetails(pnr);
            }
    
    ===================================================================
    grid panel:
    
     <ext:CommandColumn Header="Delete" Width="40">                    
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete" StandOut="false">                            
                                    <ToolTip Text="Delete" />                                
                                </ext:GridCommand>                                       
                            </Commands>
                        </ext:CommandColumn>   
    .....
    <Listeners>
                    <CellClick Fn="cellClick" />     
                    <Command Handler="Test(record.data.Projektnummer,command)" />                                   
     </Listeners>
    
    ====================================================================
    code behind:
    
     [DirectMethod]
            public void DoConfirm(string pNr)
            {
                // Manually configure Handler...
                //Msg.Confirm("Message", "Confirm?", "if (buttonId == 'yes') { CompanyX.DoYes(); } else { CompanyX.DoNo(); }").Show();
    
                // Configure individualock Buttons using a ButtonsConfig...
                if (authenticated == true)
                {
                    X.Msg.Confirm("message", "Ref-Objekt wirklich löschen ?", new MessageBoxButtonsConfig
                    {
                        Yes = new MessageBoxButtonConfig
                        {
                            Handler = "RefObjX.DoYes('" + pNr.ToString() + "')",
                            Text = "Ja RefObj"
                        },
                        No = new MessageBoxButtonConfig
                        {
                            Handler = "RefObjX.DoNo()",
                            Text = "Nein"
                        },
                        Cancel = new MessageBoxButtonConfig
                        {
                            Handler = "RefObjX.DoLib('" + pNr.ToString() + "')",
                            Text = "Ja RefObj mit LIB"
                        }
                    }).Show();
                }
                else
                {
                    X.Msg.Alert("FEHLER","keine Berechtigung !").Show();                
                }
            }
    
            [DirectMethod]
            public void DoYes(string pnr1)
            {
                ImmoBenchDataContext db = new ImmoBenchDataContext();
    
                var delObjects = from p in db.REF_objects
                                 where p.Projektnummer.Equals(pnr1)
                                 select p;
    
                db.REF_objects.DeleteAllOnSubmit(delObjects);           
    
                db.SubmitChanges();
                
                //this.Label1.Text = pnr1.ToString();
                
                this.GridPanel2.RefreshView();
                this.GridPanel2.Reload();
            }
  8. #8
    Do you mean that the problem is solved?
  9. #9
    I'm still having difficulty with this, I've added the remove method of the store to the command handler.
    But it is just removing from the GridPanel.

        <Listeners>
            <Command Handler="if (command == 'Delete') {#{Store1}.remove(record);this.deleteRecord(record);}" />
        </Listeners>
    Here is my GridPanel with an objectdatasource:
    <ext:GridPanel ID="gpInvigilators" runat="server" Height="200" Width="550" Title="Add Invigilators">
        <Store>
            <ext:Store ID="Store1" runat="server" DataSourceID="odsInvigilator">
                <Reader>
                    <ext:JsonReader IDProperty="inv_id">
                        <Fields>
                            <ext:RecordField Name="invigilator" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column ColumnID="colInv" Header="Invigilators" DataIndex="invigilator" Width="400" />
                <ext:CommandColumn Width="30">
                    <Commands>
                        <ext:GridCommand Icon="Delete" CommandName="Delete">
                            <ToolTip Text="Delete" />
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:ComboBox ID="cmbStaff" runat="server" DataIndex="Name" DisplayField="Name" ValueField="Name"
                        TypeAhead="false" LoadingText="Searching..." Width="400" PageSize="10"
                        HideTrigger="true" ItemSelector="div.search-item" MinChars="3">
                        <Store>
                            <ext:Store ID="Store3" runat="server" AutoLoad="false">
                                <Proxy>
                                    <ext:HttpProxy Method="POST" Url="~/ADSI.ashx" />
                                </Proxy>
                                <BaseParams>
                                    <ext:Parameter Name="prefixText" Value="" Mode="Value" />
                                </BaseParams>
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="Name" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <Template ID="Template1" runat="server">
                           <Html>
                               <tpl for=".">
                                  <div class="search-item" style="padding: 5px">
                                     {Name}
                                  </div>
                               </tpl>
                           </Html>
                        </Template>
                    </ext:ComboBox>
                    <ext:MenuSeparator Width="20" />
                    <ext:Button ID="btnAdd" runat="server" Text="Add" Icon="Disk" StandOut="True">
                        <DirectEvents>
                            <Click OnEvent="btnAdd_OnClick">
                                <ExtraParams>
                                    <ext:Parameter Name="invigilator" Value="#{cmbStaff}.getValue()" Mode="Raw" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </BottomBar>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" />
        </SelectionModel>
        <Listeners>
            <Command Handler="if (command == 'Delete') {#{Store1}.remove(record);this.deleteRecord(record);}" />
        </Listeners>
    </ext:GridPanel>
    <asp:ObjectDataSource ID="odsInvigilator" runat="server" 
        SelectMethod="GetInvigilatorsByExam" TypeName="InvigilatorsBLL" 
        OnSelecting="odsInvigilator_Selecting" DeleteMethod="DeleteInvigilator">
        <DeleteParameters>
            <asp:Parameter Name="inv_id" Type="Int32" />
        </DeleteParameters>
        <SelectParameters>
            <asp:Parameter Name="exam_id" DbType="Guid" />
        </SelectParameters>
    </asp:ObjectDataSource>
  10. #10
    Yes, .remove() method doesn't remove an object from server side collection.

Similar Threads

  1. [CLOSED] GridPanel - Context Menu (deleting gridpanel row)
    By digitek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 27, 2012, 8:22 AM
  2. Deleting a row from a GridPanel techniques.
    By chearner in forum 1.x Help
    Replies: 3
    Last Post: Nov 14, 2011, 7:58 PM
  3. [CLOSED] deleting item in combo box
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 09, 2011, 6:03 PM
  4. Replies: 2
    Last Post: Nov 18, 2008, 6:51 AM
  5. GridPanel Store and Deleting Records
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Sep 07, 2008, 12:18 PM

Tags for this Thread

Posting Permissions