Set Read Only to Grid Column Editor based on other cell value

  1. #1

    Set Read Only to Grid Column Editor based on other cell value

    Hello,
    I have a ComboBox editor in Grid Column. I want to set readonly/disabled to this combobox based on other cell (SAME ROW) value. I have tried several ways but it does not work.
    How can I do this. Please help me.

    Here is my code.

    
    <ext:XScript ID="XScript2" runat="server">
    <script type="text/javascript">
    
        var RenderEditor = function (value, meta, record) {
            if (record.data['TypeLevel'] == 'Strategic Office') {
               this.ddlGrade.ReadOnly(true);
            }
            else {
                this.ddlGrade.ReadOnly(false);
            }
        }  
    </script>
    </ext:XScript>
    
    <ext:GridPanel ID="grdGradingEntities" runat="server" AnchorHorizontal="100%" Height="690"
                        AutoExpandColumn="clmAuditableUnitName" Width="920" StripeRows="true" Border="true"
                        Title="Grading Entities" meta:resourcekey="grdGradingEntitiesResource1">
                        <SaveMask ShowMask="True" />
                        <Store>
                            <ext:Store ID="storeGradingEntities" runat="server" SerializationMode="Simple" meta:resourcekey="storeGradingEntitiesPlanResource1"
                                OnRefreshData="grdGradingEntities_Refresh">
                                <Reader>
                                    <ext:JsonReader IDProperty="OID">
                                        <Fields>
                                            <ext:RecordField Name="AnnualPlanOID" Mapping="AnnualPlanOID" Type="String" />
                                            <ext:RecordField Name="AuditableUnitOID" Mapping="AuditableUnitOID" Type="String" />
                                            <ext:RecordField Name="AuditableUnitName" Mapping="AuditableUnitName" Type="String" />
                                            <ext:RecordField Name="AuditableUnitName_N" Mapping="AuditableUnitName_N" Type="String" />
                                            <ext:RecordField Name="RiskScoreTotal" Mapping="RiskScoreTotal" />
                                            <ext:RecordField Name="Actual_AuditableUnitGradeOID" Mapping="Actual_AuditableUnitGradeOID"
                                                Type="String" />
                                            <ext:RecordField Name="ActualGradeName" Mapping="ActualGradeName" Type="String" />
                                            <ext:RecordField Name="Allocated_AuditableUnitGradeOID" Mapping="Allocated_AuditableUnitGradeOID"
                                                Type="String" />
                                            <ext:RecordField Name="AllocatedGradeName" Mapping="AllocatedGradeName" Type="String" />
                                            <ext:RecordField Name="Justification" Mapping="Justification" Type="String" />
                                            <ext:RecordField Name="OfficeTypeOID" Mapping="OfficeTypeOID" Type="String" />
                                            <ext:RecordField Name="TypeName" Mapping="TypeName" Type="String" />
                                            <ext:RecordField Name="TypeName_N" Mapping="TypeName_N" Type="String" />
                                            <ext:RecordField Name="TypeLevel" Mapping="TypeLevel" Type="String" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:RowNumbererColumn Header="S.N" Width="30" />
                                <ext:Column ColumnID="clmAuditableUnitName" DataIndex="AuditableUnitName" Header="Office/Entity"
                                    Width="50" meta:resourcekey="clmAuditableUnitNameResource" />
                                <ext:Column ColumnID="clmTypeName" DataIndex="TypeName" Header="Office Type" Width="170"
                                    meta:resourcekey="clmTypeNameResource" />
                                <ext:Column ColumnID="clmRiskScoreTotal" DataIndex="RiskScoreTotal" Header="Risk Score/ Weightage"
                                    Align="Center" Width="80" meta:resourcekey="cRiskScoreResource" />
                                <ext:Column ColumnID="clmActualGradeName" DataIndex="ActualGradeName" Header="Grade"
                                    Align="Center" Width="50" meta:resourcekey="clmActualGradeNameResource" />
                                <ext:Column ColumnID="clmAllocatedGradeName" Header="Grade by Judgment" DataIndex="AllocatedGradeName"
                                    Width="70" Align="Center" meta:resourcekey="clmGradebyJudgmentResource">
                                    <Editor>
                                        <ext:ComboBox ID="ddlGrade" runat="server" Shadow="Drop" Mode="Local" TriggerAction="All"
                                            ForceSelection="true" EmptyText="Please Select" meta:resourcekey="ddlGradeResource1">
                                            <Items>
                                                <ext:ListItem Text="A" Value="A" />
                                                <ext:ListItem Text="B" Value="B" />
                                                <ext:ListItem Text="C" Value="C" />
                                            </Items>
                                        </ext:ComboBox>
                                    </Editor>
                                    <Renderer Fn="RenderEditor" />
                                </ext:Column>
                                <ext:Column ColumnID="Justification" DataIndex="Justification" Header="Justification"
                                    Width="200" meta:resourcekey="cAuditjustification">
                                    <Editor>
                                        <ext:TextField ID="txtjustification" runat="server">
                                        </ext:TextField>
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <Listeners>
                            <Command Handler="Ext.net.DirectMethods.ExecuteActionCommand(command, record.data);" />
                        </Listeners>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="25" DisplayInfo="True"
                                meta:resourcekey="PagingToolbar1Resource1" />
                        </BottomBar>
                    </ext:GridPanel>
  2. #2
    Hi @mahmud213,

    What about not to show a ComboBox at all rather than disable it? You can return false from a BeforeEdit listener to prevent editing.
  3. #3
    Hi @Daniil,
    Thank you for your Reply.

    What about not to show a ComboBox at all rather than disable it? You can return false from a BeforeEdit listener to prevent editing.
    The fact is I need to show an already selected value in ComboBox. So I need to disabled it based on other cell value (SAME ROW) because of User can not change the value.

    The Scenario is when the value of "TypeLevel" (In Store) is equal to "Strategic Office" then ComboBox should be disabled otherwise it is open to user to change value of ComboBox. I attach a screenshot of my Grid with this thread.

    Please Help.

    Thank You
    Mahmud
    Attached Thumbnails Disabled_ComboBox__in_Grid_Editor.jpg  
  4. #4
    The fact is I need to show an already selected value in ComboBox.
    But it is already shown on the cell, isn't? Maybe, I misunderstood something in the scenario.

    In any way, here is an example demonstrating how to achieve what you are looking for.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "disabled", "something" },
                    new object[] { "enabled", "something" },
                    new object[] { "disabled", "something" },
                };
                store.DataBind();
            }
        }
    </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>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="someField1" />
                                    <ext:RecordField Name="someField2" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Disabled" DataIndex="someField1" />
                        <ext:Column Header="Value" DataIndex="someField2">
                            <Editor>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" />
                                        <ext:ListItem Text="Item 2" />
                                    </Items>
                                </ext:ComboBox>
                            </Editor>
                            <EditorOptions>
                                <Listeners>
                                    <StartEdit Handler="this.field.setReadOnly(this.record.data.someField1 === 'disabled');" />
                                </Listeners>
                            </EditorOptions>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Hi @Daniil,
    Thank you for your nice effort. Its perfectly works for me.

    You can close this thread.

    Thank You
    Mahmud

Similar Threads

  1. [CLOSED] different cell editor under the same column
    By RCM in forum 2.x Premium Help
    Replies: 1
    Last Post: Oct 21, 2013, 2:25 PM
  2. Replies: 1
    Last Post: Feb 01, 2013, 2:12 PM
  3. Replies: 2
    Last Post: Aug 09, 2012, 4:25 AM
  4. Grid - Disable Editor Based upon value
    By Tbaseflug in forum 1.x Help
    Replies: 4
    Last Post: Sep 25, 2009, 9:53 AM
  5. Replies: 0
    Last Post: Sep 11, 2009, 3:34 PM

Tags for this Thread

Posting Permissions