What's New?

[CLOSED] disable gridpanel including toolbar

  1. #1
    Jul 27, 2010, 9:06 AM

    [CLOSED] disable gridpanel including toolbar

    Hi,

    How can i disable my gridpanel in codebehind?

    If u use "gridpanel.enable = false" then the gridpanel is still enabled. If i use "gridpanel.disable = true" then the gridpanel is disabled, but my toolbar isn't.

    Thanx
    Last edited by geoffrey.mcgill; Jul 28, 2010 at 9:11 PM.
  2. #2
    Jul 27, 2010, 9:35 AM
    Hello!

    Please look at this example. There the grid panel is disabled or enabled with both toolbars (top and bottom). If it wouldn't make sense please provide us with your sample code.

    <%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new List<Company> 
         { 
             new Company("3m Co", 71.72, 0.02, 0.03),
             new Company("Alcoa Inc", 29.01, 0.42, 1.47),
             new Company("Altria Group Inc", 83.81, 0.28, 0.34)
         };

        this.Store1.DataBind();
    }

    public class Company
    {
        public Company(string name, double price, double change, double pctChange)
        {
            this.Name = name;
            this.Price = price;
            this.Change = change;
            this.PctChange = pctChange;
        }

        public string Name { get; set; }
        public double Price { get; set; }
        public double Change { get; set; }
        public double PctChange { get; set; }
    }

    protected void DisableClick(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Disabled = true;
    }

    protected void EnableClick(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Disabled = false;
    }
</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>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="Name" />
                    <ext:RecordField Name="Price" />
                    <ext:RecordField Name="Change" />
                    <ext:RecordField Name="PctChange" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
        Title="Company List" Width="600" Height="350" AutoExpandColumn="Company">
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="Name" />
                <ext:Column Header="Price" Width="75" DataIndex="Price"/>
                <ext:Column Header="Change" Width="75" DataIndex="Change"/>
                <ext:Column Header="Change" Width="75" DataIndex="PctChange"/>
            </Columns>
        </ColumnModel>
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Some button" Icon="Accept">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <BottomBar>
            <ext:PagingToolbar runat="server">
            </ext:PagingToolbar>
        </BottomBar>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Disable grid panel">
        <DirectEvents>
            <Click OnEvent="DisableClick" />
        </DirectEvents>
    </ext:Button>
    <ext:Button ID="Button1" runat="server" Text="Enable grid panel">
        <DirectEvents>
            <Click OnEvent="EnableClick" />
        </DirectEvents>
    </ext:Button>
</body>
</html>
  3. #3
    Jul 27, 2010, 9:43 AM
    If you would like to disable or enable a grid panel on client-side using JavaScript please use the respective disable and enable methods.

    someGridPanel.disable();

someGridPanel.enable();
  4. #4
    Jul 27, 2010, 10:03 AM
    I need to disable the gridpanel on server-side.
    The code u suggested is fine, but the problem still exists, the toolbar looks disabled, but i'm still able to push the buttons in the toolbar.



    <ext:GridPanelrunat="server"ID="GridPanelAddress"StoreID="StoreAddress"AutoExpandColumn="CTDAAddressLine1"Border="false"Height="180">
