[CLOSED] Grid panel cell is not rendering after insert

  1. #1

    [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)

    <%@ 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('&nbsp&nbsp' + 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 2:13 PM. Reason: [CLOSED]
  2. #2
    After some more debug, I realized that it is not about combobox or inserting a new record. If an editing is initiated and then canceled by clicking out, rendering stops for "Applicable" column. Just play with "Manage Areas" cell commands first. Than either click Name or Category column for editing and click out without any change. After that, "Applicable" column will not be rendered until a manual call to grid.view.refresh. How can I handle this problem?

    Thanks.

    Quote Originally Posted by bayoglu View Post
    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)

    <%@ 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('&nbsp&nbsp' + 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 bayoglu; Feb 05, 2013 at 11:16 PM. Reason: correction
  3. #3
    Hello!

    I couldn't reproduce your problem with Ext.NET 2.1. Please, update and try again: http://svn.ext.net/premium/branches/2.1
  4. #4
    Quote Originally Posted by Baidaly View Post
    Hello!

    I couldn't reproduce your problem with Ext.NET 2.1. Please, update and try again: http://svn.ext.net/premium/branches/2.1
    Updating from SVN fixed the isuue. Thanks. Please mark as closed.

Similar Threads

  1. Problem of rendering tha last column of Grid panel
    By pars.engineer in forum 1.x Help
    Replies: 0
    Last Post: Oct 10, 2012, 9:08 AM
  2. Replies: 0
    Last Post: May 12, 2012, 12:24 PM
  3. [CLOSED] Insert Grid Record - Edit First Cell?
    By peter.campbell in forum 1.x Premium Help
    Replies: 3
    Last Post: May 10, 2011, 12:01 PM
  4. [CLOSED] Insert Cell into ext:TableLayout
    By georgek in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 24, 2011, 6:07 PM
  5. cell value of grid Panel
    By vinu.gupta03 in forum 1.x Help
    Replies: 1
    Last Post: Mar 04, 2009, 2:13 AM

Posting Permissions