Is there a way to use components in a grid-column-cell?
Printable View
Is there a way to use components in a grid-column-cell?
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:
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.Code:<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>
Hope this helps!
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.
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:
Hope this helps!Code:<%@ 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>
Thank you, it's working.
Thanks for the feedback! Glad it worked for you!