PDA

View Full Version : [CLOSED] GridPanel row height problem



sailendra
May 21, 2012, 8:17 AM
We are having problem on height of grid panel row inside a tab panel. It works properly for grid panel without command column but in case of command column some bottom portion of newly added row is hiding inside the tab panel.


<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public class Test
{
public int ID { get; set; }
public string ItemName { get; set; }
public double Price { get; set; }

}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

private void BindData()
{
this.GridPanel1.Store.Primary.DataSource = this.GetData();
this.GridPanel1.Store.Primary.DataBind();
}

private List<Test> GetData()
{
return new List<Test>
{
new Test { ID = 1, ItemName = "3m Co", Price = 71.72},
new Test { ID = 2, ItemName = "Alcoa Inc", Price = 29.01},
new Test { ID = 3, ItemName = "Altria Group Inc",Price = 29.01},

};
}

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>

<script type="text/javascript">


function addItemLineNewRow() {
var gridItems = null;
gridItems = <%= GridPanel1.ClientID%>;
var newRow = new ModelgridItems();
var rowIndex = gridItems.getStore().data.items.length;
newRow.data.ID = "";
newRow.data.ItemName = "";
newRow.data.Price = "";
var rowIndex = gridItems.getStore().data.items.length;
gridItems.getStore().insert(rowIndex, newRow);
App.TabPanel_ItemLineAndExpenseLine.doLayout();
};

</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:TabPanel ID="TabPanel_ItemLineAndExpenseLine" ActiveIndex="0" runat="server"
DefaultBorder="false" DefaultPadding="0">
<Items>
<ext:Panel ID="Panel_ItemLIne" AutoHeight="true" runat="server" Title="Panel1" Header="False"
Border="false">
<Listeners>
</Listeners>
<Content>
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="600">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" Name="ModelgridItems" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="ItemName" />
<ext:ModelField Name="Price" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" Width="35" />
<ext:Column ID="Column2" runat="server" Text="NAME" DataIndex="ItemName" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField ID="NumberField1" runat="server" />
</Editor>
</ext:Column>
<ext:CommandColumn runat="server">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" />
</View>
<SelectionModel>
<ext:CellSelectionModel ID="CellSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Content>
</ext:Panel>
<ext:Panel ID="Panel_ExpneseLine" runat="server" Title="Panel2" Header="False" Border="false">
<Listeners>
</Listeners>
<Content>
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Button ID="btnAddRow" runat="server" Icon="Add" Text="Add New Row" Cls="btnblock bluecolor">
<Listeners>
<Click Handler="addItemLineNewRow();" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

Daniil
May 21, 2012, 10:29 AM
Hi,

I can suggest the following CSS to fix it.

<style type="text/css">
.row-cmd-cell .x-btn-default-toolbar-small {
padding: 0px;
}
</style>