Jul 17, 2014, 4:23 PM
[CLOSED] ComboBox position changing while adding new record to GridPanel
Hi,
In Ext.Net 250 we are facing issue with ComboBox Position(layout).
We have GridPanel with ComboBox and few columns, when we click on "Add" button adding new record to store and setting the focus to last row and
"startEditByPosition" to "LastRow first column" like
Please find the attached screen shot and sample code for your reference.
In Ext.Net 250 we are facing issue with ComboBox Position(layout).
We have GridPanel with ComboBox and few columns, when we click on "Add" button adding new record to store and setting the focus to last row and
"startEditByPosition" to "LastRow first column" like
startEditByPosition({ row: lastRecordIndex, column: 0 });Please find the attached screen shot and sample code for your reference.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>GridPanel with FitLayout - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
// var cancelRep = function () {
// //get the original data from the database
// App.direct.SetupRepData();
// }
//add a new row to the bottom of reps grid panel to add a rep split
var addRep = function () {
//get the number of reps, including the new one
var count = App.store_RepData.data.items.length + 1;
//get the base net amount (truncate to 2 decimal places, we'll add the leftover amount to the last installment
var percentage = 100 / count;
percentage = eval(percentage); //truncate the decimals
var totalpercentage = 0;
for (var i = 0; i < App.store_RepData.data.items.length; i++) {
//keep track of the total percentages
totalpercentage = ((totalpercentage * 100) + (percentage * 100)) / 100; //we need to do the *100 and /100 because of javascript floating point errors
var recordToChange = App.store_RepData.getAt(i);
recordToChange.set('Percentage', percentage);
recordToChange.commit();
}
//add any leftover amount to the new rep
percentage = ((100 * 100) - (totalpercentage * 100)) / 100;
var addedRec = App.store_RepData.add({ DisplayID: i, ID: 0, RepID: 0, Percentage: percentage, RepName: 'Please Select a Rep...' });
var lastRecordIndex = App.store_RepData.data.length - 1;
App.gridpanel_Reps.getView().focusRow(lastRecordIndex);
App.gridpanel_Reps.editingPlugin.startEditByPosition({ row: lastRecordIndex, column: 0 });
}
var repRenderer = function (value, metadata, record, rowIndex, colIndex, store) {
var row = App.store_Rep.getById(value);
if (Ext.isEmpty(row)) {
return record.data.RepName;
}
return App.store_Rep.getById(value).data.RepName;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Store runat="server" ID="store_RepData" AutoDataBind="false" AutoLoad="true">
<Model>
<ext:Model ID="Model11" runat="server" IDProperty="DisplayID">
<Fields>
<ext:ModelField Name="DisplayID">
</ext:ModelField>
<ext:ModelField Name="ID">
</ext:ModelField>
<ext:ModelField Name="RepID">
</ext:ModelField>
<ext:ModelField Name="Percentage">
</ext:ModelField>
<ext:ModelField Name="RepName">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
<ext:Store runat="server" ID="store_Rep" AutoLoad="true">
<Model>
<ext:Model ID="Model12" runat="server" IDProperty="RepID">
<Fields>
<ext:ModelField Name="RepID">
</ext:ModelField>
<ext:ModelField Name="RepName">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" Plain="true" Border="true" DeferredRender="true"
BodyStyle="border:0px;padding:0px;" Flex="1">
<Items>
<ext:Panel ID="TabReps" runat="server" Title="Sales Reps" BodyStyle="padding:10px;"
AutoScroll="true" ButtonAlign="Center">
<Items>
<ext:GridPanel ID="gridpanel_Reps" runat="server" StoreID="store_RepData" Collapsible="false"
Layout="FitLayout" EnableColumnHide="false" EnableColumnMove="false" ButtonAlign="Center">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Text="Sales Rep" ID="RepID" DataIndex="RepID" Sortable="false" Flex="1"
runat="server">
<Editor>
<ext:ComboBox ID="cbo_Rep" runat="server" StoreID="store_Rep" DisplayField="RepName"
ValueField="RepID" Editable="false">
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column4" Text="Percentage" DataIndex="Percentage" Align="Center"
Sortable="false" Width="100" runat="server">
<Editor>
<ext:NumberField runat="server" ID="nmPercentage" AllowBlank="false" HideTrigger="true"
MinValue="0" AllowDecimals="true" DecimalPrecision="2" SelectOnFocus="true">
</ext:NumberField>
</Editor>
</ext:Column>
<ext:Column ID="Column5" DataIndex="ID" runat="server" Hidden="true">
</ext:Column>
<ext:CommandColumn ID="cmdDelete" runat="server" Width="25">
<Commands>
<ext:GridCommand CommandName="Delete" Icon="Decline">
<ToolTip Text="Delete" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<Buttons>
<ext:Button ID="ToolbarButton_Rep_Cancel2" runat="server" Text="Reset">
<ToolTips>
<ext:ToolTip ID="ToolTip2" runat="server" Title="Cancel Add" Html="Cancel adding this rep split and reset the amounts.">
</ext:ToolTip>
</ToolTips>
<Listeners>
<Click Handler="alert('hi');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="ToolbarButton_Rep_Add2" Text="Add">
<ToolTips>
<ext:ToolTip ID="ToolTip7" runat="server" Title="Add New Sales Rep" Html="Click here to split the ownership of this campaign between sales reps.">
</ext:ToolTip>
</ToolTips>
<Listeners>
<Click Handler="addRep()" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Jul 18, 2014 at 5:49 PM.
Reason: [CLOSED]
