Combo box in Editable Grid panel selected values are not showing in edit mode

[vs.mukesh]

Hi

In my application some of the pages i used editable grid panel in that one of the column is combo box. It is showing selected values when i click that row. otherwise it is showing blank. Below mentioned code snippets i used.

FYI

Grid Store:

<ext:Store ID="dsGrdTestTypeRequest" runat="server" WarningOnDirty="false" AutoLoad="true"
        ShowWarningOnFailure="false">
        <Proxy>
            <ext:HttpProxy Url="/EditPDRRAActive/GetTestTypeResults/" Timeout="6000000" />
        </Proxy>
        <Reader>
            <ext:JsonReader IDProperty="TRTESTTYPEID" Root="data" TotalProperty="total">
                <Fields>
                    <ext:RecordField Name="TRTESTTYPEID" />
                    <ext:RecordField Name="TESTTYPEID" />
                    <ext:RecordField Name="TESTDESCRIPTION" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <BaseParams>
            <ext:Parameter Name="filter" Value="#{txtFilter}.getValue()" Mode="Raw" />
        </BaseParams>
        <Listeners>
            <LoadException Handler="var win = winError;win.show();" />
        </Listeners>
    </ext:Store>

Combo box Store:

<ext:Store ID="dsTestType" runat="server" ShowWarningOnFailure="false" AutoLoad="true">
        <Proxy>
            <ext:HttpProxy Url="/Lookup/GetTestType/" Timeout="6000000" />
        </Proxy>
        <Reader>
            <ext:JsonReader IDProperty="ID" Root="data" TotalProperty="total">
                <Fields>
                    <ext:RecordField Name="ID" Type="String" Mapping="ID" />
                    <ext:RecordField Name="VALUE" Type="String" Mapping="VALUE" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <LoadException Handler="var win = winError;win.show();" />
        </Listeners>
        <SortInfo Field="VALUE" Direction="ASC" />
    </ext:Store>

Renderer Function:

var testTypeRenderer = function (value) {
            var r = dsTestType.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.VALUE;
        };

Grid panel:

<ext:GridPanel ID="grdTestType" runat="server" Header="false" Border="true" TrackMouseOver="true"
                        Width="780" Height="150" StoreID="dsGrdTestTypeRequest">
                        <ColumnModel ID="ColumnModel3" runat="server">
                            <Columns>
                                <ext:Column ColumnID="TESTTYPEID" DataIndex="TESTTYPEID" Header="Test Type Requested"
                                    Resizable="false" MenuDisabled="true" Sortable="true" Width="360">
                                    <Renderer Fn="testTypeRenderer" />
                                    <Editor>
                                        <ext:ComboBox ID="cbotesttype" runat="server" Editable="false" ListWidth="360" StoreID="dsTestType"
                                            TypeAhead="false" ForceSelection="true" Resizable="true" SelectOnFocus="true"
                                            Width="360" DisplayField="VALUE" MsgTarget="Side" ValueField="ID"
                                            TriggerAction="All">                                           
                                        </ext:ComboBox>
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="TESTDESCRIPTION" DataIndex="TESTDESCRIPTION" Header="Test Related Details"
                                    Width="360">
                                    <Editor>
                                        <ext:TextField runat="server" Width="180" ID="txttestrelateddetails" MaxLength="1000">                                            
                                        </ext:TextField>
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel3" SingleSelect="false" runat="server">
                                <Listeners>
                                    <RowSelect Handler="#{Button4}.enable();" />
                                    <RowDeselect Handler="if (!#{grdTestType}.hasSelection()) {#{Button4}.disable();}" />
                                </Listeners>
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <TopBar>
                            <ext:Toolbar ID="Toolbar2" runat="server">
                                <Items>
                                    <ext:DisplayField ID="DisplayField21" runat="server" Text="*" FieldClass="batchclass"
                                        Width="10" />
                                    <ext:Label ID="Label2" runat="server" Html="Test Type requested" />
                                    <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                    <ext:Button ID="Button3" runat="server" Text="Add" Icon="Add" ToolTip="Add">                                        
                                    </ext:Button>
                                    <ext:Button ID="Button4" runat="server" Text="Delete" Icon="Exclamation" ToolTip="Delete"
                                        Disabled="true">                                        
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <View>
                            <ext:GroupingView ID="GroupingView4" EnableRowBody="false" ForceFit="true">
                            </ext:GroupingView>
                        </View>
                        <LoadMask ShowMask="true" Msg="Loading..." />
                    </ext:GridPanel>

If above mentioned informations are not clear means please let me know.

Thanks in advance.

[Daniil]

Hi,

.DataIndex of the column is TESTTYPEID.

You are trying to get a record from the ComboBox's store using this code

var r = dsTestType.getById(value);

Does TESTTYPEID equal to ComboBox's ID? Please double ensure.

I'd suggest you to debug the Renderer.

var testTypeRenderer = function (value) {
    debugger;
    var r = dsTestType.getById(value);

    if (Ext.isEmpty(r)) {
        return "";
    }

    return r.data.VALUE;
};

[vs.mukesh]

Hi,

.DataIndex of the column is TESTTYPEID.

You are trying to get a record from the ComboBox's store using this code

var r = dsTestType.getById(value);

Does TESTTYPEID equal to ComboBox's ID? Please double ensure.

I'd suggest you to debug the Renderer.

var testTypeRenderer = function (value) {
    debugger;
    var r = dsTestType.getById(value);

    if (Ext.isEmpty(r)) {
        return "";
    }

    return r.data.VALUE;
};

Hello Daniil

Sorry for my delayed reply. Thanks for your quick update.

In my case my Grid column ID and Editor Combo box ID both are different.

Exactly my problem is while loading the page that Grid also loaded from database. If i am keep on opening the page means in the fourth or fifth (approx) time that row values are vanished when clicked that row column means that values are appearing. also i investigated my renderer function it is working fine.

As per your suggestion i changed combo box ID as Grid column ID. Now that time got increased i.e previously fifth time the values are vanished now in twelfth time it vanished. I don't know why it is working like that.

Because in that page i am having three grid controls these all the controls are having editable combo box column all are working like that only what i mentioned above in edit mode.

Kindly help me to fix this issue.

Thanks in advance

[Daniil]

Do you test under RC2?