[CLOSED] How to show data input controls at gridpanel row to add new information?

**rnachman** · Apr 18, 2012, 2:35 PM

Hi,

I have one requirement like add reply to each comment in grid panel like in screenshot. I have populated all comments information in a gridpanel. Each comment has one Add button to add reply to the comment. While clicking on Add button, the TextField and Save button needs to show at bottom of selected comment and once save these controls automatically disappear and entered reply should show below the comment. Can you please let me know this scenario is possible with grid panel?

Click image for larger version.

Name: RowExpanderAddrow.PNG
Views: 167
Size: 19.0 KB
ID: 4126

**rnachman** · Apr 18, 2012, 3:59 PM

Hi,

Here is my example code. Can you please check this why the gridpanel is not default to expand even expand all listener added to store, and also expand the row and see the template added to row expander is not showing while adding component to row expander. I need to implement the above requirement.


<%@ Page Language="VB" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<%@ Import Namespace="System.Data" %>
 
<script runat="server">
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Ext.Net.X.IsAjaxRequest Then
            Call LoadAllComments()
        End If
    End Sub
  
    Public Sub LoadAllComments()
        storeComments.DataSource = GetAllCommentsData()
        storeComments.DataBind()
    End Sub
  
    Private Function GetAllCommentsData() As DataTable
        Dim dt As New DataTable
        Dim dr As DataRow
        Dim i As Integer
  
        dt.Columns.Add("RECORD_ID")
        dt.Columns.Add("COMMENT")
        dt.Columns.Add("COMMENT_BY")
        dt.Columns.Add("COMMENT_TYPE")
  
  
        For i = 0 To 10
  
            dr = dt.NewRow()
            dr(0) = Format(i, "00000000")
            dr(1) = "Status Info " & i.ToString()
            dr(2) = "User " & i.ToString()
            dr(3) = "Type " & i.ToString()
            dt.Rows.Add(dr)
  
        Next
  
        Return dt
  
    End Function
  
    Public Sub ReloadGridInfo(ByVal sender As Object, ByVal e As DirectEventArgs)
        Call LoadAllComments()
    End Sub
</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>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Store ID="storeComments" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="RECORD_ID">
                <Fields>
                    <ext:RecordField Name="RECORD_ID" />
                    <ext:RecordField Name="COMMENT" />
                    <ext:RecordField Name="COMMENT_BY" />
                    <ext:RecordField Name="COMMENT_TYPE" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <DataChanged Handler="#{grdLoansSummary}.getRowExpander().collapseAll(); 
                        #{grdLoansSummary}.getRowExpander().expandAll();" Delay="10" />
        </Listeners>
    </ext:Store>
    <ext:Viewport ID="Viewport1" runat="server" StyleSpec="bg" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="pnlCmts" runat="server" Region="Center" Layout="BorderLayout">
                <Items>
                    <ext:GridPanel ID="grdLoansSummary" runat="server" StoreID="storeComments" StripeRows="true"
                        AutoExpandColumn="COMMENT_TYPE" AutoExpandMax="5000" Height="280" Region="Center">
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
                        <Plugins>
                            <ext:RowExpander ID="RowExpander1" runat="server">
                                <Template ID="Template2" runat="server">
                                    <Html>
                                        <p><b>Comment:</b><br> {COMMENT}</p>
                                    </Html>
                                </Template>                                
                                <Component>                                
                                    <ext:FormPanel ID="RowEditor1" runat="server" BodyPadding="6" Height="30" Border="false">
                                        <Items>
                                            <ext:CompositeField ID="CompositeField1" runat="server">
                                                <Items>
                                                    <ext:TextField ID="TextField1" runat="server" Name="company" FieldLabel="Reply" Flex="8" />
                                                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" Flex="1">                                                        
                                                    </ext:Button>
                                                </Items>
                                            </ext:CompositeField>
                                        </Items>
                                    </ext:FormPanel>
                                </Component>
                            </ext:RowExpander>
                        </Plugins>
                        <ColumnModel ID="ColumnModel4" runat="server">
                            <Columns>
                                <ext:Column ColumnID="RECORDID" Header="RECORD ID" DataIndex="RECORD_ID" Width="100">
                                </ext:Column>
                                <ext:Column ColumnID="COMMENTBY" Header="User" DataIndex="COMMENT_BY" Width="100">
                                </ext:Column>
                                <ext:Column ColumnID="COMMENTTYPE" Header="Comment type" DataIndex="COMMENT_TYPE">
                                </ext:Column>
                                <ext:CommandColumn Header="Add" Width="100">
                                    <Commands>
                                        <ext:GridCommand Icon="Add" CommandName="cmdAdd">
                                        </ext:GridCommand>
                                    </Commands>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <Listeners>
                            <%--<Command Handler="#{RowEditor1}.record = record; #{RowEditor1}.getForm().loadRecord(record);" />--%>
                            <%--<Command Handler="#{RowEditor1}.show();" />--%>
                        </Listeners>
                    </ext:GridPanel>
                </Items>
                <Buttons>
                    <ext:Button ID="btnRefresh" runat="server" Text="Reload Data">
                        <DirectEvents>
                            <Click OnEvent="ReloadGridInfo">
                                <EventMask ShowMask="true" Msg="Loading..." MinDelay="1000" />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Apr 18, 2012, 6:23 PM

