[CLOSED] Grid - Component in column cell?

  1. #1

    [CLOSED] Grid - Component in column cell?

    Is there a way to use components in a grid-column-cell?
    Last edited by fabricio.murta; Oct 03, 2016 at 6:14 PM.
  2. #2
    Hello @sveins12!

    Yes, just use the column's Cell config block to define your very custom cell attributes. For example, this is a very simplified sample that would add a 'details' column to the User Interface - Grids - Basic example:

    <ext:Column runat="server">
        <Cell>
            <ext:Parameter Name="xtype" Value="widgetcell" />
            <ext:Parameter
                Name="widget"
                Value="{ xtype: 'button', text: 'Details', handler: function(item, e) { var record = Ext.getCmp(item.up().id).getRecord(); Ext.Msg.alert(record.data.name + ' user details', 'Phone: ' + record.data.phone); } }"
                Mode="Raw" />
        </Cell>
    </ext:Column>
    Of course, you'll probably want to define this column from code behind, so you can use full Ext.NET Mobile power to define the custom component inside the widget cell.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    But how can I set properties on the widget, depending on the record-values? Let's say we want to set the text of a button-widget to be the same as the current record's text-value.
    Last edited by sveins12; Sep 30, 2016 at 9:50 PM.
  4. #4
    Hello! Interesting use case! We should add an example about this in our Examples Explorer! You can use grid item-level binding.

    Check this out:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public static List<object> Data = new List<object>
        {
            new
            {
                name = "Lisa",
                email = "lisa@simpsons.com",
                phone = "555-111-1224"
            },
    
            new
            {
                name = "Bart",
                email = "bart@simpsons.com",
                phone = "555-222-1234"
            },
    
            new
            {
                name = "Homer",
                email = "homer@simpsons.com",
                phone = "555-222-1244"
            },
    
            new
            {
                name = "Marge",
                email = "marge@simpsons.com",
                phone = "555-222-1254"
            }
        };
    
        public string RowButton = new Ext.Net.Mobile.Button()
        {
            BindString = "{record.name} details",
            Handler = "handleButtonTap(item, e);",
            Width = 140
        }.ToConfig();
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var handleButtonTap = function (item, e)
            {
                var record = item.getParent().getRecord();
                Ext.Msg.alert(record.data.name + ' user details', 'Phone: ' + record.data.phone);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Store runat="server" ID="Store1" Data="<%# Data %>" AutoDataBind="true">
                <Fields>
                    <ext:ModelField Name="name" />
                    <ext:ModelField Name="email" />
                    <ext:ModelField Name="phone" />
                </Fields>
            </ext:Store>
            <ext:Grid
                runat="server"
                Title="Simpsons"
                FullScreen="true"
                AutoDataBind="true"
                ItemConfigObject="<%# new { viewModel = true } %>"
                StoreID="Store1">
                <Columns>
                    <ext:Column runat="server" Text="Name" DataIndex="name" Width="100" />
                    <ext:Column runat="server" Text="Email" DataIndex="email" Width="210" />
                    <ext:Column runat="server" Text="Phone" DataIndex="phone" Width="150" />
                    <ext:Column runat="server" Width="160">
                        <Cell>
                            <ext:Parameter Name="xtype" Value="widgetcell" />
                            <ext:Parameter
                                Name="widget"
                                Value="<%# RowButton %>"
                                Mode="Raw" AutoDataBind="true" />
                        </Cell>
                    </ext:Column>
                </Columns>
            </ext:Grid>
        </div>
        </form>
    </body>
    </html>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thank you, it's working.
    Last edited by sveins12; Oct 02, 2016 at 4:51 PM.
  6. #6
    Thanks for the feedback! Glad it worked for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Grid Focus on next Row same column editor cell
    By registrator in forum 2.x Premium Help
    Replies: 5
    Last Post: Jun 15, 2015, 1:15 PM
  2. [CLOSED] Get row id in component column with a grid
    By rbtceo in forum 2.x Premium Help
    Replies: 2
    Last Post: Dec 10, 2014, 10:14 PM
  3. Replies: 4
    Last Post: Dec 09, 2014, 2:36 PM
  4. Replies: 2
    Last Post: Aug 21, 2014, 8:55 AM
  5. [CLOSED] MVC Grid Component Column
    By adelaney in forum 2.x Premium Help
    Replies: 4
    Last Post: May 11, 2012, 8:00 PM

Posting Permissions