Originally Posted by
Daniil
Hi @Poulami,
That is strange. The Buttons should not be aligned on top for the first row. Could you, please, provide a test case?
Hi,
I have posted my ext.net code with some dummy data. After selecting the Country Code field with 'A' it will show multiple rows. On a row if you click, you can see the buttons appear on the top.
Below is my .aspx code:--
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindCurrencyGrid();
}
}
private void BindCurrencyGrid()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.CurrencyData;
store.DataBind();
Ext.Net.Store StrISOCurrencyCode = this.ComboBox2.GetStore();
StrISOCurrencyCode.DataSource = this.CurrencyComboData;
StrISOCurrencyCode.DataBind();
}
private object[] CurrencyData
{
get
{
DateTime now = DateTime.Now;
return new object[]
{
new object[] {"AED","United Arab Emirates","AE","True",},
new object[] {"AFN","Afghanistan,Afghanis","AF","True",},
new object[] {"ALL","Albania, Leke","AL","False","01/01/1900"},
new object[] {"AMD","Armenia, Drams","AM","True",},
new object[] {"ANG","Netherlands Antilles, Guilders (also called Florins)","AN","True",},
new object[] {"AOA","Angola, Kwanza","AO","True",},
new object[] {"ARA","WEST INDIES DOLLAR","GB","True",},
new object[] {"ARS","Argentina, Pesos","AR","True",},
new object[] {"ATS","AUS. SCHILLING","AT","False","01/01/1999"},
new object[] {"AUD","Australia, Dollars","AU","True",},
new object[] {"AWG","Aruba, Guilders","AW","True",},
new object[] {"AZN","Azerbaijan, New Manats","AZ","True",},
new object[] {"BAM","Bosnia and Herzegovina, Convertible Marka","BA","True",},
new object[] {"BBD","Barbados, Dollars","BB","True",},
new object[] {"BDT","Bangladesh, Taka","BD","True",},
new object[] {"BEF","BELGIAN FRANC","BE","False","03/01/2002"},
new object[] {"BGN","Bulgaria, Leva","BG","True",},
new object[] {"BHD","Bahrain, Dinars","BH","True",},
new object[] {"BIF","Burundi, Francs","BI","True",},
new object[] {"BMD","Bermuda, Dollars","BM","True",},
new object[] {"BND","Brunei Darussalam, Dollars","BN","True",},
new object[] {"BOB","Bolivia, Bolivianos","BO","True",},
new object[] {"BRL","Brazil, Brazil Real","BR","True",},
new object[] {"BSD","Bahamas, Dollars","BS","True",},
new object[] {"BTN","Bhutan, Ngultrum","BT","True",},
new object[] {"BWP","Botswana, Pulas","BW","True",}
};
}
}
private object[] CurrencyComboData
{
get
{
DateTime now = DateTime.Now;
return new object[]
{
new object[] {"AE"},
new object[] {"AF"},
new object[] {"AL"},
new object[] {"AM"},
new object[] {"AN"},
new object[] {"AO"},
new object[] {"GB"},
new object[] {"AR"},
new object[] {"AT"},
new object[] {"AU"},
new object[] {"AW"},
new object[] {"AZ"},
new object[] {"BA"},
new object[] {"BB"},
new object[] {"BD"},
new object[] {"BE"},
new object[] {"BG"},
new object[] {"BH"},
new object[] {"BI"},
new object[] {"BM"},
new object[] {"BN"},
new object[] {"BO"},
new object[] {"BR"},
new object[] {"BS"},
new object[] {"BT"},
new object[] {"BW"}
};
}
}
</script>
<script>
var exportData = function (grid) {
grid.submitData(null, { isUpload: true });
};
</script>
<ext:XScript ID="XScript1" runat="server">
<script>
var applyFilterCurrency = function (field) {
var store = #{GridPanel1}.getStore();
store.filterBy(getRecordFilterCurrency());
};
var applyFilterExchange = function (field) {
var store = #{GridPanel2}.getStore();
store.filterBy(getRecordFilterExchange());
};
var applyFilterCountry = function (field) {
var store = #{GridPanel3}.getStore();
store.filterBy(getRecordFilterCountry());
};
var applyFilterVendor = function (field) {
var store = #{GridPanel4}.getStore();
store.filterBy(getRecordFilterVendor());
};
var clearFilterCurrency = function () {
#{ComboBox1}.reset();
#{DescFilter}.reset();
#{ComboBox2}.reset();
#{ComboBox3}.reset();
#{ExpirationDateFilter}.reset();
#{StrCurrency}.clearFilter();
}
var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex)
if (val != null) {
val = val.toString();
}
if (typeof val != "string") {
return value.length == 0;
}
return val.toLowerCase().indexOf(value.toString().toLowerCase()) > -1;
};
var filterDate = function (value, dataIndex, record) {
var val = record.get(dataIndex)
if (val != null) {
val = Ext.Date.clearTime(record.get(dataIndex), true).getTime();
if (!Ext.isEmpty(value, false) && val != Ext.Date.clearTime(value, true).getTime()) {
return false;
}
return true;
}
if (typeof val != "string") {
return value.length == 0;
}
//
};
var filterNumber = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (!Ext.isEmpty(value, false) && val != value) {
return false;
}
return true;
};
var getRecordFilterCurrency = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(#{ComboBox1}.getValue()||"", "ISOCurrencyCode", record);
}
});
f.push({
filter: function (record) {
return filterString(#{DescFilter}.getValue(), "ISOCurrencyCodeDescription", record);
}
});
f.push({
filter: function (record) {
return filterString(#{ComboBox2}.getValue()||"", "ISOCountryCode", record);
}
});
f.push({
filter: function (record) {
if (#{ComboBox3}.getValue() != null)
return filterString(#{ComboBox3}.getValue(), "isActive", record);
else
return filterString("", "isActive", record);
}
});
f.push({
filter: function (record) {
return filterDate(#{ExpirationDateFilter}.getValue()||"", "ExpirationDate", record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
var EditDeleteCurrency = function (grid, command,record) {
// var grid = #{GridPanel1};
var index = grid.store.indexOf(record);
if (command == "Delete") {
if( ! confirm("Delete Row?")) return false;
grid.getStore().remove(record);
App.direct.deleteCurrency(record , {
success : function (result) {
if (!result.deleted) {
Ext.Msg.alert("Error", result.msg);
grid.store.insert(index, record);
return;
}
}
});
}
if (command == "Edit") {
grid.getRowEditor().startEdit(record, 1);
}
};
var addCurrency = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
// Create a record instance through the ModelManager
grid.store.insert(0, new Currency());
grid.editingPlugin.startEdit(0, 0);
};
var autoSaveCurrency = function () {
var plugin = this.editingPlugin;
if (this.getForm().isValid()) { // save the record
App.direct.autoSaveCurrency(plugin.context.record.phantom, this.getValues(false, false, false, true), {
success : function (result) {
if (!result.saved) {
Ext.Msg.alert("Error", result.msg);
return;
}
plugin.completeEdit();
}
});
}
};
var autoSaveExchange = function () {
var plugin = this.editingPlugin;
if (this.getForm().isValid()) { // save the record
App.direct.autoSaveExchange(plugin.context.record.phantom, this.getValues(false, false, false, true), {
success : function (result) {
if (!result.saved) {
Ext.Msg.alert("Error", result.msg);
return;
}
plugin.completeEdit();
}
});
}
};
</script>
</ext:XScript>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>My Page</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TabPanel ID="TabPanel1" runat="server" Width="950" EnableTabScroll="true" DeferredRender="false">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Currency">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Title="Currency Grid" Width="950" Height="410">
<ResizableConfig Handles="East" />
<Store>
<ext:Store ID="StrCurrency" runat="server" PageSize="50">
<Model>
<ext:Model ID="MdlCurrency" runat="server" Name="Currency">
<Fields>
<ext:ModelField Name="ISOCurrencyCode" />
<ext:ModelField Name="ISOCurrencyCodeDescription" />
<ext:ModelField Name="ISOCountryCode" />
<ext:ModelField Name="isActive" Type="String" />
<ext:ModelField Name="ExpirationDate" Type="Date" DateFormat="MM/dd/yyyy" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Currency Code" Width="100" DataIndex="ISOCurrencyCode">
<HeaderItems>
<ext:ComboBox ID="ComboBox1" runat="server" TriggerAction="All" QueryMode="Local"
DisplayField="ISOCurrencyCode" ValueField="ISOCurrencyCode">
<Store>
<ext:Store ID="StrISOCurrencyCode" runat="server">
<Model>
<ext:Model ID="MdlISOCurrencyCode" runat="server">
<Fields>
<ext:ModelField Name="ISOCurrencyCode" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Change Handler="applyFilterCurrency(this);" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton1" runat="server" />
</Plugins>
</ext:ComboBox>
</HeaderItems>
<%-- <Renderer Fn="NavigateCurrency" />
--%>
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Description" Width="500" DataIndex="ISOCurrencyCodeDescription"
Flex="1">
<HeaderItems>
<ext:TextField ID="DescFilter" runat="server">
<Listeners>
<Change Handler="applyFilterCurrency(this);" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton2" runat="server" />
</Plugins>
</ext:TextField>
</HeaderItems>
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Country Code" Width="100" DataIndex="ISOCountryCode">
<HeaderItems>
<ext:ComboBox ID="ComboBox2" runat="server" TriggerAction="All" QueryMode="Local"
DisplayField="ISOCountryCode" ValueField="ISOCountryCode">
<Store>
<ext:Store ID="strISOCountryCode" runat="server">
<Model>
<ext:Model ID="MdlISOCountryCode" runat="server">
<Fields>
<ext:ModelField Name="ISOCountryCode" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Change Handler="applyFilterCurrency(this);" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton3" runat="server" />
</Plugins>
</ext:ComboBox>
</HeaderItems>
<Editor>
<ext:ComboBox ID="ComboBox16" runat="server" TriggerAction="All" QueryMode="Local"
DisplayField="ISOCountryCode" AllowBlank="false" ValueField="ISOCountryCode"
Editable="false">
<Store>
<ext:Store ID="strEditorISOCountryCode" runat="server">
<Model>
<ext:Model ID="MdlEditorISOCountryCode" runat="server">
<Fields>
<ext:ModelField Name="ISOCountryCode" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="IsActive" Width="75" DataIndex="isActive">
<HeaderItems>
<ext:ComboBox ID="ComboBox3" runat="server" TriggerAction="All" QueryMode="Local">
<Items>
<ext:ListItem Text="true" Value="true" />
<ext:ListItem Text="false" Value="false" />
</Items>
<Listeners>
<Change Handler="applyFilterCurrency(this);" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton4" runat="server" />
</Plugins>
</ext:ComboBox>
</HeaderItems>
<Editor>
<ext:ComboBox ID="ComboBox4" runat="server" AllowBlank="false" Editable="false">
<Items>
<ext:ListItem Text="true" Value="true" />
<ext:ListItem Text="false" Value="false" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Expiration Date" Width="100"
DataIndex="ExpirationDate">
<HeaderItems>
<ext:DateField ID="ExpirationDateFilter" runat="server" Editable="false">
<Listeners>
<Change Handler="applyFilterCurrency(this);" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton5" runat="server" />
</Plugins>
</ext:DateField>
</HeaderItems>
<Editor>
<ext:DateField ID="DateField1" runat="server" AllowBlank="true" Editable="false" />
</Editor>
</ext:DateColumn>
<ext:Column ID="Column5" runat="server" Width="25" DataIndex="ISOCurrencyCode" Sortable="false"
MenuDisabled="true" Text=" " Resizable="false">
<Renderer Handler="return '';" />
<HeaderItems>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilterCurrency(null);" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false"
SaveHandler="autoSaveCurrency" />
</Plugins>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true" MarkDirty="false" />
</View>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="True">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>
