How to: Iterate through Column Editors on the Client

Dec 17, 2020

The following example iterates through column editors on the client and dynamically disables editors on an Edit Form when an editor’s value is changed. This approach cannot be used when edit templates are defined.

Default.aspx

aspx

<dx:ASPxCardView ID="ASPxCardView1" ClientInstanceName="grid" OnCardUpdating="ASPxCardView1_CardUpdating" OnCellEditorInitialize="ASPxCardView1_CellEditorInitialize" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="ProductID">
    <Columns>
        <dx:CardViewTextColumn FieldName="ProductID" Visible="False" />
        <dx:CardViewTextColumn FieldName="UnitPrice" />
        <dx:CardViewTextColumn FieldName="UnitsInStock" />
        <dx:CardViewTextColumn FieldName="UnitsOnOrder" />
        <dx:CardViewCheckColumn FieldName="Discontinued" />
            <PropertiesCheckEdit>
                <ClientSideEvents CheckedChanged="function(s, e) {
                    for(i = 0; i < grid.GetColumnCount(); i++) {
                        var editor = grid.GetEditor(i);
                        if(editor != null && editor != s)
                            editor.SetEnabled(s.GetChecked());
                    } }" />
            </PropertiesCheckEdit>
        </dx:CardViewCheckColumn>
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True" />
            <dx:CardViewColumnLayoutItem ColumnName="UnitPrice" />
            <dx:CardViewColumnLayoutItem ColumnName="UnitsInStock" />
            <dx:CardViewColumnLayoutItem ColumnName="UnitsOnOrder" />
            <dx:CardViewColumnLayoutItem ColumnName="Discontinued" />
            <dx:EditModeCommandLayoutItem HorizontalAlign="Right" />
        </Items>
    </CardLayoutProperties>
</dx:ASPxCardView>