[CLOSED] Display value not showing in grid when using linked Combos

  1. #1

    [CLOSED] Display value not showing in grid when using linked Combos

    I am trying to create a grid within which the first 2 columns are edited by combos (Category and Near Cause), and the second combo's values are dependent on the selection in the first. Also the second field's value should be cleared when a new selection is made in the first.

    I have come up with something that nearly works, based on this example: https://examples1.ext.net/#/Form/Com...ombos_In_Grid/. I will be the first to admit I do not properly understand the purpose of all elements of this sample, so am finding it difficult to know what I have got wrong.

    When the grid is first loaded, the 2nd (Near Cause) field displays the ID rather than the value. I have a renderer that is meant to render the value from the Store given the ID, but it would appear that at this stage its Store is empty, even though it has been loaded earlier. If I then click Refresh on the grid the values are displayed correctly.

    In addition, the clearing of the second field when a new value is selected in the first, does not seem to be working properly.

    Please find the aspx and code-behind below for your perusal and I look forward to a timely response.
    Thank you in advance.

    <head runat="server">
        <title><asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:InvestigatorRes, LibraryRootCause_Title %>" /></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="JavaScript" src="/kms/shared/kms_generic.js" type="text/javascript"></script>
        <kmscommon:GlobalResourcesToJavaScript runat="server" GlobalResXFileName="JavaScriptRes" JavaScriptObjectName="JavaScriptRes" />
        <script type="text/javascript">
            function validate(grid) {            ...            }
    
            var categoryRenderer = function (value) {
                var r = Store_CauseCategory.getById(value);
                if (Ext.isEmpty(r)) {
                    return "";
                }
                return r.data.Display;
            };
    
            var nearCauseRenderer = function (value) {
                var r = Store_NearCause.getById(value);
                if (Ext.isEmpty(r)) {
                    return value; //""
                }
                return r.data.Display;
            };
    
            var verifyDelete = function (grid) { ... }
    
            var beforeEdit = function (e) {
                if (e.field == "NearCauseId")
                {
                    this.getColumnModel().getCellEditor(e.column, e.row).field.allQuery = e.record.get('CategoryId');
                }
            }
    
        </script>
    </head>
    <body bgcolor="#e4edfe">
        <form id="FormInvestigator_libraryRootCause" name="FormInvestigator_libraryRootCause" action="" method="post" runat="server">
        <ext:ResourceManager ID="ScriptManager1" runat="server" />
        <uc1:Header_Module ID="Header_Module1" runat="server" ModuleName="<%$ Resources:InvestigatorRes, IncidentInvestigator_ModuleName %>" ScreenName="<%$ Resources:InvestigatorRes, LibraryRootCause_ScreenName %>"></uc1:Header_Module>
        <ext:Store ID="Store_CauseCategory" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="Data">
                    <Fields>
                        <ext:RecordField Name="Data" Mapping="Data" />
                        <ext:RecordField Name="Display" Mapping="Display" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store_NearCause" runat="server" OnRefreshData="RefreshNearCauseList"> 
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:JsonReader IDProperty="Data">
                    <Fields>
                        <ext:RecordField Name="Data" Mapping="Data" />
                        <ext:RecordField Name="Display" Mapping="Display" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Panel ID="PanelRootCause" runat="server" Title="<%$ Resources:InvestigatorRes, LibraryRootCause_PanelTitle %>">
        <Content>      
            <ext:ComboBox ID="cbCultureType" runat="server" DisplayField="Display" ValueField="Data"
                Editable="false" Mode="Local" Hidden="true">
                <Store>
                    <ext:Store ID="Store_CultureType" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="Data" Mapping="Data" />
                                    <ext:RecordField Name="Display" Mapping="Display" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                 <Listeners>
                    <BeforeSelect Handler="currentCultureId.setValue(#{cbCultureType}.getValue())" />
                </Listeners>
                <DirectEvents>
                    <Select OnEvent="FwDropDownListCultureType_SelectedIndexChanged">
                        <Confirmation ConfirmRequest="true" BeforeConfirm="return #{gpRootCause}.isDirty()" Cancel="#{cbCultureType}.setValue(#{currentCultureId}.getValue())" Title="<%$ Resources:KMSGeneralRes, DirtyWarningTitle %>" Message="<%$ Resources:KMSGeneralRes, DirtyWarningText %>" />
                        <EventMask ShowMask="true" />
                    </Select>
                </DirectEvents>
            </ext:ComboBox> 
    
            <ext:GridPanel ID="gpRootCause" runat="server"
                    StripeRows="true"
                    AutoWidth="true" 
                    Height="500"
                    Border="true" BodyBorder="true" 
                    AutoExpandColumn="Desc" AutoFocus="true">
                <Store>
                    <ext:Store ID="RootCauseStore" runat="server" RefreshAfterSaving="Auto"
                    OnRefreshData="RootCauseStore_Refresh"
                    OnBeforeStoreChanged="RootCauseStore_BeforeChanged"
                    DirtyWarningText="<%$ Resources:KMSGeneralRes, DirtyWarningText %>"
                    DirtyWarningTitle="<%$ Resources:KMSGeneralRes, DirtyWarningTitle %>">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Id" Mapping="CAUSE_TYPE_ID"/>
                                <ext:RecordField Name="CategoryId" Mapping="CATEGORY_ID"/>
                                <ext:RecordField Name="NearCauseId" Mapping="CAUSE_ID"/>
                                <ext:RecordField Name="Desc" Mapping="CAUSE_TYPE_NAME"/>
                                <ext:RecordField Name="TranslatedDesc" Mapping="TRANSLATED_CAUSE_TYPE_NAME"/>
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:Column ColumnID="Id" Hidden="true" DataIndex="Id" />
                        <ext:Column ColumnID="CategoryId" Header="<%$ Resources:InvestigatorRes, LibraryRootCause_Column_Category %>" Width="250" DataIndex="CategoryId">
                            <Renderer Fn="categoryRenderer" />
                            <Editor>
                                <ext:ComboBox ID="DropDownListCategory" StoreID="Store_CauseCategory" runat="server" 
                                    AllowBlank="false" Editable="false" DisplayField="Display" ValueField="Data" 
                                    Mode="Local" TriggerAction="All" >
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ColumnID="NearCauseId" Header="<%$ Resources:InvestigatorRes, LibraryRootCause_Column_NearCause %>" Width="250" DataIndex="NearCauseId">
                            <Renderer Fn="nearCauseRenderer" />
                            <Editor>
                                <ext:ComboBox ID="DropDownListNearCause" StoreID="Store_NearCause" runat="server" 
                                    Editable="false" DisplayField="Display" ValueField="Data"
                                    Mode="Remote" ForceSelection="false" AllowBlank="true" >
                                    <%--<CustomConfig>
                                        <ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
                                    </CustomConfig>--%>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ColumnID="Desc" Header="<%$ Resources:InvestigatorRes, LibraryRootCause_Column_Cause %>" Width="400" DataIndex="Desc">
                            <Editor>
                                <ext:TextField ID="txtCause" runat="server" AllowBlank="false"  MaxLength="100" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ColumnID="TranslatedDesc" Hidden="true" Header="<%$ Resources:InvestigatorRes, LibraryRootCause_Column_TranslatedCause %>" Width="400" DataIndex="TranslatedDesc">
                            <Editor>
                                <ext:TextField ID="txtTransCause" runat="server" Disabled="true"  MaxLength="100" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="beforeEdit" />
                </Listeners>
                
                <DirectEvents>
                    <AfterEdit OnEvent="AfterEdit">
                        <EventMask ShowMask="true" Target="This" />
                        <ExtraParams>
                            <ext:Parameter Name="field" Value="e.field" Mode="Raw" />
                            <ext:Parameter Name="id" Value="e.record.id" Mode="Raw" />
                            <ext:Parameter Name="record" Value="e.record.data" Mode="Raw" Encode="true" />
                        </ExtraParams>
                    </AfterEdit>
                </DirectEvents>
    
                <View>
                    <ext:GridView ID="gvCustomHeader" runat="server" Visible="false">
                        ...
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                    </ext:RowSelectionModel>
                </SelectionModel>
                
                <LoadMask ShowMask="true" />
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="btnSave" runat="server" Text="<%$ Resources:InvestigatorRes, LibraryRootCause_Button_Save %>" Icon="Disk">
                                <Listeners>
                                    <Click Handler="if(validate(#{gpRootCause})){#{gpRootCause}.save();}" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnAdd" runat="server" Text="<%$ Resources:InvestigatorRes, LibraryRootCause_Button_New %>" Icon="Add">
                                <Listeners>
                                    <Click Handler="#{gpRootCause}.insertRecord(0, {});#{gpRootCause}.getSelectionModel().selectRow(0);#{gpRootCause}.getView().focusRow(0);#{gpRootCause}.startEditing(0, 1);"  />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnDelete" runat="server" Text="<%$ Resources:InvestigatorRes, LibraryRootCause_Button_Delete %>" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="verifyDelete(#{gpRootCause})" />
                                </Listeners>
                            </ext:Button>
                            <ext:TextField IDMode="Explicit" ID="currentCultureId" Hidden="true" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <BottomBar>
                    <ext:PagingToolbar ID="gpToolBar" runat="server" PageSize="19" />
                </BottomBar>
                
                <SaveMask ShowMask="true" Msg="<%$ Resources:KMSGeneralRes, Saving %>" />
            </ext:GridPanel>
        </Content>
        </ext:Panel>
        </form>
    </body>
    public partial class investigator_libraryRootCause : KmsPageController
        {
            /// <summary>
            /// Load event handler
            /// </summary>
            /// <param name="e">Event arguments</param>
            protected override void OnLoad(EventArgs e)
            {
                this.pageType = KmsPageType.ADMIN;
    
                if (!IsPostBack)
                {
                    // Get list of basic cause categories
                    List<SelectItem> basicCauseCategories = new InvestigatorBLL(this.GetDBAlias()).GetBasicCauseCategories(SM.CurrentUser.Culture);
    
                    Store_CauseCategory.DataSource = basicCauseCategories;
                    Store_CauseCategory.DataBind();
    
                    PopulateCultures();
                    BindGrid();
                }
    
                // add a culture to the error messages
                this.FwClientSideErrorMessages.Culture = SM.CurrentUser.Culture;
            }
    
            #region PopulateCultures
            /// <summary>
            /// Populate the Culture combo box
            /// </summary>
            private void PopulateCultures()
            {
                // get the list of culture items, but then remove the default culture
                List<SelectItem> Cultures = new CommonBLL(this.SM.DBAlias).GetCultureItems();
                Cultures.RemoveAt(Cultures.FindIndex(obj => obj.Data == SM.DefaultCulture.Name));
    
                // ensure there is more than one culture other than the default and that the default is the current culture
                if (Cultures.Count != 0)
                {
                    Store_CultureType.DataSource = Cultures;
                    Store_CultureType.DataBind();
    
                    if (SM.CurrentUser.Culture == SM.DefaultCulture.Name)
                    {
                        cbCultureType.SelectedItem.Value = Cultures[0].Data;
                    }
                    else
                    {
                        cbCultureType.SelectedItem.Value = SM.CurrentUser.Culture;
                    }
    
                    // unhide translated selection values column in gridPanel
                    gpRootCause.ColumnModel.Columns[4].Hidden = false;
                    txtTransCause.Disabled = false;
                    cbCultureType.Hidden = false;
                    gvCustomHeader.Visible = true;
                    gpToolBar.PageSize = 18;
                }
            }
            #endregion
    
            #region FwDropDownListCultureType_SelectedIndexChanged
            /// <summary>
            /// Event handler for Culture type drop down list
            /// </summary>
            public void FwDropDownListCultureType_SelectedIndexChanged(object sender, DirectEventArgs e)
            {
                BindGrid();
            }
            #endregion
    
            #region RefreshNearCauseList
            /// <summary>
            /// Refreshes the drop-down list of Near Causes to correspond to the currently-selected Basic Cause Category.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void RefreshNearCauseList(object sender, StoreRefreshDataEventArgs e)
            {
                string categoryId = e.Parameters["query"];
    
                if (categoryId == null)
                {
                    // It's the initial load, so load the full near cause list
                    List<SelectItem> nearCauses = new InvestigatorBLL(this.GetDBAlias()).GetNearRootCauses(SM.CurrentUser.Culture);
    
                    this.Store_NearCause.DataSource = nearCauses;
                    this.Store_NearCause.DataBind();
                }
                else if (categoryId == String.Empty)
                {
                    // Category has not yet been selected, so we can't offer any near root causes
    
                }
                else
                {
                    // Load the near root causes that correspond to the selected cause category
                    List<SelectItem> nearCauses = new InvestigatorBLL(this.GetDBAlias()).GetNearRootCausesForCategory(categoryId, SM.CurrentUser.Culture);
    
                    this.Store_NearCause.DataSource = nearCauses;
                    this.Store_NearCause.DataBind();
                }
            }
            #endregion
    
            #region AfterEdit
            /// <summary>
            /// Called after a grid cell has been edited. Clears the Near Root Cause value when a new Basic Cause Category is selected.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void AfterEdit(object sender, DirectEventArgs e)
            {
                // If Basic Cause Category was changed, clear the Near Root Cause selection
                if (e.ExtraParams["field"] == "CategoryId")
                {
                    JsonObject data = JSON.Deserialize<JsonObject>(e.ExtraParams["record"]);
                    RowSelectionModel sm = gpRootCause.SelectionModel.Primary as RowSelectionModel;
                    this.RootCauseStore.UpdateRecordField(sm.SelectedRow.RowIndex, "NearCauseId", "");
                    
                }
            }
            #endregion
    
            #region BindGrid
            /// <summary>
            /// Bind the Root Causes to the grid
            /// </summary>
            private void BindGrid()
            {
                try
                {
                    // Get list of near root causes for the row's selected Basic Cause ID
                    List<SelectItem> nearCauses = new InvestigatorBLL(this.GetDBAlias()).GetNearRootCauses(SM.CurrentUser.Culture);
    
                    this.Store_NearCause.DataSource = nearCauses;
                    this.Store_NearCause.DataBind();
    
                    InvestigatorLibraryRootCauseDAO dao = new InvestigatorLibraryRootCauseDAO(this.GetDBAlias());
                    // perform select and format data
                    DataTable causeTable = dao.RootCauseResultsSelect(SM.DefaultCulture.Name, SM.CurrentUser.Culture, cbCultureType.SelectedItem.Value);
    
                    gpRootCause.GetStore().DataSource = causeTable;
                    gpRootCause.GetStore().DataBind();
    
                }
                catch (Exception e)
                {
                    LogError(e, true, "investigator_libraryRootCause", "BindGrid()");
                }
            }
            #endregion
    
            #region Refresh Cause Category Store
            /// <summary>
            /// Called when the Root Causes Store needs to be Refreshed
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void RootCauseStore_Refresh(object sender, StoreRefreshDataEventArgs e)
            {
                BindGrid();
            }
            #endregion
    
            #region RootCauseStore_BeforeChanged
            /// <summary>
            /// Process the changes to the grid
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void RootCauseStore_BeforeChanged(object sender, BeforeStoreChangedEventArgs e)
            {
                //...do saving of changes
            }
    }
    Last edited by Daniil; Oct 10, 2011 at 12:08 PM. Reason: [CLOSED]
  2. #2

Similar Threads

  1. Ajax linked combos
    By ddolan in forum 1.x Help
    Replies: 0
    Last Post: Feb 17, 2011, 8:30 PM
  2. Replies: 0
    Last Post: Apr 01, 2010, 6:51 AM
  3. The example Linked combos in grid.
    By FreddeM in forum Examples and Extras
    Replies: 1
    Last Post: Jan 04, 2010, 2:41 PM
  4. [CLOSED] Linked combos with SQL datasource
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 27, 2009, 6:49 AM
  5. Linked Combos in Grid Version 0.7
    By eguerrap in forum 1.x Help
    Replies: 0
    Last Post: Jan 27, 2009, 3:19 PM

Tags for this Thread

Posting Permissions