<div data-options="dxView : { name: 'MaterialSearchConditionView' } ">
    <div data-bind="dxOverlay: popupSearchViewOptions ">
        <div data-bind="dxScrollView: {}" class="search-view-frame">
            <div class="search-view">
                <div id="searchViewCondition">
                    <div class="search-title">
                        <span class="search-text">@searchCondition</span>
                        <div class="dx-field right-search-wrap">
                            <div style="float: right;" data-bind="dxButton: { text: '@search', icon: 'search', clickAction: handleSearchInSearchView }"></div>
                        </div>
                    </div>
                    <div class="dx-fieldset">
                        <div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.BusinessFieldId.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@businessField</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value" data-bind="dxSelectBox: {
                                    disabled: !searchViewItems.BusinessFieldId.check(),
                                    dataSource: searchViewItems.BusinessFieldId.dataSource,
                                    displayExpr: 'Name' ,
                                    valueExpr: 'BusinessFieldId' ,
                                    value: searchViewItems.BusinessFieldId.value }">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.FirstClassId.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@materialClass</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value" data-bind="dxSelectBox: {
											disabled: !searchViewItems.FirstClassId.check(),
											dataSource: searchViewItems.FirstClassId.dataSource,
											displayExpr: 'Name' ,
											valueExpr: 'MaterialClassId' ,
											valueChangeAction: searchViewItems.FirstClassId.handleChangedValue,
											value: searchViewItems.FirstClassId.value }">
                                    </div>
                                    <div class="dx-field-value" data-bind="dxSelectBox: {
											disabled: !searchViewItems.FirstClassId.check(),
											dataSource: searchViewItems.SecondClassId.dataSource,
											displayExpr: 'Name' ,
											valueExpr: 'MaterialClassId' ,
											valueChangeAction: searchViewItems.SecondClassId.handleChangedValue,
											value: searchViewItems.SecondClassId.value }">
                                    </div>
                                    <div class="dx-field-value" data-bind="dxSelectBox: {
											disabled: !searchViewItems.FirstClassId.check(),
											dataSource: searchViewItems.ThirdClassId.dataSource,
                                                        displayExpr: 'Name' ,
                                                        valueExpr: 'MaterialClassId' ,
                                                        value: searchViewItems.ThirdClassId.value }">
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--<div class="dx-field search-field-box">
                                      <ul class="search-row-layout">
                                        <li class="form-Box">
                                          <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.MaterialTypeId.check }" />
                                        </li>
                            <li class="form-label">
                              <div class="dx-field-label">@materialType</div>
                            </li>
                            <li class="form-field">
                              <div class="dx-field-value" data-bind="dxSelectBox: {
                                                    disabled: !searchViewItems.MaterialTypeId.check(),
                                                    dataSource: searchViewItems.MaterialTypeId.dataSource,
                                                    displayExpr: 'Name' ,
                                                    valueExpr: 'MaterialTypeId' ,
                                                    value: searchViewItems.MaterialTypeId.value }">
                              </div>
                            </li>
                          </ul>
                        </div>-->

                        <div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.Name.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@materialName</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value input_form" data-bind="dxTextBox: { value: searchViewItems.Name.value, disabled: !searchViewItems.Name.check() }"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.Standard.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@materialStandard</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value input_form" data-bind="dxTextBox: { value: searchViewItems.Standard.value, disabled: !searchViewItems.Standard.check() }"></div>
                                </li>
                            </ul>
                        </div>
                        <!--<div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.Manufecturer.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@manufacturer</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value input_form" data-bind="dxTextBox: { value: searchViewItems.Manufecturer.value, disabled: !searchViewItems.Manufecturer.check() }"></div>
                                </li>
                            </ul>
                        </div>-->
                        <div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.IsDiscontinued.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@isDiscontinued</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value input_form" data-bind="dxSwitch: { value: searchViewItems.IsDiscontinued.value, onText: $G('yes'), offText: $G('no'), disabled: !searchViewItems.IsDiscontinued.check() }"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="dx-field search-field-box">
                            <ul class="search-row-layout">
                                <li class="form-Box">
                                    <div class="dx-field-value" data-bind="dxCheckBox: { value: searchViewItems.IsUse.check }" />
                                </li>
                                <li class="form-label">
                                    <div class="dx-field-label">@isUse</div>
                                </li>
                                <li class="form-field">
                                    <div class="dx-field-value input_form" data-bind="dxSwitch: { value: searchViewItems.IsUse.value, onText: $G('yes'), offText: $G('no'), disabled: !searchViewItems.IsUse.check() }"></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>