hide specific gridview (Devexpress grid) field based on checkbox selection

2.5k views Asked by At

I have a gridview populated with data and based on Chekbox selection I would like to hide one field on editform. any one can please guide on this,what would be better to hide the column on client side or server side code?, Please find the below code for your reference (below is 4 columns (4 fields) in devexpress Grid, when we select checkbox then one of column(Dropdown) should be hide.).

<dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="1"  Caption="Name">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Email" VisibleIndex="2"  Caption="Email">
 </dx:GridViewDataTextColumn>
<dx:GridViewDataCheckColumn FieldName="IsGraduate" VisibleIndex="3" Caption="Is Graduate ">
</dx:GridViewDataCheckColumn>
<dx:GridViewDataComboBoxColumn Caption="Degree" FieldName="Degree" 
 ShowInCustomizationForm="True" VisibleIndex="4">
<PropertiesComboBox DataSourceID="DegreeDataSource" TextField="Degree"  ValueField="Id">
</PropertiesComboBox>
</dx:GridViewDataComboBoxColumn>
2

There are 2 answers

0
Michael On

Did you try to use EditFormSetting visibility for necessary column? Look at the example below

        <dx:GridViewDataComboBoxColumn FieldName="color" Caption="#" VisibleIndex="2" ReadOnly="True"
            Width="25px">
            <HeaderStyle HorizontalAlign="Center" />
            <PropertiesComboBox DataSourceID="ColoredStatusSource" TextField="name" ValueField="id"
                EnableSynchronization="False" IncrementalFilteringMode="Contains" ValueType="System.Int32">
            </PropertiesComboBox>
            <EditFormSettings Visible="False" />
        </dx:GridViewDataComboBoxColumn>
0
bluejaded On

It would be better if you hide the column by using client side events to prevent callbacks. Use the following codes as your guide:

    Protected Sub dgView_001_CellEditorInitialize(sender As Object, e As DevExpress.Web.ASPxGridView.ASPxGridViewEditorEventArgs) Handles dgView_001.CellEditorInitialize

    If e.Column.FieldName = "IsGraduate" Then

        Dim chk As DevExpress.Web.ASPxEditors.ASPxCheckBox = New DevExpress.Web.ASPxEditors.ASPxCheckBox()

        chk = TryCast(e.Editor, DevExpress.Web.ASPxEditors.ASPxCheckBox)

        chk.ClientInstanceName = "chkIsGraduate"

        chk.ClientSideEvents.CheckedChanged = "function(s, e){ //if checked = true, hide column you want to hide }"

   ElseIf e.Column.FieldName = "Degree" Then

        Dim cmb As DevExpress.Web.ASPxEditors.ASPxComboBox = New DevExpress.Web.ASPxEditors.ASPxComboBox()

        cmb = TryCast(e.Editor, DevExpress.Web.ASPxEditors.ASPxComboBox)

        cmb.ClientInstanceName = "cmbDegree"

   End If

   End Sub

Take note that you should also assign a client instance name to the column you want to hide for you to access it in javascript. Hope this helps! :)