Hi,

RowExpander doesn't support both - Template and Component - at the same time.

Here is some simplified example how I would try to achieve the requirement.

It's not fully implement, just demonstration and a possible start point for you.

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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", new string[] { "comment1", "comment2" } },
                new object[] { "test2", new string[] { } },
                new object[] { "test3", new string[] { "comment1", "comment2", "comment3" } },
            };
            store.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 runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var getRowClass = function (record, index, rowParams, store) {
            var rowBody = "",
                comments = record.get("comments");

            Ext.each(comments, function (c) {
                rowBody += "<p>" + c + "</p>";
            });

            rowParams.body = rowBody;
        };
        

        var onCommand = function (command, record, rowIndex, colIndex) {
            var grid = this,
                panel,
                row,
                xy;

            if (command === "addComment") {
                panel = grid.bin;
                
                row = Ext.get(grid.getView().getRow(rowIndex));

                if (!panel.rendered) {
                    panel.render(Ext.getBody());
                }

                panel.get(0).clear();
                panel.show();
                panel.setPosition(row.getLeft(), row.getBottom());
            }
        };

        var onAdd = function (btn) {
            // some code to add a new comment

            btn.ownerCt.hide();
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Bin>
                <ext:Panel
                    runat="server" 
                    Height="22" 
                    Layout="HBoxLayout" 
                    Floating="true"
                    Width="150"
                    Border="false">
                    <Items>
                        <ext:TextField runat="server" Width="100" />
                        <ext:Button runat="server" Text="Submit" Width="50">
                            <Listeners>
                                <Click Fn="onAdd" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
            </Bin>
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="comments" IsComplex="true" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" />
                    <ext:ImageCommandColumn Width="25">
                        <Commands>
                            <ext:ImageCommand CommandName="addComment" Icon="Add" />
                        </Commands>
                    </ext:ImageCommandColumn>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" EnableRowBody="true">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
            <Listeners>
                <Command Fn="onCommand"/>
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Apr 18, 2012, 6:42 PM

Even better would be the following solution:

1. Use

EnableRowBody="true"

and GetRowClass to show a data.

The same as I did.

2. Use RowExpander with Component for adding comments.

**Daniil** · Apr 19, 2012, 10:42 AM

Originally Posted by Daniil

Even better would be the following solution:

1. Use

EnableRowBody="true"

and GetRowClass to show a data.

The same as I did.

2. Use RowExpander with Component for adding comments.

Not so easy. RowExpander defines its own GetRowClass, so it's not possible to set up your one.

Finally, I can suggest the following solution. Again - a partial solotuion, just a start point for you. Now it doesn't add comments, though it should not be a problem.

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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", new string[] { "comment1", "comment2" } },
                new object[] { "test2", new string[] { } },
                new object[] { "test3", new string[] { "comment1", "comment2", "comment3" } },
            };
            store.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 runat="server">
    <title>Ext.NET Example</title>
 
    <script type="text/javascript">
        var rowBodySelector = "table.x-grid3-row-table > tbody > tr:nth(2) div.x-grid3-row-body";

        var getRowClass = function (record, index, rowParams, store) {
            var rowBody = "",
                comments = record.get("comments");
 
            Ext.each(comments, function (c) {
                rowBody += "<p>" + c + "</p>";
            });
 
            rowParams.body = rowBody;
        };
         
        var onCommand = function (command, record, rowIndex, colIndex) {
            var grid = this,
                panel,
                row,
                body;
 
            if (command === "addComment") {
                panel = grid.bin;
                 
                row = grid.getView().getRow(rowIndex);
                body = Ext.DomQuery.selectNode("table.x-grid3-row-table > tbody > tr:nth(2) div.x-grid3-row-body", row)
 
                if (panel.rendered) {                    
                    Ext.fly(body).appendChild(panel.getEl());
                } else {
                    panel.render(body);
                }

                panel.get(0).clear();
                panel.show();
            }
        };
 
        var onAdd = function (btn) {
            // some code to add a new comment
 
            btn.ownerCt.hide();
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Bin>
                <ext:Panel
                    runat="server"
                    Height="22"
                    Layout="HBoxLayout"
                    Border="false">
                    <Items>
                        <ext:TextField runat="server" Flex="1" />
                        <ext:Button runat="server" Text="Submit" Width="50">
                            <Listeners>
                                <Click Fn="onAdd" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
            </Bin>
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="comments" IsComplex="true" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" />
                    <ext:ImageCommandColumn Width="25">
                        <Commands>
                            <ext:ImageCommand CommandName="addComment" Icon="Add" />
                        </Commands>
                    </ext:ImageCommandColumn>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" EnableRowBody="true">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
            <Listeners>
                <Command Fn="onCommand"/>
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

Thread: [CLOSED] How to show data input controls at gridpanel row to add new information?

Thread Tools

Search Thread

Display

[CLOSED] How to show data input controls at gridpanel row to add new information?

Similar Threads

GridPanel not show data

[CLOSED] Showing copy / paste information in a gridpanel

[CLOSED] How to do about GridPanel show change data

Data won't show in Gridpanel control

Show data gridpanel without Page_load

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How to show data input controls at gridpanel row to add new information?

[CLOSED] How to show data input controls at gridpanel row to add new information?

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us