[CLOSED] Hide gridpanel row through client side script

  1. #1

    [CLOSED] Hide gridpanel row through client side script

    Hi
    How to hide a gridpanel's row through client side script.
    Wish to do it on a control's event.
    Last edited by Daniil; Jul 18, 2013 at 12:37 PM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    I see the three ways to do it. I am not sure which is more appropriate in your scenario.

    Way 1 - View's GetRowClass
    <%@ 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[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var getRowClass = function (record, index, rowParams, store) {
                if (record.data.hidden) {
                    return "x-hide-display";
                }
            };
    
            var hide = function () {
                App.GridPanel1.getStore().getAt(1).set("hidden", true);
            };
    
            var show = function () {
                App.GridPanel1.getStore().getAt(1).set("hidden", false);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Hide row #2" Handler="hide" />
    
            <ext:Button runat="server" Text="Show row #2" Handler="show" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                    <ext:ModelField Name="hidden" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <GetRowClass Fn="getRowClass" />
                    </ext:GridView>
                </View>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Way 2 - filter Store
    <%@ 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[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var hide = function () {
                App.GridPanel1.getStore().filterBy(function (record, id) {
                    return this.indexOf(record) !== 1;
                });
            };
    
            var show = function () {
                App.GridPanel1.getStore().clearFilter();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Hide row #2" Handler="hide" />
    
            <ext:Button runat="server" Text="Show row #2" Handler="show" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Way 3 - rebind the Store with the data excluding the record which you don't want to see. Or just remove it.
  3. #3
    Hi Daniil,
    Our scenario is as follows

    cshtml has a editable gridpanel. In this user can;
    1) Edit some cell values (used CellEditing Plugin)
    2) Add new rows (used store.insert() and App.grid.editingPlugin.startEditByPosition()] )
    3) Delete rows (here we update the store setting those respective records' IsDeleted column value to true )
    All the above operation occur at client side.

    Screen has a submit button which through direct event sends updated store to controller
    de.Click.ExtraParams.Add(new Parameter
                                           {
                                               Name = "data",
                                               Value = "#{Storenm}.getChangedData()",
                                               Mode = ParameterMode.Raw,
                                               Encode = true
                                           });
    And then at server side we have function which at one go updates all records to database.
    public ActionResult HandleChanges(StoreDataHandler handler)
    {
    ...
    ...
    }
    Requirement:
    When user clicks a record for delete that respective row should get hiden through client side script.

    As the Hide is to happen as per user operation, we cannot go with Way 1 - View's GetRowClass

    On Trying Way 2 - filter Store the record got hided but the StoreDataHandler doesnot get updated record.

    We haven't gone with Way 3 - rebind the Store with the data excluding the record which you don't want to see. Or just remove it.
    as it's not actually a delete instead it is update and hide

    Thus, kindly guide us for a way wherein we, one control's event from the client side hide gridpanel row(s).
  4. #4
    Please clarify why do not you want to delete records in fact instead of marking them with "isDeleted"?
  5. #5
    Because, records marked for delete by user (deleted) are required for processing in
    public ActionResult HandleChanges(StoreDataHandler handler){...}
    .
  6. #6
    But the really removed records will be also available in a StoreDataHandler.
    http://mvc.ext.net/#/GridPanel_Update/Batch/
  7. #7
    Ya Daniil, removed records are available in Deleted records collection.
    Thanks
  8. #8
    So, is the issue resolved or am I misunderstanding something?
  9. #9
    Issue is resolved :)

Similar Threads

  1. Replies: 2
    Last Post: Jul 17, 2013, 7:43 AM
  2. Replies: 1
    Last Post: Aug 23, 2012, 7:07 AM
  3. Replies: 1
    Last Post: Nov 18, 2011, 5:29 PM
  4. [CLOSED] Disable/Hide row in PropertyGrid on client side
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 09, 2011, 5:14 PM
  5. client side script after ajax event
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Nov 25, 2009, 2:30 AM

Tags for this Thread

Posting Permissions