[CLOSED] Ext.NET equivalent of this sample

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Ext.NET equivalent of this sample

    I have a pattern that I find myself doing a great deal when using plain ASP.NET (see the sample below). I haven't been able to come up with the equivalent "thing" in ext.net yet. So far, I've been able to work around this using other techniques, until now.

    Is there a way that I can do something similar with Ext.NET? The biggest problem I've found is that I need the items to be able to contain plain HTML. In my specific case, it's just a big paragraph of text.

    Ultimately what I need is a vertical list of chunks of text that come from my database. I need to be able to edit, delete and add them.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                DataBind()
            End If
        End Sub
    
    
        Public Overrides Sub DataBind()
            Dim data As New List(Of Object)
            For i = 0 To 5
                data.Add(New With {.ID = i, .Text = "Item " & i})
            Next
            ItemList.DataSource = data
            ItemList.DataBind()
        End Sub
            
        Protected Sub ItemList_ItemUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewUpdateEventArgs) Handles ItemList.ItemUpdating
            Dim item = ItemList.Items(ItemList.EditIndex)
            'update data item
            ItemList.EditIndex = -1
            DataBind()
        End Sub
    
    
        Protected Sub ItemList_ItemEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewEditEventArgs) Handles ItemList.ItemEditing
            ItemList.EditIndex = e.NewEditIndex
            DataBind()
        End Sub
    
    
        Protected Sub ItemList_ItemCanceling(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewCancelEventArgs) Handles ItemList.ItemCanceling
            ItemList.EditIndex = -1
            DataBind()
        End Sub
    
    
        Protected Sub ItemList_ItemDeleting(ByVal sender As Object, ByVal e As ListViewDeleteEventArgs) Handles ItemList.ItemDeleting
            Dim item As ListViewDataItem = ItemList.Items(e.ItemIndex)
            Dim id = ItemList.DataKeys(item.DataItemIndex).Values("ID")
            'delete data item
            DataBind()
        End Sub
    
    
        Protected Sub ItemList_ItemInserting(ByVal sender As Object, ByVal e As ListViewInsertEventArgs) Handles ItemList.ItemInserting
            'insert data item
            DataBind()
        End Sub
        
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
        <asp:ListView ID="ItemList" runat="server" DataKeyNames="ID" InsertItemPosition="FirstItem">
    
    
            <LayoutTemplate>
                <table>
                    <asp:PlaceHolder ID="ItemPlaceHolder" runat="server" />
                </table>
            </LayoutTemplate>
    
    
            <InsertItemTemplate>
                <tr>
                    <td>
                        <asp:TextBox ID="Text" runat="server" TextMode="MultiLine" />
                        <asp:Button ID="AddButton" runat="server" Text="Add" />
                    </td>
                </tr>
            </InsertItemTemplate>
    
    
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:Label ID="Text" runat="server" Text='<%# Bind("Text") %>' />
                        <asp:Button ID="EditButton" runat="server" Text="Edit" CommandName="edit" CommandArgument='<%# Bind("ID") %>' />
                        <asp:Button ID="DeleteButton" runat="server" Text="Delete" CommandName="delete" CommandArgument='<%# Bind("ID") %>' />
                    </td>
                </tr>
            </ItemTemplate>
    
    
            <EditItemTemplate>
                <tr>
                    <td>
                        <asp:TextBox ID="Text" runat="server" TextMode="MultiLine" />
                        <asp:Button ID="SaveButton" runat="server" Text="Save" CommandName="update" CommandArgument='<%# Bind("ID") %>' />
                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" CommandName="cancel" CausesValidation="false" />
                    </td>
                </tr>
            </EditItemTemplate>
            
        </asp:ListView>
    
    
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 12, 2011 at 3:04 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Thanks for the good clean sample to test with. We'll build a few demos using pure Ext.NET. Just give us a day or so.
    Geoffrey McGill
    Founder
  3. #3
    1. Create strongly typed objects that will handle the data loading and saving
    2. Bind list of strongly typed objects to a gridpanel
    3. Use RowEditor plugin or use a formpanel to add/edit items

    https://examples1.ext.net/#/GridPane...ins/RowEditor/
    https://examples1.ext.net/#/GridPane.../Form_Details/
  4. #4
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    Thanks for the good clean sample to test with. We'll build a few demos using pure Ext.NET. Just give us a day or so.
    Thanks! This will be a big help! :D
  5. #5
    Quote Originally Posted by jchau View Post
    1. Create strongly typed objects that will handle the data loading and saving
    2. Bind list of strongly typed objects to a gridpanel
    3. Use RowEditor plugin or use a formpanel to add/edit items

    https://examples1.ext.net/#/GridPane...ins/RowEditor/
    https://examples1.ext.net/#/GridPane.../Form_Details/
    This is certainly useful, but in my specific case, I need to be able to have arbitrary HTML in the rows. It will almost always span multiple lines. Unfortunately, a grid isn't the greatest fit for this scenario.
  6. #6
    Hi,

    Well, a plain html should be ok in a grid, especially if you set up a CSS "white-space: normal" rule for cells. There is "white-space: nowrap" be defaut.

    As well, a TextArea should be ok as a Column's Editor.

    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[] { "<b>test1 test test test</b><p>new line<p>" },
                    new object[] { "<b>test2 test test test</b><p>new line<p>" },
                    new object[] { "<b>test3 test test test</b><p>new line<p>" },
                };
                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 runat="server">
        <title>Ext.Net Example</title>
    
        <style type="text/css">
            .my-grid .x-grid3-cell-inner {
                white-space: normal;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="300" Cls="my-grid">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test">
                            <Editor>
                                <ext:TextArea runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    You can build required functionality using DataView
    Please see the following sample
    <%@ Page Language="C#" %>
     <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
     
    <!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">     
        <style type="text/css">
            .text-item{
                border:dashed 1px silver;
                margin-bottom:5px;
                padding:2px 5px;
            }
        </style>
        
        <script runat="server">        
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    DataView1.Store[0].DataSource = new System.Collections.Generic.List<object>() 
                    { 
                        new {Text = "Item 1"},
                        new {Text = "Item 2"},
                        new {Text = "Item 3"},
                        new {Text = "Item 4"},
                        new {Text = "Item 5"}
                    };
    
    
                    DataView1.Store[0].DataBind();
                }
            }
    
    
            protected void SubmitSelection(object sender, DirectEventArgs e)
            {
                string json = e.ExtraParams["Values"];
    
    
                System.Collections.Generic.Dictionary<string, string>[] values = JSON.Deserialize<System.Collections.Generic.Dictionary<string, string>[]>(json);
    
    
                StringBuilder sb = new StringBuilder();
                sb.Append("<table  cellspacing='15'>");
    
    
                sb.Append("<tr>");
                sb.Append("<td style='white-space:nowrap;font-weight:bold;'>");
    
    
                sb.Append("Text");
    
    
                sb.Append("</td>");
                sb.Append("</tr>");
    
    
                foreach (System.Collections.Generic.Dictionary<string, string> row in values)
                {
                    sb.Append("<tr>");
                    sb.Append("<td style='white-space:nowrap;'>");
    
    
                    sb.Append(row["Text"]);
    
    
                    sb.Append("</td>");
                    sb.Append("</tr>");
                }
                sb.Append("</table>");
                this.Label1.Html = sb.ToString();
            }
        </script>  
        
        <script type="text/javascript">
            function containerCmd(view, e){
                var t = e.getTarget("input");
                if(t){
                    var cmd = t.getAttribute("cmd"),
                        input = view.el.child("textarea.insert-input", true);
                    
                    switch(cmd){
                        case "add": 
                            view.store.addRecord({
                                Text: input.value    
                            });
                            
                            input.value = "";
                            break;
                    }
                }
            }
            
            function itemCmd(view, index, node, e){
                var t = e.getTarget("input");
                if(t){
                    var cmd = t.getAttribute("cmd"),
                        record = view.store.getAt(index);
                    
                    switch(cmd){
                        case "delete": 
                            view.store.remove(record);
                            break;
                        case "edit":
                            record.set("mode", 1);
                            break;
                        case "save":                        
                            record.beginEdit();
                            
                            record.set("Text", Ext.fly(node).child("textarea", true).value);
                            record.set("mode", 0);
                            
                            record.endEdit();
                            break;
                        case "cancel":
                            record.set("mode", 0);
                            break;
                    }
                }
            }
        </script> 
    </head>
    <body style="padding:10px;">
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:DataView ID="DataView1" runat="server" ItemSelector=".text-item">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="Text" />
                                    <ext:RecordField Name="mode" DefaultValue="0" Type="Int" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                
                <Template>
                    <Html>
                        <div class="insert-area">
                            <textarea class="insert-input" rows="5"></textarea>
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            <input type="button" cmd="add" value="Add"></input>                        
                        </div>
                        
                        <hr></hr>
                        
                        <tpl for=".">                       
                            
                            <div class="text-item">
                                <div class="view-mode {[values.mode == 1 ? "x-hidden" : ""]}">
                                    <span class="span-text">{Text}</span>
                                    &nbsp;
                                    &nbsp;
                                    &nbsp;
                                    <input type="button" cmd="edit" value="Edit"></input>
                                    <input type="button" cmd="delete" value="Delete"></input>
                                </div>
                                
                                <div class="edit-mode {[values.mode == 0 ? "x-hidden" : ""]}">
                                    <textarea rows="5">{Text}</textarea>
                                    &nbsp;
                                    &nbsp;
                                    &nbsp;
                                    <input type="button" cmd="save" value="Save"></input>
                                    <input type="button" cmd="cancel" value="Cancel"></input>
                                </div>
                            </div>
                        </tpl>                    
                    </Html>
                </Template>
                
                <Listeners>
                    <ContainerClick Fn="containerCmd" />
                    <Click Fn="itemCmd" />
                </Listeners>
            </ext:DataView>  
            
            <hr />
            
            <ext:Button runat="server" Text="Submit Values">
                <DirectEvents>
                    <Click OnEvent="SubmitSelection">
                        <ExtraParams>
                            <ext:Parameter Name="Values" Value="Ext.encode(#{DataView1}.getRowsValues(false))" Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>  
            
            <br />
            
            <div style="border:1px solid gray; padding:5px;">
                <ext:Label ID="Label1" runat="server" />
            </div>    
        </form>
    </body>
    </html>
  8. #8
    Thanks for the samples! I'll play around with them and see what I can come up with. :)
  9. #9
    Quote Originally Posted by Daniil View Post
    Hi,

    Well, a plain html should be ok in a grid, especially if you set up a CSS "white-space: normal" rule for cells. There is "white-space: nowrap" be defaut.

    As well, a TextArea should be ok as a Column's Editor.

    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[] { "<b>test1 test test test</b><p>new line<p>" },
                    new object[] { "<b>test2 test test test</b><p>new line<p>" },
                    new object[] { "<b>test3 test test test</b><p>new line<p>" },
                };
                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 runat="server">
        <title>Ext.Net Example</title>
    
        <style type="text/css">
            .my-grid .x-grid3-cell-inner {
                white-space: normal;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="300" Cls="my-grid">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test">
                            <Editor>
                                <ext:TextArea runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    I like this option, but is there a way to make it look less like a grid and more like just a plain list? (no headers, no borders or grid lines, no row highlighting). I just want it to look like an unstyled list with some command buttons to the right of each row.
  10. #10
    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[] { "<b>test1 test test test</b><p>new line<p>" },
                    new object[] { "<b>test2 test test test</b><p>new line<p>" },
                    new object[] { "<b>test3 test test test</b><p>new line<p>" },
                };
                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 runat="server">
        <title>Ext.Net Example</title>
     
        <style type="text/css">
            .my-grid .x-grid3-cell-inner {
                white-space: normal;
            }
            
            .my-grid .x-grid3-row {
                border: 0px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Height="300" 
                Cls="my-grid"
                HideHeaders="true"
                DisableSelection="true"
                PreventBodyReset="false"
                Border="false">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test">
                            <Editor>
                                <ext:TextArea runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:CommandColumn>
                            <Commands>
                                <ext:GridCommand Text="Some command" StandOut="true" />
                            </Commands>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    You might be also interested in others GridPanel/GridView options.
    http://docs.sencha.com/ext-js/3-4/#!...grid.GridPanel
    http://docs.sencha.com/ext-js/3-4/#!....grid.GridView
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] 'div' equivalent in ext.net?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 06, 2011, 6:03 PM
  2. [CLOSED] Equivalent for spinner control 0.8
    By inayath in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 22, 2011, 8:25 AM
  3. [CLOSED] Is there an ext.net equivalent to asp:BulletedList?
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 22, 2010, 8:35 PM
  4. [CLOSED] [1.0] Equivalent to ASP.NET custom validator
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 24, 2010, 2:10 PM
  5. [CLOSED] Equivalent of Ext.ID via C# Codebehind
    By Steve in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 03, 2009, 3:53 PM

Posting Permissions