[CLOSED] Grid Filter disable in edit mode

  1. #1

    [CLOSED] Grid Filter disable in edit mode

    Hi,

    We are not able to disable the Grid Filter while click of Edit button in a Grid. Below is the sample to reproduce the same.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    <script runat="server">
        private class Data
        {
            private int _id = 0;
            public int ID { get { return _id; } set { this._id = value; } }
            public string Name { get; set; }
            public string Description { get; set; }
        }
    
        private void BindData(List<Data> datalist)
        {
            //Actually data retrive from database only,  for this sample i used datalist
            storeGrid.DataSource = datalist;
            storeGrid.DataBind();
    
        }
    
        int maxID = 0;
    
        protected void storeGrid_BeforeChanged(object sender, BeforeStoreChangedEventArgs e)
        {
    
            List<Data> savedData = new List<Data>();
    
            string json = e.DataHandler.JsonData;
            StoreDataHandler dataHandler = new StoreDataHandler(json);
            List<Data> dataContainer = dataHandler.ObjectData<Data>();
            maxID = 1;
            foreach (Data data in dataContainer)
            {
                if (e.Action == StoreAction.Create)
                {
                    data.ID = maxID;
                    //Call Save Method to save the data
    
                    //For this sample i used a temporary list to add object to the list. This list is used to rebind the grid.
                    savedData.Add(data);
    
                    maxID++;
                }
            }
    
            //For this sample i passed temporary list 
            BindData(savedData);
            this.ResourceManager1.AddScript("editMode = false;");
    
        }
    
        protected void storeGrid_AfterRecordInserted(object sender, AfterRecordInsertedEventArgs e)
        {
            e.Keys.Add("ID", maxID);
        }
    
        protected void RowSelection(object sender, DirectEventArgs e)
        {
            string JSONValue = e.ExtraParams["Values"].ToString();
            var dataObject = JSON.Deserialize<List<Data>>(JSONValue);
            int idValue = 0;
            if (dataObject != null && dataObject.Count > 0)
                idValue = Convert.ToInt32(dataObject[0].ID);
    
        }
         
     
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" />
            <div>
                <ext:GridPanel ID="gridpanel" runat="server" Border="false"
                    Width="500" Height="400">
                    <Store>
                        <ext:Store ID="storeGrid" runat="server" IgnoreExtraFields="true" OnBeforeStoreChanged="storeGrid_BeforeChanged" OnAfterRecordInserted="storeGrid_AfterRecordInserted">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                    <Fields>
                                        <ext:ModelField Name="ID" />
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Description" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Listeners>
                                <Write Handler="Ext.Msg.alert('Write', 'The data successfully saved');" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:Column ID="Name" ColumnID="Name" runat="server" DataIndex="Name" Text="Name" Width="150">
                                <PrepareCommand Args="grid,command,record,row,col,value" FormatHandler="False" Handler="" />
                                <Editor>
                                    <ext:TextField ID="txtName" runat="server" StyleSpec="text-transform:uppercase;"
                                        MaxLength="50" EnableKeyEvents="true">
                                        <Listeners>
                                            <Show Handler="this.focus.defer(50, this);" />
                                            <KeyUp Handler="if (e.keyCode >= 65 && e.keyCode <= 90) this.setValue(this.getValue().toUpperCase());" />
                                        </Listeners>
                                    </ext:TextField>
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Description" ColumnID="Description" runat="server" DataIndex="Description" Text="Description" Width="250">
                                <PrepareCommand Args="grid,command,record,row,col,value" FormatHandler="False" Handler="" />
                                <Editor>
                                    <ext:TriggerField ID="txtDesc" runat="server" StyleSpec="text-transform:uppercase;"
                                        MaxLength="50" EnableKeyEvents="true" TriggerIcon="Search">
                                        <Listeners>
                                            <Show Handler="this.focus.defer(50, this);" />
                                            <KeyUp Handler="if (e.keyCode >= 65 && e.keyCode <= 90) this.setValue(this.getValue().toUpperCase());" />
                                        </Listeners>
    
                                    </ext:TriggerField>
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="ID" ColumnID="ID" runat="server" DataIndex="ID">
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <Features>
                        <ext:GridFilters runat="server">
                            <Filters>
                                <ext:StringFilter DataIndex="Name">
                                </ext:StringFilter>
                                <ext:StringFilter DataIndex="Description">
                                </ext:StringFilter>
                            </Filters>
                        </ext:GridFilters>
                    </Features>
                    <Plugins>
                        <ext:CellEditing ID="CellEditing1" runat="server">
                        </ext:CellEditing>
                    </Plugins>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" Mode="Single" runat="server">
                            <Listeners>
                                <BeforeSelect Fn="ValidRow">
                                </BeforeSelect>
                            </Listeners>
                            <DirectEvents>
                                <Select OnEvent="RowSelection" ShowWarningOnFailure="false" Timeout="120000" Single="false">
                                    <ExtraParams>
                                        <ext:Parameter Name="Values" Value="Ext.encode(#{gridpanel}.getRowsValues({selectedOnly: true, visibleOnly: false, dirtyRowsOnly: false, currentPageOnly: true}))"
                                            Mode="Raw" />
                                    </ExtraParams>
                                </Select>
                            </DirectEvents>
                        </ext:CheckboxSelectionModel>
                    </SelectionModel>
                    <Buttons>
                        <ext:Button ID="btn_add1" runat="server" AutoPostBack="false" Text="Add Row">
                            <Listeners>
                                <Click Delay="1" Handler="newRow();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="btn_save1" runat="server" AutoPostBack="false" Text="Save">
                            <Listeners>
                                <Click Delay="1" Handler="#{storeGrid}.sync();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="Btn_Edit" runat="server" Text="Edit">
                            <Listeners>
                                <Click Handler="EnableDisableFilters();"></Click>
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="Btn_Cancel1" runat="server" Text="Cancel">
                        </ext:Button>
                    </Buttons>
                </ext:GridPanel>
    
            </div>
        </form>
        <script>
            var editMode = false;
            var alert = '';
            function ValidRow() {
                return !editMode;
            }
            function newRow() {
                editMode = true;
                var rowIndex = Sample.gridpanel.store.getCount();
                Sample.gridpanel.store.insert(rowIndex, {});
            }
    
            function EnableDisableFilters() {            
                var i;
                for (i = 1; i < Sample.gridpanel.columns.length; i++) {
                    Sample.gridpanel.columns[i].sortable = false;
                    Sample.gridpanel.columns[i].menuDisabled = true;
                }
            }
        </script>
    </body>
    </html>
    The below mentioned code which is used to disable the Grid Filter, works fine in 1x version but not in 2x version.
    function EnableDisableFilters() {
    var i;
    for (i = 1; i < Sample.gridpanel.columns.length; i++) {
    Sample.gridpanel.columns[i].sortable = false;
    Sample.gridpanel.columns[i].menuDisabled = true;
    }
    }
    Please guide us to the solution!
    Last edited by Daniil; Sep 16, 2014 at 10:53 AM. Reason: [CLOSED]
  2. #2
    Hi @speedstepmem4,

    I've tried this code with Ext.NET v1 and it throws a JavaScript error.
    function EnableDisableFilters() {
        var i;
        for (i = 1; i < Sample.gridpanel.columns.length; i++) {
            Sample.gridpanel.columns[i].sortable = false;
            Sample.gridpanel.columns[i].menuDisabled = true;
        }
    }
    Also I don't quite understand how it is related to disabling of GridFilters. Please clarify what do you mean under disabling GridFilters?
  3. #3

    Disable Grid Filter on button click.

    Hi Daniil,


    Sorry for making you confused. Please refer the code and the comments noted down.


    Code in 1x version:
    <%@ 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)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71, 2, 3, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29, 0, 1, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83, 8, 4, "9/1 12:00am" },
                    new object[] { "American Express Company", 5, 0, 0, "9/1 12:00am" },               
                };
    
    
                this.Store1.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 id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    
            <h1>Columns model ajax operation</h1>
    
    
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Int" />
                            <ext:RecordField Name="change" Type="Int" />
                            <ext:RecordField Name="pctChange" Type="Int" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                StoreID="Store1"
                StripeRows="true"
                Title="Array Grid"
                TrackMouseOver="true"
                Width="600"
                Height="350"
                AutoExpandColumn="Company">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                        <ext:Column Header="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="change" />
                        <ext:Column Header="Change %" Width="75" DataIndex="pctChange" />
                        <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
                <Plugins>
                    <ext:GridFilters runat="server">
                        <Filters>
                            <ext:StringFilter DataIndex="company"></ext:StringFilter>
                            <ext:NumericFilter DataIndex="price"></ext:NumericFilter>
                            <ext:NumericFilter DataIndex="change"></ext:NumericFilter>
                            <ext:NumericFilter DataIndex="pctChange"></ext:NumericFilter>
                            <ext:DateFilter DataIndex="lastChange"></ext:DateFilter>
                        </Filters>
                    </ext:GridFilters>
                </Plugins>
                <BottomBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:ToolbarFill />
                            <ext:Button ID="Button1" runat="server"
                                Text="DisableMenu">
                                <Listeners>
                                    <Click Handler="EnableDisableFilters(false)" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server"
                                Text="EnableMenu">
                                <Listeners>
                                    <Click Handler="EnableDisableFilters(true);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:GridPanel>
        </form>
        <script type="text/jscript">
            function EnableDisableFilters(bfilter)
            {           
              var i;    
              for (i = 0; i < ColumnModel1.columns.length; i++) {          
                 ColumnModel1.columns[i].menuDisabled = !bfilter;
                }
            }
        </script>
    </body>
    </html>

    By using this code we are able to enable/disable the grid menu filter as shown in the attached screenshot.


    The same code part is used in 2x version as shown in the 1st post. But we are not able to disable the grid menu filter area.
    This is what we meant in the first post. Hope you are now able to understand us quite well.
    Looking for your guidance.
    Attached Thumbnails Click image for larger version. 

