[CLOSED] [1.0] Listview inside portlet - how to fit to size of portlet or show borders?
I have a Listview inside a Portlet. Is there a way to remove the padding around the Listview so it's snug inside the Portlet? Alternatively, is there a way to add border to a Listview? Possible to add borders between rows too, like the regular GridView?
Code:
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim list = New Generic.List(Of Object)
list.Add(New With {.ID = "Test", .Name = "Test"})
list.Add(New With {.ID = "Test1", .Name = "Test1"})
list.Add(New With {.ID = "Test2", .Name = "Test2"})
Me.store.DataSource = list
Me.store.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" />
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center MarginsSummary="5 5 5 5">
<ext:Panel ID="Panel4" runat="server" Title="One Column" Layout="Fit">
<Items>
<ext:Portal ID="Portal1" runat="server" Border="false" Layout="Column">
<Items>
<ext:PortalColumn ID="PortalColumn1" runat="server" StyleSpec="padding:10px 10px 10px 10px"
ColumnWidth="1" Layout="Anchor">
<Items>
<ext:Portlet ID="Portlet1" runat="server" Height="200" Title="Portlet Title" CloseAction="Close">
<Content>
<ext:ListView runat="server" ID="grid" MultiSelect="true">
<Columns>
<ext:ListViewColumn DataIndex="ID" Header="ID">
</ext:ListViewColumn>
<ext:ListViewColumn DataIndex="Name" Header="Name">
</ext:ListViewColumn>
</Columns>
<Store>
<ext:Store runat="server" ID="store">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID">
</ext:RecordField>
<ext:RecordField Name="Name">
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:ListView>
<ext:Label runat="server" Text="Do something">
</ext:Label>
</Content>
</ext:Portlet>
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
RE: [CLOSED] [1.0] Listview inside portlet - how to fit to size of portlet or show borders?
Hi,
Please see the following sample (please note that if your ListView has explicit size then to set border just define border for '.myview' css selector; if no size then need to use two css selector like in the following example)
Code:
<%@ 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">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var list = new System.Collections.Generic.List<Object>();
list.Add(new {ID = "Test", Name = "Test"});
list.Add(new {ID = "Test1", Name = "Test1"});
list.Add(new {ID = "Test2", Name = "Test2"});
this.store.DataSource = list;
this.store.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.myview .x-list-header{
border:1px solid black;
border-bottom:0px;
}
.myview .x-list-body-inner{
border:1px solid black;
border-top:0px;
}
.myview dl{
border-bottom: 1px solid silver;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" />
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center MarginsSummary="5 5 5 5">
<ext:Panel ID="Panel4" runat="server" Title="One Column" Layout="Fit">
<Items>
<ext:Portal ID="Portal1" runat="server" Border="false" Layout="Column">
<Items>
<ext:PortalColumn ID="PortalColumn1" runat="server" StyleSpec="padding:10px 10px 10px 10px"
ColumnWidth="1" Layout="Anchor">
<Items>
<ext:Portlet ID="Portlet1" runat="server" Height="200" Title="Portlet Title" CloseAction="Close" BodyStyle="padding:0px;">
<Content>
<ext:ListView runat="server" ID="grid" MultiSelect="true" Cls="myview" >
<Columns>
<ext:ListViewColumn DataIndex="ID" Header="ID">
</ext:ListViewColumn>
<ext:ListViewColumn DataIndex="Name" Header="Name">
</ext:ListViewColumn>
</Columns>
<Store>
<ext:Store runat="server" ID="store">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID">
</ext:RecordField>
<ext:RecordField Name="Name">
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:ListView>
<ext:Label runat="server" Text="Do something">
</ext:Label>
</Content>
</ext:Portlet>
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
RE: [CLOSED] [1.0] Listview inside portlet - how to fit to size of portlet or show borders?
Hi jchau,
You might get better results (performance + layout) if you use the new <Items> collection, instead of <Content>.
Hope this helps.
RE: [CLOSED] [1.0] Listview inside portlet - how to fit to size of portlet or show borders?
thanks vladimir!
geoffrey, is there a thread or documentation on Items vs Content? I would like to know more details about the difference. Based on the change log, I switched all the old Body> tags to Content> . Do I need to go back and change Content> to Items>?
RE: [CLOSED] [1.0] Listview inside portlet - how to fit to size of portlet or show borders?
vladimir, i added a few more 0px borders to fix some overlapping. Here are the final css styles for anyone following this thread:
Code:
.borderlistview .x-list-header{
border:1px solid #D0D0D0;
border-bottom:0px;
border-left:0px;
}
.borderlistview .x-list-body-inner{
border:1px solid #D0D0D0;
border-top:0px;
border-bottom:0px;
}
.borderlistview dl{
border-bottom: 1px solid #D0D0D0;
}
