PDA

View Full Version : [CLOSED] Grid - Component in column cell?



sveins12
Sep 22, 2016, 10:47 AM
Is there a way to use components in a grid-column-cell?

fabricio.murta
Sep 22, 2016, 11:25 PM
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 (http://mobile.ext.net/#demo/basicgrid):



<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!

sveins12
Sep 30, 2016, 10:25 PM
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.

fabricio.murta
Oct 01, 2016, 12:07 AM
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!

sveins12
Oct 01, 2016, 8:00 PM
Thank you, it's working.

fabricio.murta
Oct 03, 2016, 7:13 PM
Thanks for the feedback! Glad it worked for you!