Name:	Filter.jpg 
Views:	20 
Size:	49.1 KB 
ID:	14951  
  4. #4
    I still don't quite understand. You are talking about the Filters option of a Column header's menu, but you are using the menuDisabled option here:
    for (i = 0; i < ColumnModel1.columns.length; i++) {          
        ColumnModel1.columns[i].menuDisabled = !bfilter;
    }
    But the menuDisabled config option doesn't deal with the Filters menu option. It deals with the entire header menu.
    http://docs.sencha.com/extjs/4.2.1/#...g-menuDisabled

    Also just changing a menuDisabled config option on the fly is not going to work.

    The above statements are actual for Ext.NET v1 as well.

    So, the following confuses:

    1. Why are you talking about the filters options, but trying to disable the entire menu? I am still a bit unsure, you need to disable the entire menu or the Filters option only.

    2. You say that the same code works in Ext.NET v1, but I see that is not going to work...

    Please provide a working test case for Ext.NET v1. I think it will clarify everything. And, finally, we will try to help you to migrate that test case to Ext.NET v2.
  5. #5
    Hi Daniil,

    1. Why are you talking about the filters options, but trying to disable the entire menu?
    We need to disable the entire menu item on the click of DisableMenu button Click.
    Kindly guide us.
  6. #6
    Hi Daniil,

    1. Why are you talking about the filters options, but trying to disable the entire menu? I am still a bit unsure, you need to disable the entire menu or the Filters option only.
    We need to disable the entire menu on the DisableMenu Button click. Please guide us to the goal.
  7. #7
    You can hide a menu trigger element.
    App.Column1.triggerEl.hide();

Similar Threads

  1. Replies: 3
    Last Post: Oct 11, 2013, 10:28 PM
  2. Replies: 20
    Last Post: Jul 29, 2013, 11:11 AM
  3. [CLOSED] Detect Grid Edit Mode
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 25, 2011, 7:18 PM
  4. Replies: 3
    Last Post: Jun 03, 2011, 12:10 PM
  5. [CLOSED] Date Value is not getting formatted during Edit mode in Grid Panel
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 11, 2010, 7:41 PM

Posting Permissions