<TopBar>
<ext:ToolbarID="ToolbarAddress"runat="server">
<Items> 
<ext:ToolbarButtonrunat="server"ID="btnAddAddress"IconCls="toolbar_button_new_normal"Text="New">
<Listeners>
<ClickHandler="Coolite.AjaxMethods.AddAddress();"/>
</Listeners>
<ToolTips>
<ext:ToolTipID="TooltipAddAddress"runat="server"Html="Add New"/>
</ToolTips>
</ext:ToolbarButton>
<ext:ToolbarSpacerWidth="3"/>
<ext:ToolbarButtonrunat="server"ID="btnEditAddress"Iconcls="toolbar_button_open_normal">
<Listeners>
<ClickHandler="if(#{GridPanelAddress}.getSelectionModel().hasSelection()) {Coolite.AjaxMethods.EditAddress();}"/>
</Listeners>
<ToolTips>
<ext:ToolTipID="TooltipEditAddress"runat="server"Html="Edit"/>
</ToolTips>
</ext:ToolbarButton>
<ext:ToolbarSpacerWidth="3"/>
<ext:ToolbarButtonrunat="server"ID="btnDeleteAddress"IconCls="toolbar_button_delete_normal">
<Listeners>
<ClickHandler="if(#{GridPanelAddress}.getSelectionModel().hasSelection()) {Ext.Msg.confirm('Delete Rows', 'Are you sure u want to delete this address?', function(btn) {
if (btn == 'yes') {
Coolite.AjaxMethods.DeleteAddress();
}
GridPanelAddress.view.focusEl.focus(); 
})}"/>
</Listeners>
<ToolTips>
<ext:ToolTipID="TooltipDeleteAddress"runat="server"Html="Delete"/>
</ToolTips>
</ext:ToolbarButton> 
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:ColumnDataIndex="CTDAAddressLine1"ColumnID="CTDAAddressLine1"Header="Address line 1"Sortable="true"/>
<ext:ColumnDataIndex="CTDACity"Header="City"Sortable="true"/>
<ext:ColumnDataIndex="CTDAZip"Header="Zip"Sortable="true"/>
<ext:ColumnDataIndex="CTDACountryName"Header="Country"Sortable="true"/>
<ext:CheckColumnDataIndex="CTDAIsActive"Header="Active"Sortable="false"/> 
</Columns>
</ColumnModel>
<LoadMaskShowMask="true"/>
<SaveMaskShowMask="true"/>
<SelectionModel>
<ext:RowSelectionModelID="RowSelectionModelAddress"runat="server"SingleSelect="true"> 
</ext:RowSelectionModel>
</SelectionModel>
<Listeners>
<RowDblClickHandler="Coolite.AjaxMethods.EditAddress();"/>
<RowContextMenuHandler="e.preventDefault(); #{GridPanelAddress}.getView().focusRow(rowIndex);#{GridPanelAddress}.getSelectionModel().selectRow(rowIndex); #{RowContextMenuAddress}.dataRecord = this.store.getAt(rowIndex);#{RowContextMenuAddress}.showAt(e.getXY());"/>
</Listeners> 
<KeyMap>
<ext:KeyBinding>
<Keys>
<ext:KeyCode="ENTER"/>
</Keys>
<Listeners>
<EventHandler="if(#{GridPanelAddress}.getSelectionModel().hasSelection()) {Coolite.AjaxMethods.EditAddress();}"/>
</Listeners>
</ext:KeyBinding>
<ext:KeyBinding>
<Keys>
<ext:KeyCode="DELETE"/>
</Keys>
<Listeners>
<EventHandler="if(#{GridPanelAddress}.getSelectionModel().hasSelection()) {Ext.Msg.confirm('Delete Rows', 'Are you sure u want to delete this address?', function(btn) {
if (btn == 'yes') {
Coolite.AjaxMethods.DeleteAddress();
}
GridPanelAddress.view.focusEl.focus(); 
})}"/>
</Listeners>
</ext:KeyBinding>
<ext:KeyBinding>
<Keys>
<ext:KeyCode="N"/>
</Keys>
<Listeners>
<EventHandler="Coolite.AjaxMethods.AddAddress();"/>
</Listeners>
</ext:KeyBinding> 
</KeyMap>
</ext:GridPanel>
    Last edited by Daniil; Jul 27, 2010 at 12:28 PM. Reason: Please use [code] tags (square brackets)
  5. #5
    Jul 27, 2010, 12:00 PM
    Hi,

    Unfortunately, your code doesn't demonstrate the issue (the toolbar buttons are not clickable after grid disabling)
    Please provide full test page which we can locally
  6. #6
    Jul 27, 2010, 12:51 PM
    I'm not able to reproduce the issue too.
    So, you could use the Disabled property of your Toolbar control also in the place of code where you disable the GridPanel control. Please try it if it's hard to provide us with a sample code that causes the issue. Something like this:

    <%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new List<Company> 
         { 
             new Company("3m Co"),
             new Company("Alcoa Inc"),
             new Company("Altria Group Inc")
         };
        this.Store1.DataBind();
    }

    public class Company
    {
        public Company(string name)
        {
            this.Name = name;
        }

        public string Name { get; set; }
  
    }

    protected void DisableClick(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Disabled = true;
        this.TopBar.Disabled = true;
    }

    protected void EnableClick(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Disabled = false;
        this.TopBar.Disabled = false;
    }
</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>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="Name" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
        Title="Company List" Width="600" Height="350" AutoExpandColumn="Company">
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="Name" />
            </Columns>
        </ColumnModel>
        <TopBar>
            <ext:Toolbar ID="TopBar" runat="server">
                <Items>
                    <ext:Button runat="server" Text="Some button" Icon="Accept">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Disable grid panel">
        <DirectEvents>
            <Click OnEvent="DisableClick" />
        </DirectEvents>
    </ext:Button>
    <ext:Button ID="Button1" runat="server" Text="Enable grid panel">
        <DirectEvents>
            <Click OnEvent="EnableClick" />
        </DirectEvents>
    </ext:Button>
</body>
</html>
    P.S. If you need this sample code based on one of the Coolite versions of toolkit (not Ext.Net) please say.
    Last edited by Daniil; Jul 27, 2010 at 12:54 PM.
  7. #7
    Aug 31, 2010, 11:34 AM
    I know what the problem was, it was because the "DeferredRender" property of my tabpanel was equal to false, now it's fixed.
    DeferredRender="false"

Similar Threads

  1. [CLOSED] How to disable coolite toolbar button
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 24, 2012, 5:52 AM
  2. [CLOSED] How to disable toolbar buttons or hide toolbar TablePanel when all the tabs are closed
    By ISI in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 25, 2011, 9:35 AM
  3. [CLOSED] Including BaseParams in store shows "NaN" in the paging toolbar
    By Rajesh_Kumar in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 10, 2010, 7:10 AM
  4. Disable all Items in Toolbar
    By real_unreal in forum 1.x Help
    Replies: 1
    Last Post: Feb 05, 2010, 5:45 PM
  5. ScriptManager - always including ext-all.js. Want ext-core.js
    By kryptonian in forum 1.x Help
    Replies: 2
    Last Post: Aug 25, 2009, 1:07 PM

Posting Permissions