CODEWITHSUNDEEP
javascriptextjsextjs4ext.netgridpanel
FREAKYHUNTER
FREAKYHUNTER

Reputation: 301

How to show/hide an item in a component column in gridpanel in ext.net?

I have this gridpanel:

<ext:GridPanel ID="GridPanel1" runat="server" Width="300px" Height="200px" Header="false">
    <Store>
        <ext:Store ID="Store1" runat="server">
            <Model>
                <ext:Model ID="Model1" runat="server">
                    <Fields>
                        <ext:ModelField Name="Name" Type="String" />
                    </Fields>
                </ext:Model>        
            </Model>
        </ext:Store>
    </Store>
        <ColumnModel>
            <Columns>
                <ext:ComponentColumn ID="comColName" runat="server" Flex="1" Text="Name">
                    <Component>
                        <ext:Container ID="container" runat="server" Layout="HBoxLayout">
                            <Items>
                                <ext:TextField ID="txt1" runat="server" Flex="1"></ext:TextField>
                                <ext:Button ID="btn1" runat="server" Width="22px" Icon="Add">                                    
                                </ext:Button>
                            </Items>
                        </ext:Container>
                    </Component>
                </ext:ComponentColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>

And the code behind is:

protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[] { 
                new object[] {},
                new object[] {},
                new object[] {},
                new object[] {},
                new object[] {},
                new object[] {}
            };

            this.Store1.DataBind();
        }

The screenshot looks like: enter image description here

What i want to do is display only the textfields at start, then display the add button at right when a textfield is clicked. All other buttons should be hidden at that time. How can I do this?I want to achieve this using client side scripting. Please help. Hiding another column while editing a column cell might work as well. Thank you.

Upvotes: 0

Views: 1965

Answers (1)

Daniil Veriga
Daniil Veriga

Reputation: 1851

Example

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            runat="server" 
            Width="300" 
            Height="200">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:ComponentColumn runat="server" Flex="1" Text="Name">
                        <Component>
                            <ext:Container runat="server" Layout="HBoxLayout">
                                <Items>
                                    <ext:TextField runat="server" Flex="1">
                                        <Listeners>
                                            <Focus Handler="this.ownerCt.getComponent('AddButton').show();" />
                                            <Blur Handler="this.ownerCt.getComponent('AddButton').hide();" />
                                        </Listeners>
                                    </ext:TextField>

                                    <ext:Button 
                                        runat="server" 
                                        ItemID="AddButton" 
                                        Width="22" 
                                        Icon="Add" 
                                        Hidden="true" />
                                </Items>
                            </ext:Container>
                        </Component>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>

By the way, there is a TextField's RightButtons collection which you might want to use instead. Here is an example.

Upvotes: 1

Related Questions