What's New?

Enable gridpanel command column button

  1. #1
    Jun 13, 2016, 9:58 AM

    Enable gridpanel command column button

    I have used preparetoolbar disable command button and it works fine

        <PrepareToolbar Fn="prepareToolbar"/>

    var prepareToolbar = function (grid, toolbar, rowIndex, record) {
               var firstButton = toolbar.items.get(0);
               firstButton.setDisabled(true);
               firstButton.setTooltip("Disabled");
    }
    but If I want to use SelectionChange to enable command button got error "Uncaught ReferenceError: App is not defined"

        <SelectionChange Fn="onSelectionChange" />
    var onSelectionChange = function (grid, selection) {
        App.gridCommandCol.commands[0].disabled = false;
        App.GridPanel.reconfigure();
    }
  2. #2
    Jun 14, 2016, 12:46 AM
    I tried this example but got view is not defined js error

    <%@ 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[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var prepareToolbar = function (grid, toolbar, rowIndex, record) {
            return grid.getSelectionModel().isSelected(record);
        };   
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Height="150">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    <ext:CommandColumn runat="server">
                        <Commands>
                            <ext:GridCommand CommandName="testCommand" Icon="Accept" />
                        </Commands>
                        <PrepareToolbar Fn="prepareToolbar" />
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single">
        <Listeners>
            <BeforeSelect Handler="var last = this.getLastSelected();

                                    if (last) {
                                        this.view.refreshNode(this.view.store.indexOf(last));
                                    }" />

            <Select Handler="this.view.refreshNode(index);" />
        </Listeners>
    </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Jun 16, 2016, 6:34 AM
    Hello! Nice sample test case!

    Here's a working approach for this:

    <%@ 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[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var prepareToolbar = function (grid, toolbar, rowIndex, record) {
            var firstButton = toolbar.items.get(0);
            if (grid.getSelectionModel().isSelected(record)) {
                firstButton.enable();
            } else {
                firstButton.disable();
            }
            console.log('refresh for: ' + record.id);
        };

        var selectHandler = function (item, record, index) {
            if (this.previousSelection) {
                this.view.refreshNode(this.previousSelection);
            };

            this.view.refreshNode(record);
        }

        Ext.define("Ext.grid.column.CommandColumn", {
            override: "Ext.grid.column.CommandColumn",
            renderer: function (value, meta, record, row, col, store) {
                if (meta) {
                    meta.tdCls = meta.tdCls || "";
                    meta.tdCls += " row-cmd-cell";
                }
                else {
                    var node = null;
                    if (this.view) {
                        node = this.view.getNode(record);
                    } else if (this.getNode) {
                        node = this.getNode(record);
                    }

                    if (node) {
                        node = Ext.fly(node).down("td[data-columnid=" + this.id + "]");
                        if (node) {
                            node.addCls("row-cmd-cell");
                        }
                    }
                }

                if (this.overOnly) {
                    return "<div class='row-cmd-placeholder'>" + this.overRenderer(value, meta, record, row, col, store) + "</div>";
                }

                return "";
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Height="150">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    <ext:CommandColumn runat="server" Text="CmdCol" ID="CmdCol">
                        <Commands>
                            <ext:GridCommand CommandName="testCommand" Icon="Accept" />
                        </Commands>
                        <PrepareToolbar Fn="prepareToolbar" />
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Single">
                    <Listeners>
                        <Deselect Handler="this.previousSelection=record;" />
                        <Select Fn="selectHandler" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>
    I hope this helps! And yes, there's a bug fix among the code :)
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Jun 23, 2016, 2:23 PM
    Thank you so much, work very well, plz close this.

Similar Threads

  1. How do I enable all command buttons in a gridpanel when a combo box selection occurs
    By Corby in forum 1.x Help
    Replies: 1
    Last Post: Sep 22, 2015, 8:46 AM
  2. Support with command GridPanel Command Button
    By simonespagna in forum 2.x Help
    Replies: 2
    Last Post: Jan 08, 2015, 8:37 PM
  3. [CLOSED] How to enable o command column disable
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 03, 2014, 1:46 PM
  4. [CLOSED] How can I enable a field to edit text in a GridPanel column using a grid command?
    By egdev in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 9:50 PM
  5. Add command column in gridpanel
    By tmducit in forum 1.x Help
    Replies: 1
    Last Post: May 27, 2011, 11:27 AM

Posting Permissions