Feb 05, 2013, 9:53 PM
[CLOSED] Grid panel cell is not rendering after insert
Hello,
I am using an editable grid panel and rendering a column via html tags. Cell content is updated after updating store record with .set function (which is nice). After I insert a new record using the Insert button of the Panel, changes are still updated in store but cell content html is not updated anymore. I investigated a lot and guess that the problem source is editing the first column with a combo box editor. If I remove the first Category column, everything works fine again. Calling grid.view.refresh renders the column in both cases but normally using record.set function, i should not need to call grid.view.refresh manually. By this way, the whole grid is re-rendered which is bad for a large number of records.
What is the problem with the below code? (a simplified version)
1) run application and try "Manage Areas" cell command first. You will see that changes are reflected to GUI.
2) close and re-run application. Use "Insert" button below to add a ne row to grid but do not input any thing. Just click outside the editor and leave the record with default values. Now try "Manage Areas" cell commads. You will see that cells are marked as dirty and store data is updated but "Applicable" column does not refresh anymore.
I am using an editable grid panel and rendering a column via html tags. Cell content is updated after updating store record with .set function (which is nice). After I insert a new record using the Insert button of the Panel, changes are still updated in store but cell content html is not updated anymore. I investigated a lot and guess that the problem source is editing the first column with a combo box editor. If I remove the first Category column, everything works fine again. Calling grid.view.refresh renders the column in both cases but normally using record.set function, i should not need to call grid.view.refresh manually. By this way, the whole grid is re-rendered which is bad for a large number of records.
What is the problem with the below code? (a simplified version)
<%@ 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)
{
GridStore.DataSource = new object[]{
new object[] { 1, "Item A", "AA,/icons/bullet_red-png/ext.axd,Area A",1},
new object[] { 2, "Item B", "AB,/icons/bullet_tick-png/ext.axd,Area B",2}
};
GridStore.DataBind();
ApplicabilityStore.DataSource = new object[]{
//ID, item id, areaId, applicable
new object[]{1, 1, 1, true},
new object[]{2, 1, 2, false},
new object[]{3, 2, 1, false},
new object[]{4, 2, 2, true}
};
ApplicabilityStore.DataBind();
//id, name, abbreviation, url
AreaStore.DataSource = new object[]{
new object[]{1, "Area A", "AA","/icons/bullet_red-png/ext.axd"},
new object[]{2, "Area B", "AB","/icons/bullet_tick-png/ext.axd"}
};
CategoryStore.DataSource = new object[]{
new object[]{1,"Category 01"},
new object[]{2,"Category 02"}
};
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function areaCheckBoxChangeHandler(item, newValue, oldValue) {
var updatedAreaRiskEventItem = App.ApplicabilityStore.getById(item.tag.ApplicabilityStoreID);
var updatedRiskEventItem = App.GridStore.getById(item.tag.riskEventsStoreID);
if (updatedAreaRiskEventItem == null || updatedRiskEventItem == null) {
alert('area checkbox change handler error - replace thismessage');
}
else {
updatedAreaRiskEventItem.set('Applicable', newValue);
var riskEventAreaApplicableValues = App.ApplicabilityStore.queryBy(function (record) {
return (record.data.ItemID == item.tag.riskEventsStoreID) && (record.data.Applicable == true);
});
var applicableAreasText = "";
for (var i = 0; i < riskEventAreaApplicableValues.length; i++) {
var applicableAreaItem = App.AreaStore.getById(riskEventAreaApplicableValues.items[i].data.AreaID);
if (applicableAreaItem != null) {
if (i != riskEventAreaApplicableValues.length - 1) {
applicableAreasText += applicableAreaItem.data.Abbreviation + "," + applicableAreaItem.data.IconUrl + "," + applicableAreaItem.data.Name + ";";
}
else {
applicableAreasText += applicableAreaItem.data.Abbreviation + "," + applicableAreaItem.data.IconUrl + "," + applicableAreaItem.data.Name;
}
}
else {
alert("error - change this message");
}
}
updatedRiskEventItem.set('ApplicableTo', applicableAreasText);
// App.itemsGrid.getView().refresh();
}
}
function manageAreas(item, command, record, recordIndex, cellIndex) {
if (App.manageAreasWindow.hidden == true) {
for (var i = 0; i < App.ApplicabilityStore.data.items.length; i++) {
if (App.ApplicabilityStore.data.items[i].data.ItemID == record.data.ID) {
var checkBoxItem = App.manageAreasCBGroup.items.getByKey("areaCheckBox" + App.ApplicabilityStore.data.items[i].data.AreaID.toString());
checkBoxItem.suspendEvents();
if (checkBoxItem !== undefined) {
checkBoxItem.tag = { ApplicabilityStoreID: App.ApplicabilityStore.data.items[i].data.ID, riskEventsStoreID: record.data.ID };
checkBoxItem.setValue(App.ApplicabilityStore.data.items[i].data.Applicable);
}
checkBoxItem.resumeEvents();
}
}
App.manageAreasWindow.doLayout();
App.manageAreasWindow.show();
}
else {
alert("Close window first !");
}
}
function renderApplicableAreas(record, value) {
var html = [];
html.push('<p>');
if (record.phantom == true) {
html.push('Not configured');
}
else {
var applicableAreas = value.split(";");
applicableAreas.sort(function (a, b) {
var arrA = a.split(",");
var arrB = b.split(",");
if (arrA[0] < arrB[0]) return -1;
if (arrA[0] > arrB[0]) return 1;
return 0;
});
if (applicableAreas.length == 0 || value.length == 0) {
html.push('None');
}
else {
for (var i = 0; i < applicableAreas.length; i++) {
var areaElements = applicableAreas[i].split(",");
if (i == 0) {
html.push(areaElements[0] + ' <img src="' + areaElements[1] + '" title="' + areaElements[2] + '">');
}
else {
html.push('  ' + areaElements[0] + ' <img src="' + areaElements[1] + '" title="' + areaElements[2] + '">');
}
}
}
}
html.push('</p>');
return html.join("");
}
function itemsInsertHandler(item, e) {
App.GridStore.insert(0, {});
pos = { row: 0, column: 0 };
App.itemsGrid.editingPlugin.startEditByPosition(pos);
}
function itemsCategoryRenderer(value) {
if (value == "") {
return "Not defined";
} else if (value == 0) {
return "Not defined";
}
else {
var selectedCategory = App.CategoryStore.getById(value);
if (selectedCategory == null) {
return "Not defined";
}
else {
return selectedCategory.data.Name;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<ext:Store ID="GridStore" runat="server">
<Model>
<ext:Model ID="GridStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
<ext:ModelField Name="ApplicableTo" Type="String"></ext:ModelField>
<ext:ModelField Name="CategoryID" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="ApplicabilityStore" runat="server">
<Model>
<ext:Model ID="ApplicabilityStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="ItemID" Type="Int"></ext:ModelField>
<ext:ModelField Name="AreaID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Applicable" Type="Boolean"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="AreaStore" runat="server">
<Model>
<ext:Model ID="AreaStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
<ext:ModelField Name="Abbreviation" Type="String"></ext:ModelField>
<ext:ModelField Name="IconUrl" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="CategoryStore" runat="server">
<Model>
<ext:Model ID="CategoryStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<div>
<ext:Viewport ID="itemsViewport" runat="server" Layout="FitLayout">
<Items>
<ext:Panel ID="itemsPanel" runat="server" Layout="FitLayout" AutoScroll="true">
<Items>
<ext:GridPanel ID="itemsGrid" runat="server" StoreID="GridStore" MinHeight="200">
<ColumnModel runat="server" ID="itemsColumnModel">
<Columns>
<ext:Column ID="CategoryID" runat="server" Text="Category" DataIndex="CategoryID" Align="Left" Flex="4">
<Editor>
<ext:ComboBox ID="categoryEditComboBox" runat="server" DisplayField="Name" ValueField ="ID" Width="320" LabelWidth="100" QueryMode="Local" Editable="false" AllowBlank="false" MatchFieldWidth="false" StoreID="CategoryStore" FieldLabel="Select Category">
</ext:ComboBox>
</Editor>
<Renderer Fn="itemsCategoryRenderer"></Renderer>
</ext:Column>
<ext:Column ID="Name" runat="server" Text="Name" DataIndex="Name" Align="Left" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ID="ApplicableTo" runat="server" Text="Applicable" DataIndex="ApplicableTo" Align="Left" Flex="10">
<Commands>
<ext:ImageCommand CommandName="manageAreas" Text="Manage Areas" Icon="FlagChecked" ></ext:ImageCommand>
</Commands>
<Listeners>
<Command Fn="manageAreas"></Command>
</Listeners>
<Renderer Handler="return renderApplicableAreas(record,value);" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="itemsRowSelectionModel" runat="server" Mode="Multi">
</ext:RowSelectionModel>
</SelectionModel>
<Plugins>
<ext:CellEditing ID="itemEditing" runat="server">
</ext:CellEditing>
</Plugins>
<Buttons>
<ext:Button ID="itemsbtnInsert" runat="server" Text="Insert" Icon="Add">
<Listeners>
<Click Handler="itemsInsertHandler(item,e);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Window ID="manageAreasWindow" runat="server" Title="Check/Unchek to set Applicable/Not Applicable" Layout="FitLayout" Width="300" Hidden="true">
<Items>
<ext:Panel ID="manageAreasPanel" runat="server" Title="Example" Header="false" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:CheckboxGroup ID="manageAreasCBGroup" runat="server" ColumnsNumber="1">
<Items>
<ext:Checkbox runat="server" ID="areaCheckBox1" BoxLabel="AA (Area A)" Checked="false" BoxLabelStyle = "background-image: url('/icons/bullet_red-png/ext.axd'); background-repeat:no-repeat; background-position:left !important; padding-left:24px;">
<Listeners>
<Change Handler="areaCheckBoxChangeHandler(item,newValue,oldValue)"></Change>
</Listeners>
</ext:Checkbox>
<ext:Checkbox runat="server" ID="areaCheckBox2" BoxLabel="AB (Area B)" Checked="false" BoxLabelStyle = "background-image: url('/icons/bullet_tick-png/ext.axd'); background-repeat:no-repeat; background-position:left !important; padding-left:24px;">
<Listeners>
<Change Handler="areaCheckBoxChangeHandler(item,newValue,oldValue)"></Change>
</Listeners>
</ext:Checkbox>
</Items>
</ext:CheckboxGroup>
</Items>
</ext:Panel>
</Items>
</ext:Window>
</div>
</form>
</body>
</html>
Test scenario: 1) run application and try "Manage Areas" cell command first. You will see that changes are reflected to GUI.
2) close and re-run application. Use "Insert" button below to add a ne row to grid but do not input any thing. Just click outside the editor and leave the record with default values. Now try "Manage Areas" cell commads. You will see that cells are marked as dirty and store data is updated but "Applicable" column does not refresh anymore.
Last edited by Daniil; Feb 06, 2013 at 1:13 PM.
Reason: [CLOSED]