We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to apply filter search for the Treeview component

Hi Team,

As I am using the Treeview Component for the selection of checkboxes with the Treeview structure, so so many levels are present at the service level. need to implement the custom input search filter for the same.

Can u please provide the search option for the Treeview Structure.

Thanks and Regards,

Punith BN


Attachment: Search_2a699538.zip

5 Replies

SS Sharon Sanchez Selvaraj Syncfusion Team November 24, 2021 01:28 PM UTC

Hi Punith, 
 
Greetings from Syncfusion support. 
 
We have checked with your reported requirement for filtering in TreeView. Based on your attached video, we have noticed that the filtering is not working properly in your sample. We have created a sample for the same. 
 
Refer to the sample link: 
 
 
If the issue persists, please share your code snippets where filtering was tried from your end, else please compare the above sample with your code and make the required changes. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Sharon Sanchez S. 



PB Punith B N December 2, 2021 08:17 AM UTC


Hi Team,

As I am using the above code in my project code, but am getting the Type error shown in the below screenshot.

Can u please provide the solution for the above error.

Thanks and Regards,

Punith BN


Code sample:


<template>

  <div>

    <div id="divControlBtn" class="d-flex justify-content-end mt-2">

      <span class="special-btn p-1 mr-4 text-primary cpointer" @click="saveCustomerOutlet()"

        ><small

          ><span class="mr-2">{{ $t('common.save') }}</span> <i class="fas fa-save"></i

        ></small>

      </span>

      <span class="special-btn p-1 mr-4 text-danger cpointer" @click="cancelButton()"

        ><small>

          <span class="mr-2">{{ $t('common.cancel') }}</span>

          <i class="fas fa-times-circle"></i

        ></small>

      </span>

    </div>

    <div class="outlet-form mt-2">

      <b-card no-body>

        <b-tabs card>

          <b-tab title="Basic" class="mainBasicTab">

            <b-container fluid class="bv-example-row mb-3">

              <div

                class="tab-pane fade show active pt-4"

                id="nav-basic"

                role="tabpanel"

                aria-labelledby="nav-basic-tab"

              >

                <div class="row">

                  <div class="col-md-12 col-lg-6 mb-4">

                    <div class="outlet-section">

                      <div class="row align-items-center mb-3">

                        <div class="col-6">

                          <h5>General Information</h5>

                        </div>

                        <div class="col-3">

                          <label for="exampleFormControlInput1">{{ $t('outletwallet.status') }}</label>

                          <select

                            class="form-control form-control-sm"

                            id="selOutletType"

                            disabled="disabled"

                            v-model="outletDataJson.CustomerStatus"

                          >

                            <option value="1">Active</option>

                            <option value="0">In Active</option>

                          </select>

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.aprovalstatus') }}</label>

                          <b-badge variant="warning" v-if="outletDataJson.AprovalStatus === 0" title="Draft">Draft</b-badge>

                          <b-badge variant="success" v-if="outletDataJson.AprovalStatus === 2" title="Approved">Approved</b-badge>

                          <b-badge variant="danger" v-if="outletDataJson.AprovalStatus === 3" title="Rejected">Rejected</b-badge>

                          <b-badge variant="info" v-if="outletDataJson.AprovalStatus === 1" title="Sent for approval">Sent for approval</b-badge>

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1"

                            >{{ $t('outlet.outletcode') }}<span class="mandatory-field"></span

                          ></label>

                          <input

                            type="text"

                            class="form-control form-control-sm form-control form-control-sm-sm"

                            id="txtOutletCode"

                            v-model="outletDataJson.CustomerCode"

                            maxlength="24"

                            name="txtOutletCode"

                            v-bind="enableInput('OUTLET_CUSTOMERCODE')"

                          />

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1"

                            >{{ $t('outlet.outletname') }}<span class="mandatory-field"></span

                          ></label>

                          <input

                            type="text"

                            class="form-control form-control-sm form-control form-control-sm-sm"

                            v-model="outletDataJson.CustomerName"

                            v-bind="enableInput('OUTLET_CUSTOMERNAME')"

                            maxlength="100"

                          />

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.outlettype') }}</label>

                          <select

                            class="form-control form-control-sm"

                            id="selOutletType"

                            v-model="outletDataJson.OutletType"

                            v-bind="enableInput('OUTLET_OUTLETTYPE')"

                          >

                            <option value=""></option>

                            <option value="0">Is Sub DB Attribute</option>

                            <option value="1">Is Tertiary Outlet</option>

                          </select>

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.salesgroupcode') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            maxlength="24"

                            v-bind="enableInput('OUTLET_SALESGROUPCODE')"

                            name="txtSalesGroupCode"

                            v-model="outletDataJson.SalesGroupCodeByOutlet"

                          />

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.hierarchycode') }}</label>

                          <!-- <input class="form-control form-control-sm" id="exampleFormControlSelect3" v-model="hrchyCode" @click="openHierarchyFilter()"> -->

                          <div class="input-group mb-3">

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              v-bind="enableInput('OUTLET_HIERARCHYCODE')"

                              aria-describedby="button-addon2"

                              v-model="hrchyCode"

                            />

                            <div class="input-group-append">

                              <button

                                class="btn btn-sm btn-outline-secondary"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#hierarchyCode"

                                @click="openHierarchyFilter()"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.salesmode') }}</label>

                          <select

                            class="form-control form-control-sm"

                            id="ddlSalesMode"

                            v-model="outletDataJson.SalesMode"

                            v-bind="enableInput('OUTLET_SALESMODE')"

                          >

                            <option value="0">Cash</option>

                            <option value="1">Credit</option>

                          </select>

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.paymenttype') }}</label>

                          <select

                            class="form-control form-control-sm"

                            id="ddlPaymentType"

                            v-model="outletDataJson.PaymentType"

                            v-bind="enableInput('OUTLET_PAYMENTTYPE')"

                          >

                            <option value="0">Cash(P001 )</option>

                            <option value="1">Cheque(P002 )</option>

                          </select>

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-4">

                          <label for="exampleFormControlInput1">Name(A)</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.CustomerNameA"

                            maxlength="100"

                            v-bind="enableInput('OUTLET_CUSTOMERNAMEA')"

                          />

                        </div>

                        <div class="form-group col-4">

                          <label for="exampleFormControlInput1">{{ $t('outlet.ownername') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            id="txtOwnerName"

                            v-model="outletDataJson.OwnerName"

                            v-bind="enableInput('OUTLET_OWNERNAME')"

                          />

                        </div>

                        <div class="form-group col-4">

                          <label for="exampleFormControlInput1">{{ $t('outlet.templateid') }}</label>


                          <div class="input-group">

                            <input type="text" class="form-control form-control-sm" v-model="outletDataJson.TemplateID"

                            v-bind="enableInput('OUTLET_TEMPLATEID')"/>

                            <div class="input-group-append">

                              <span class="fa fa-search form-control-feedback" style="position:absolute;right:8px;opacity:0.6;top:7px;z-index:9;"></span>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="row align-items-end">

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.authorizeditemlistkey') }}</label>

                          <select

                            class="form-control form-control-sm"

                            v-model="outletDataJson.AuthorizedItemListKey"

                            v-bind="enableInput('OUTLET_AUTHORIZEDITEMLISTKEY')"

                          >

                            <option value=""></option>

                            <option

                              v-for="(option, index) in authorizedProductDropDownValues"

                              :key="index"

                              :value="option.IDNumber"

                              >{{ option.CodeAndDesc }}></option

                            >

                          </select>

                        </div>

                        <div class="form-group col-3">

                          <label for="exampleFormControlInput1">{{ $t('outlet.customerprinciplecode') }}</label>

                          <input type="text" class="form-control" disabled="disabled" />

                        </div>

                        <div class="form-group form-check col-3">

                          <input

                            type="checkbox"

                            class="form-check-input"

                            id="exampleCheck1"

                            v-model="outletDataJson.OfficeAccount"

                            v-bind="enableInput('OUTLET_OFFICEACCOUNT')"

                          />

                          <label class="form-check-label" for="exampleCheck1">{{ $t('outlet.officeaccount') }}</label>

                        </div>


                        <div class="form-group form-check col-3">

                          <label class="form-check-label" for="exampleCheck1">{{ $t('outlet.billtooutlet') }}</label>


                          <div class="input-group">

                            <input type="text" class="form-control form-control-sm" v-model="outletDataJson.BillToCustomer"

                              v-bind="enableInput('OUTLET_BILLTOOUTLET')">

                            <div class="input-group-append">

                              <span class="fa fa-search form-control-feedback" style="position:absolute;right:8px;opacity:0.6;top:7px;z-index:9;"></span>

                            </div>

                          </div>


                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="col-md-12 col-lg-6 mb-4">

                    <div class="outlet-section">

                      <h5 class="mb-3">Location</h5>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">Address 1<span class="mandatory-field"></span></label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.Address1"

                            name="txtAddress1"

                            v-bind="enableInput('OUTLET_ADDRESS1')"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">Address 2</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.Address2"

                            v-bind="enableInput('OUTLET_ADDRESS2')"

                            name="txtAddress2"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">Address 3</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.Address3"

                            v-bind="enableInput('OUTLET_ADDRESS3')"

                            name="txtAddress3"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">Address 4</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.Address4"

                            v-bind="enableInput('OUTLET_ADDRESS4')"

                            name="txtAddress4"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-4">

                          <label for="exampleFormControlInput1">City</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.City"

                            v-bind="enableInput('OUTLET_CITY')"

                            name="txtCity"

                          />

                        </div>

                        <div class="form-group col-4">

                          <label for="exampleFormControlInput1">State</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.State"

                            v-bind="enableInput('OUTLET_STATE')"

                            name="txtState"

                          />

                        </div>

                        <div class="form-group col-4">

                          <label for="exampleFormControlInput1">Zip</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.Zip"

                            v-bind="enableInput('OUTLET_ZIP')"

                            name="txtZip"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.geocodex') }}</label>

                          <input

                            type="number"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.GeoCodeX"

                            onkeypress="return validateRegex(event);"

                            maxlength="10"

                            v-bind="enableInput('OUTLET_GEOCODEX')"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.geocodey') }}</label>

                          <input

                            type="number"

                            class="form-control form-control-sm"

                            v-model="outletDataJson.GeoCodeY"

                            onkeypress="return validateRegex(event);"

                            maxlength="10"

                            v-bind="enableInput('OUTLET_GEOCODEY')"

                          />

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

                <div class="row">

                  <div class="col-12">

                    <div class="row">

                      <div class="col-md-12 col-lg-6 mb-4">

                        <div class="outlet-section">

                          <h5 class="mb-3">Contact</h5>

                          <div class="row">

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.contactperson') }}</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                v-model="outletDataJson.ContactPerson"

                                v-bind="enableInput('OUTLET_CONTACTPERSON')"

                              />

                            </div>

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.mobile') }}</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                id="exampleFormControlInput1"

                                v-model="outletDataJson.Mobile"

                                v-bind="enableInput('OUTLET_MOBILE')"

                              />

                            </div>

                          </div>

                          <div class="row">

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.phone') }}</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                v-model="outletDataJson.Phone"

                                v-bind="enableInput('OUTLET_PHONE')"

                              />

                            </div>

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.telephone') }}</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                v-model="outletDataJson.Telephone"

                                v-bind="enableInput('OUTLET_TELEPHONE')"

                              />

                            </div>

                          </div>

                          <div class="row">

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.fax') }}</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                v-model="outletDataJson.Fax"

                                v-bind="enableInput('OUTLET_FAX')"

                              />

                            </div>

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.email') }}</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                v-model="outletDataJson.Email"

                                v-bind="enableInput('OUTLET_EMAIL')"

                              />

                            </div>

                          </div>

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.website') }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              v-model="outletDataJson.Website"

                              v-bind="enableInput('OUTLET_WEBSITE')"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="col-md-12 col-lg-3 mb-4">

                        <div class="outlet-section">

                          <h5 class="mb-3">Promotions</h5>

                          <div class="row">

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.salespromotionkey') }}</label>

                              <select

                                class="form-control form-control-sm"

                                id="exampleFormControlSelect1"

                                v-model="outletDataJson.SalesPromotionKey"

                                v-bind="enableInput('OUTLET_SALESPROMOTIONKEY')"

                              >

                                <option value="-1"></option>

                              </select>

                            </div>

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.returnpromotionkey') }}</label>

                              <select

                                class="form-control form-control-sm"

                                id="exampleFormControlSelect1"

                                v-model="outletDataJson.ReturnPromotionkey"

                                v-bind="enableInput('OUTLET_RETURNPROMOTIONKEY')"

                              >

                                <option value="-1"></option>

                              </select>

                            </div>

                          </div>

                          <div class="row">

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.pointsaccumulated') }}</label>

                              <input

                                type="number"

                                class="form-control form-control-sm"

                                onkeypress="return validateRegex(event);"

                                v-model="outletDataJson.LoyaltyPoints"

                                maxlength="10"

                                v-bind="enableInput('OUTLET_POINTSACCUMULATED')"

                              />

                            </div>

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">{{ $t('outlet.surveykey') }}</label>

                              <select

                                class="form-control form-control-sm"

                                id="exampleFormControlSelect1"

                                v-model="outletDataJson.ReturnPromotionkey"

                                v-bind="enableInput('OUTLET_RETURNPROMOTIONKEY')"

                              >

                                <option value="-1"></option>

                              </select>

                            </div>

                          </div>

                          <div class="row">

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">Discount %</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                id="exampleFormControlInput1"

                                v-model="outletDataJson.CashDiscountPerc"

                              />

                            </div>

                            <div class="form-group col-6">

                              <label for="exampleFormControlInput1">Margin %</label>

                              <input

                                type="text"

                                class="form-control form-control-sm"

                                id="exampleFormControlInput1"

                                placeholder=""

                                v-model="outletDataJson.MarginPerc"

                              />

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="col-md-12 col-lg-3 mb-4">

                        <div class="outlet-section">

                          <h5 class="mb-3">Pricing</h5>

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.customerpricelevel') }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              v-model="outletDataJson.CustomerPriceLevel"

                              v-bind="enableInput('OUTLET_CUSTOMERPRICELEVEL')"

                              placeholder=""

                            >

                              <option value=""></option>

                              <option value="0">Sales Price(0)</option>

                              <option value="1">Price Level 1(1)</option>

                              <option value="2">Price Level 2(2)</option>

                              <option value="3">Price Level 3(3)</option>

                              <option value="4">Price Level 4(4)</option>

                              <option value="5">Price Level 5(5)</option>

                            </select>

                          </div>

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.customerpricingkey') }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CustomerPricingKey"

                              v-bind="enableInput('OUTLET_CUSTOMERPRICINGKEY')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in pricingDropDownValues"

                                :key="index"

                                :value="option.IDNumber"

                                >{{ option.CodeAndDesc }}></option

                              >

                            </select>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </b-container>

          </b-tab>

          <b-tab title="Classifications" @click="categoriesTabClicked">

            <b-container fluid class="bv-example-row mb-3">

              <div

                class="tab-pane fade show active pt-4"

                id="nav-categorie"

                role="tabpanel"

                aria-labelledby="nav-categorie-tab"

              >

                <div class="row">

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">Categories</h5>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE1 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode1"

                              v-bind="enableInput('OUTLET_CATEGORYCODE1')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(1)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE2 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode2"

                              v-bind="enableInput('OUTLET_CATEGORYCODE2')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(2)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE3 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode3"

                              v-bind="enableInput('OUTLET_CATEGORYCODE3')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(3)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE4 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode4"

                              v-bind="enableInput('OUTLET_CATEGORYCODE4')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(4)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE5 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode5"

                              v-bind="enableInput('OUTLET_CATEGORYCODE5')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(5)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE6 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode6"

                              v-bind="enableInput('OUTLET_CATEGORYCODE6')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(6)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE7 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode7"

                              v-bind="enableInput('OUTLET_CATEGORYCODE7')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(7)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE8 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode8"

                              v-bind="enableInput('OUTLET_CATEGORYCODE8')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(8)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE9 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode9"

                              v-bind="enableInput('OUTLET_CATEGORYCODE9')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(9)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE10 }}</label>

                            <select

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.CategoryCode10"

                              v-bind="enableInput('OUTLET_CATEGORYCODE10')"

                            >

                              <option value=""></option>

                              <option

                                v-for="(option, index) in customCategoryOptions(10)"

                                :key="index"

                                :value="option.CategoryNumber"

                                >{{ option.CategoryCodeAndDescription }}></option

                              >

                            </select>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">Attributes</h5>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE1 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE1')"

                              v-model="outletDataJson.Attribute1"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE2 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE2')"

                              v-model="outletDataJson.Attribute2"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE3 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE3')"

                              v-model="outletDataJson.Attribute3"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE4 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE4')"

                              v-model="outletDataJson.Attribute4"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE5 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE5')"

                              v-model="outletDataJson.Attribute5"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE6 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE6')"

                              v-model="outletDataJson.Attribute6"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE7 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE7')"

                              v-model="outletDataJson.Attribute7"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE8 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE8')"

                              v-model="outletDataJson.Attribute8"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE9 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE9')"

                              v-model="outletDataJson.Attribute9"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE10 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE10')"

                              v-model="outletDataJson.Attribute10"

                            />

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

                <div class="row pt-4">

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">Calculated Attribute</h5>


                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE1 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE1')"

                              v-model="outletDataJson.CalculatedAttribute1"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE2 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE2')"

                              v-model="outletDataJson.CalculatedAttribute2"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE3 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE3')"

                              v-model="outletDataJson.CalculatedAttribute3"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE4 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE4')"

                              v-model="outletDataJson.CalculatedAttribute4"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE5 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE5')"

                              v-model="outletDataJson.CalculatedAttribute5"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE6 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE6')"

                              v-model="outletDataJson.CalculatedAttribute6"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE7 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE7')"

                              v-model="outletDataJson.CalculatedAttribute7"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE8 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE8')"

                              v-model="outletDataJson.CalculatedAttribute8"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE9 }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE9')"

                              v-model="outletDataJson.CalculatedAttribute9"

                            />

                          </div>

                        </div>

                        <div class="col-3">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{

                              outletlabels.OUTLET_CALCULATEDATTRIBUTE10

                            }}</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              maxlength="100"

                              v-bind="enableInput('OUTLET_ATTRIBUTE10')"

                              v-model="outletDataJson.CalculatedAttribute10"

                            />

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">Outlet Hierarchy</h5>

                      <div class="row">

                        <div class="col-4">

                          <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE1 }}</label>

                          <div class="input-group mb-3">

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              v-bind="enableInput('OUTLET_HIERARCHYCODE1')"

                              aria-describedby="button-addon2"

                              v-model="hrchyCode1"

                            />

                            <div class="input-group-append">

                              <button

                                class="btn btn-sm btn-outline-secondary"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#hierarchyCode"

                                @click="openHierarchyStructure(1)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                        <div class="col-4">

                          <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE2 }}</label>

                          <div class="input-group mb-3">

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              aria-describedby="button-addon2"

                              v-bind="enableInput('OUTLET_HIERARCHYCODE1')"

                              v-model="hrchyCode2"

                            />

                            <div class="input-group-append">

                              <button

                                class="btn btn-sm btn-outline-secondary"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#hierarchyCode"

                                @click="openHierarchyStructure(2)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                        <div class="col-4">

                          <label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE3 }}</label>

                          <div class="input-group mb-3">

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              v-bind="enableInput('OUTLET_HIERARCHYCODE1')"

                              aria-describedby="button-addon2"

                              v-model="hrchyCode3"

                            />

                            <div class="input-group-append">

                              <button

                                class="btn btn-sm btn-outline-secondary"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#hierarchyCode"

                                @click="openHierarchyStructure(3)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </b-container>

          </b-tab>

          <b-tab title="Finance">

            <b-container fluid class="bv-example-row mb-3">

              <div

                class="tab-pane fade show active pt-4"

                id="nav-credit"

                role="tabpanel"

                aria-labelledby="nav-credit-tab"

              >

                <div class="row">

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">Tax Details</h5>

                      <div class="row m-0">

                        <div class="form-group col-6 mb-0">

                          <input

                            type="checkbox"

                            class="form-check-input"

                            id="my-checkbox"

                            v-model="outletDataJson.TCS_Status"

                            @change="changeCheckBoxValue"

                          />

                          <label class="form-check-label" for="exampleCheck1">{{ $t('Auditlog.TCS_Status') }}</label>

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">TCS SalesAmount</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            id="exampleFormControlInput1"

                            placeholder=""

                            disabled="disabled"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.taxtype') }}</label>

                          <select

                            type="text"

                            class="form-control form-control-sm"

                            v-bind="enableInput('OUTLET_TAXTYPE')"

                            v-model="outletDataJson.TaxType"

                          >

                            <option value=""></option>

                            <option value="1">NON-VAT (1)</option>

                            <option value="0">VAT (0)</option>

                          </select>

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.tinnumber') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-bind="enableInput('OUTLET_TINNUMBER')"

                            value=""

                            maxlength="50"

                            v-model="outletDataJson.TINNumber"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.gstnumber') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            maxlength="50"

                            v-bind="enableInput('OUTLET_GSTNUMBER')"

                            v-model="outletDataJson.GSTNumber"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.pancardnumber') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-bind="enableInput('OUTLET_PANCARDNUMBER')"

                            v-model="outletDataJson.PANCardNumber"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.gstregistrationtype') }}</label>

                          <select

                            type="text"

                            class="form-control form-control-sm"

                            v-bind="enableInput('OUTLET_GSTREGISTRATIONTYPE')"

                            v-model="outletDataJson.GSTRegistrationType"

                          >

                            <option value=""></option>

                            <option value="0">Unregistered</option>

                            <option value="1">Registered</option>

                            <option value="2">Composite</option>

                          </select>

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.taxregioncode') }}</label>

                          <select

                            type="text"

                            class="form-control form-control-sm"

                            v-bind="enableInput('OUTLET_STATEID')"

                            v-model="outletDataJson.StateID"

                          >

                            <option value=""></option>

                            <option

                              v-for="(option, index) in taxRegionDropDownValues"

                              :key="index"

                              :value="option.StateID"

                              >{{ option.StateName + '(' + option.StateCode + ')' }}></option

                            >

                          </select>

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">TaxAdminOffice</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            id="exampleFormControlInput1"

                            readOnly="true"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">e Inovice Enabled</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            id="exampleFormControlInput1"

                            readOnly="true"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">E invoice PK alias Email id </label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            id="exampleFormControlInput1"

                            readOnly="true"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.taxnumber') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            maxlength="50"

                            v-bind="enableInput('OUTLET_TAXNUMBER')"

                            v-model="outletDataJson.TaxNumber"

                          />

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.istaxable') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            v-bind="enableInput('OUTLET_ISTAXABLE')"

                            v-model="outletDataJson.IsTaxable"

                          />

                        </div>

                        <div class="form-group col-6">

                          <label for="exampleFormControlInput1">{{ $t('outlet.cstnumber') }}</label>

                          <input

                            type="text"

                            class="form-control form-control-sm"

                            maxlength="50"

                            v-bind="enableInput('OUTLET_CSTNUMBER')"

                            v-model="outletDataJson.CSTNumber"

                          />

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">Credit details</h5>

                      <div class="row">

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">Deposit Amt</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              v-model="outletDataJson.DepositAmount"

                              onkeypress="return validateRegex(event);"

                            />

                          </div>

                        </div>

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.creditlimit') }}</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              v-model="outletDataJson.CreditLimit"

                              onkeypress="return validateRegex(event);"

                              maxlength="25"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.totalnumberofinvoices') }}</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              id="txtCreditLimit"

                              onkeypress="return validateRegex(event);"

                              v-model="outletDataJson.TotalNumberofInvoices"

                              maxlength="25"

                            />

                          </div>

                        </div>

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.totaldaysofinvoices') }}</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              id="txtTotalNumberofInvoices"

                              onkeypress="return validateRegex(event);"

                              v-model="outletDataJson.TotalDaysOfInvoices"

                              maxlength="25"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="form-group form-check col-6" style="margin: 1rem 0rem 2.5rem 0.5rem">

                          <input

                            type="checkbox"

                            class="form-check-input"

                            id="exampleCheck1"

                            name="chkBlocked"

                            v-model="outletDataJson.Blocked"

                            style="border:none"

                          />

                          <label class="form-check-label" for="exampleCheck1">{{ $t('outlet.blocked') }}</label>

                        </div>

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">Credit Intradays</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              v-model="outletDataJson.IntradayCreditLimit"

                              onkeypress="return validateRegex(event);"

                              placeholder=""

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.InvoiceCreditLimit') }}</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              onkeypress="return validateRegex(event);"

                              v-model="outletDataJson.InvoiceCreditLimit"

                              maxlength="25"

                            />

                          </div>

                        </div>

                        <div class="col-6">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">{{ $t('outlet.collimit') }}</label>

                            <input

                              type="number"

                              class="form-control form-control-sm"

                              onkeypress="return validateRegex(event);"

                              v-model="outletDataJson.COLLimit"

                              maxlength="25"

                            />

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </b-container>

          </b-tab>

          <b-tab title="Others">

            <b-container fluid class="bv-example-row mb-3">

              <div

                class="tab-pane fade show active pt-4"

                id="nav-other"

                role="tabpanel"

                aria-labelledby="nav-other-tab"

              >

                <div class="row">

                  <div class="col-6">

                    <div class="outlet-section">

                      <h5 class="mb-3">General information</h5>

                      <div class="row">

                        <div class="col-6">

                          <div class="row">

                            <div class="col-12">

                              <div class="form-group form-check" style="margin: 1rem 0rem 2.5rem 0rem">

                                <input

                                  type="checkbox"

                                  class="form-check-input"

                                  id="exampleCheck1"

                                  v-bind="enableInput('OUTLET_RELATEDPARTY')"

                                  v-model="outletDataJson.RelatedParty"

                                />

                                <label class="form-check-label" for="exampleCheck1">{{

                                  $t('outlet.relatedparty')

                                }}</label>

                              </div>

                            </div>


                            <div class="col-12">

                              <div class="form-group form-check" style="margin: 1rem 0rem 2.5rem 0rem">

                                <input

                                  type="checkbox"

                                  class="form-check-input"

                                  id="exampleCheck1"

                                  v-bind="enableInput('OUTLET_ENABLEOMS')"

                                  v-model="outletDataJson.EnableOMS"

                                />

                                <label class="form-check-label" for="exampleCheck1">{{ $t('outlet.enableoms') }}</label>

                              </div>

                            </div>

                          </div>

                          <div class="row">

                            <div class="col-12">

                              <div class="form-group form-check" style="margin: 1rem 0rem 2.5rem 0rem">

                                <input

                                  type="checkbox"

                                  class="form-check-input"

                                  id="exampleCheck1"

                                  v-bind="enableInput('OUTLET_ISOUTLETOWNERFEMALE')"

                                  style="border:none;"

                                  v-model="outletDataJson.IsOutletOwnerFemale"

                                />

                                <label class="form-check-label" for="exampleCheck1">{{

                                  $t('outlet.isoutletownerfemale')

                                }}</label>

                              </div>

                            </div>

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('outlet.runrate') }}</label>

                                <input

                                  type="number"

                                  class="form-control form-control-sm"

                                  v-bind="enableInput('OUTLET_RUNRATE')"

                                  onkeypress="return validateRegex(event);"

                                  maxlength="10"

                                  v-model="outletDataJson.RunRate"

                                />

                              </div>

                            </div>

                          </div>

                          <div class="row">

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('common.notes') }}</label>

                                <textarea

                                  type="text"

                                  class="form-control form-control-sm"

                                  v-bind="enableInput('OUTLET_NOTES')"

                                  id="txtNotes"

                                  rows="2"

                                  v-model="outletDataJson.Notes"

                                >

                                </textarea>

                              </div>

                            </div>

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('outlet.dayoff') }}</label>

                                <select

                                  type="text"

                                  class="form-control form-control-sm"

                                  value=""

                                  v-bind="enableInput('OUTLET_DAYOFF')"

                                  v-model="outletDataJson.DayOff"

                                >

                                  <option value="SUNDAY" selected="selected">SUNDAY</option>

                                  <option value="MONDAY">MONDAY</option>

                                  <option value="TUESDAY">TUESDAY</option>

                                  <option value="WEDNESDAY">WEDNESDAY</option>

                                  <option value="THURSDAY">THURSDAY</option>

                                  <option value="FRIDAY">FRIDAY</option>

                                  <option value="SATURDAY">SATURDAY</option>

                                </select>

                              </div>

                            </div>

                          </div>

                        </div>

                        <div class="col-6">

                          <div class="row">

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('outlet.coverage') }}</label>

                                <select

                                  type="text"

                                  class="form-control form-control-sm"

                                  value=""

                                  v-bind="enableInput('OUTLET_COVERAGE')"

                                  v-model="outletDataJson.Coverage"

                                >

                                  <option value="Bi-weekly" selected="selected">Bi-weekly</option>

                                  <option value="Daily">Daily</option>

                                  <option value="Fortnightly">Fortnightly</option>

                                  <option value="WEEKLY">WEEKLY</option>

                                </select>

                              </div>

                            </div>

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">Avg Turn Over</label>

                                <input

                                  type="text"

                                  class="form-control form-control-sm"

                                  id="exampleFormControlInput1"

                                  placeholder=""

                                  v-model="outletDataJson.AverageTurnOver"

                                />

                              </div>

                            </div>

                          </div>

                          <div class="row">

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('outlet.dateofregistration') }}</label>

                                <div id="wrapper">

                                  <ejs-datetimepicker

                                    id="datetimepicker"

                                    :placeholder="waterMarkText"

                                    :value="date"

                                    :format="dateFormat"

                                    v-model="outletDataJson.DateofRegistration"

                                  ></ejs-datetimepicker>

                                </div>

                              </div>

                            </div>

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('outlet.dateofbirth') }}</label>

                                <div id="wrapper">

                                  <ejs-datetimepicker

                                    id="datetimepicker"

                                    :placeholder="waterMarkText"

                                    :value="date"

                                    :format="dateFormat"

                                    v-model="outletDataJson.DateofBirth"

                                  ></ejs-datetimepicker>

                                </div>

                              </div>

                            </div>

                          </div>

                          <div class="row">

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">Aniversary date</label>

                                <ejs-datetimepicker

                                  id="datetimepicker"

                                  :placeholder="waterMarkText"

                                  :value="date"

                                  :format="dateFormat"

                                  v-model="outletDataJson.AnniversaryDate"

                                ></ejs-datetimepicker>

                              </div>

                            </div>

                            <div class="col-12">

                              <div class="form-group">

                                <label for="exampleFormControlInput1">{{ $t('outlet.divisionid') }}</label>

                                <select

                                  type="text"

                                  class="form-control form-control-sm"

                                  id="exampleFormControlInput1"

                                  placeholder=""

                                  v-model="outletDataJson.DivisionID"

                                >

                                  <option

                                    v-for="(option, index) in divisionDataDropDownValues"

                                    :key="index"

                                    :value="option.IDNumber"

                                    >{{ option.CodeAndDesc }}</option

                                  >

                                </select>

                              </div>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="col-3">

                    <div class="outlet-section">

                      <h5 class="mb-3">Messages</h5>

                      <div class="row">

                        <div class="col-12">

                          <label for="exampleFormControlInput1">{{ $t('outlet.messagekey1') }}</label>

                          <div class="input-group mb-3">

                            <select

                              type="text"

                              class="form-control form-control-sm mr-2"

                              placeholder="Recipient's username"

                              v-model="outletDataJson.MessageKey1"

                              v-bind="enableInput('OUTLET_MESSAGEKEY1')"

                            >

                              <option v-for="(option, index) in outletMessageKey1" :key="index" :value="option.ID">

                                {{ option.MessageText }}

                              </option>

                            </select>

                            <div class="input-group-append">

                              <button

                                class="btn btn-outline-secondary btn-sm"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#exampleModal"

                                @click="openModal(1)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-12">

                          <label for="exampleFormControlInput1">{{ $t('outlet.messagekey2') }}</label>

                          <div class="input-group mb-3">

                            <select

                              type="text"

                              class="form-control form-control-sm mr-2"

                              placeholder="Recipient's username"

                              v-model="outletDataJson.MessageKey2"

                              v-bind="enableInput('OUTLET_MESSAGEKEY2')"

                            >

                              <option v-for="(option, index) in outletMessageKey2" :key="index" :value="option.ID">

                                {{ option.MessageText }}

                              </option>

                            </select>

                            <div class="input-group-append">

                              <button

                                class="btn btn-outline-secondary btn-sm"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#exampleModal"

                                @click="openModal(2)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-12">

                          <label for="exampleFormControlInput1">{{ $t('outlet.messagekey3') }}</label>

                          <div class="input-group mb-3">

                            <select

                              type="text"

                              class="form-control form-control-sm mr-2"

                              placeholder="Recipient's username"

                              v-model="outletDataJson.MessageKey3"

                              v-bind="enableInput('OUTLET_MESSAGEKEY3')"

                            >

                              <option v-for="(option, index) in outletMessageKey3" :key="index" :value="option.ID">

                                {{ option.MessageText }}

                              </option>

                            </select>

                            <div class="input-group-append">

                              <button

                                class="btn btn-outline-secondary btn-sm"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#exampleModal"

                                @click="openModal(3)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-12">

                          <label for="exampleFormControlInput1">{{ $t('outlet.messagekey4') }}</label>

                          <div class="input-group mb-3">

                            <select

                              type="text"

                              class="form-control form-control-sm mr-2"

                              placeholder="Recipient's username"

                              v-model="outletDataJson.MessageKey4"

                              v-bind="enableInput('OUTLET_MESSAGEKEY4')"

                            >

                              <option v-for="(option, index) in outletMessageKey4" :key="index" :value="option.ID">

                                {{ option.MessageText }}

                              </option>

                            </select>

                            <div class="input-group-append">

                              <button

                                class="btn btn-outline-secondary btn-sm"

                                type="button"

                                id="button-addon2"

                                data-toggle="modal"

                                data-target="#exampleModal"

                                @click="openModal(4)"

                              >

                                <i class="fas fa-plus"></i>

                              </button>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="col-3">

                    <div class="outlet-section">

                      <h5 class="mb-3">License</h5>

                      <div class="row">

                        <div class="col-12">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">Drug License</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.LicenseNumber"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-12">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">Drug License Exp</label>

                            <div id="wrapper">

                              <ejs-datetimepicker

                                id="datetimepicker"

                                :placeholder="waterMarkText"

                                :value="date"

                                :format="dateFormat"

                                v-model="outletDataJson.LicenseExpiryDate"

                              ></ejs-datetimepicker>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-12">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">Insecticide License</label>

                            <input

                              type="text"

                              class="form-control form-control-sm"

                              id="exampleFormControlInput1"

                              placeholder=""

                              v-model="outletDataJson.LicenseNumber1"

                            />

                          </div>

                        </div>

                      </div>

                      <div class="row">

                        <div class="col-12">

                          <div class="form-group">

                            <label for="exampleFormControlInput1">Insecticide License Exp</label>

                            <ejs-datetimepicker

                              id="datetimepicker"

                              :placeholder="waterMarkText"

                              :value="date"

                              :format="dateFormat"

                              v-bind="enableInput('OUTLET_LICENSEEXPIRYDATE')"

                              v-model="outletDataJson.LicenseExpiryDate1"

                            ></ejs-datetimepicker>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </b-container>

          </b-tab>


          <!-- Render Tabs, supply a unique `key` to each tab -->

          <!-- <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">

            Tab contents {{ i }}

            <b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">

              Close tab

            </b-button>

          </b-tab> -->


          <!-- New Tab Button (Using tabs-end slot) -->

          <!-- <template #tabs-end>

            <b-nav-item role="presentation" @click.prevent="newTab" rel='nofollow' href="#"><b>+</b></b-nav-item>

          </template> -->


          <!-- Render this if no tabs -->

          <!-- <template #empty>

            <div class="text-center text-muted">

              There are no open tabs<br />

              Open a new tab using the <b>+</b> button above.

            </div>

          </template> -->

        </b-tabs>

      </b-card>

    </div>

    <div v-if="hierarchyfilter">

      <div

        id="postedpanel_divFilter"

        class="ck-popup"

        style="top: 515px; left: 320px; width: 325px; height: 400px; overflow: scroll;"

      >

        <div class="mb-2 d-flex">

          <div class="d-flex">

            <label>Filter: </label>

            <ejs-maskedtextbox

              id="maskObj"

              :change="searchNodes"

              placeholder="Enter the tree node to search"

            ></ejs-maskedtextbox>

          </div>

          <button type="button" class="close" style="margin-left:2rem;" @click="hierarchyfilter = !hierarchyfilter">

            <span aria-hidden="true">×</span>

          </button>

        </div>

        <div class="control_wrapper">

          <ejs-treeview

            id="treeview"

            :fields="fields"

            :autoCheck="false"

            :showCheckBox="true"

            :nodeChecked="nodeCheckedFilter"

            :nodeChecking="nodeChecking"

            :checkedNodes="checkedNodes"

          ></ejs-treeview>

        </div>

      </div>

    </div>

    <div v-if="hierarchyfilter1">

      <div

        id="postedpanel_divFilter"

        class="ck-popup"

        style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"

      >

        <div class="mb-2 d-flex">

          <div class="d-flex">

            <label>Filter: </label>

            <input type="text" id="myInput" class="form-control form-control-sm ml-2" @keyup="myFunction()" />

          </div>

          <button type="button" class="close" style="margin-left:2rem;" @click="hierarchyfilter1 = !hierarchyfilter1">

            <span aria-hidden="true">×</span>

          </button>

        </div>

        <div class="control_wrapper">

          <ejs-treeview

            id="treeview"

            :fields="fields"

            :autoCheck="false"

            :showCheckBox="true"

            :nodeChecked="nodeCheckedFilter1"

            :nodeChecking="nodeChecking"

            :checkedNodes="checkedNodes1"

          ></ejs-treeview>

        </div>

      </div>

    </div>

    <div v-if="hierarchyfilter2">

      <div

        id="postedpanel_divFilter"

        class="ck-popup"

        style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"

      >

        <div class="mb-2 d-flex">

          <div class="d-flex">

            <label>Filter: </label>

            <input type="text" id="myInput" class="form-control form-control-sm ml-2" @keyup="myFunction()" />

          </div>

          <button type="button" class="close" style="margin-left:2rem;" @click="hierarchyfilter2 = !hierarchyfilter2">

            <span aria-hidden="true">×</span>

          </button>

        </div>

        <div class="control_wrapper">

          <ejs-treeview

            id="treeview"

            :fields="fields"

            :autoCheck="false"

            :showCheckBox="true"

            :nodeChecked="nodeCheckedFilter2"

            :nodeChecking="nodeChecking"

            :checkedNodes="checkedNodes2"

          ></ejs-treeview>

        </div>

      </div>

    </div>

    <div v-if="hierarchyfilter3">

      <div

        id="postedpanel_divFilter"

        class="ck-popup"

        style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"

      >

        <div class="mb-2 d-flex">

          <div class="d-flex">

            <label>Filter: </label>

            <input type="text" id="myInput" class="form-control form-control-sm ml-2" @keyup="myFunction()" />

          </div>

          <button type="button" class="close" style="margin-left:2rem;" @click="hierarchyfilter3 = !hierarchyfilter3">

            <span aria-hidden="true">×</span>

          </button>

        </div>

        <div class="control_wrapper">

          <ejs-treeview

            id="treeview"

            :fields="fields"

            :autoCheck="false"

            :showCheckBox="true"

            :nodeChecked="nodeCheckedFilter3"

            :nodeChecking="nodeChecking"

            :checkedNodes="checkedNodes3"

          ></ejs-treeview>

        </div>

      </div>

    </div>

    <orderstatus-modal ref="orderStatusModal" @outletStatusChanged="outletStatusChanged"></orderstatus-modal>

    <commonmastermodal ref="commonmasterRef" @callCommonMasterdata="callCommonMasterdata"></commonmastermodal>

  </div>

</template>

<script>

import Vue from 'vue'

import api from '../service'

import orderstatusModal from './orderstatusModal.vue'

import commonmastermodal from './commonmastermodal.vue'

import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars'

import { TreeViewPlugin } from '@syncfusion/ej2-vue-navigations'

import {MaskedTextBoxPlugin } from '@syncfusion/ej2-vue-inputs';

import { DataManager, Query, Predicate } from "@syncfusion/ej2-data";

Vue.use(TreeViewPlugin)

Vue.use(DateTimePickerPlugin)

Vue.use(MaskedTextBoxPlugin);



export default {

  components: { orderstatusModal, commonmastermodal },

  name: 'OutletForm',

  props: ['pageConfigRes', 'outletId', 'mode', 'editModeJson', 'customerHierarchyForFilter'],

  data() {

    return {

      fields: {

        dataSource: [],

        id: 'ParentID',

        level: 'HierarchyLevel',

        code: 'HierarchyCode',

        parentID: 'HierarchyID',

        text: 'HierarchyName',

        child: 'subChild'

      },

      outletlabels: {},

      waterMarkText: 'Select a date and time',

      dateFormat: 'dd-MMM-yyyy',

      date: new Date(),

      outletDataJson: {

        Address1: '',

        Address2: '',

        Address3: '',

        Address4: '',

        AllowCustomerCode: '1',

        AlternateAddress1: '',

        AlternateAddress2: '',

        AlternateAddress3: '',

        AnniversaryDate: '',

        AprovalStatus: 0,

        Attribute1: '',

        Attribute2: '',

        Attribute3: '',

        Attribute4: '',

        Attribute5: '',

        Attribute6: '',

        Attribute7: '',

        Attribute8: '',

        Attribute9: '',

        Attribute10: '',

        AuthorizedItemListKey: '',

        AverageTurnOver: '',

        BankID1: '',

        BankID2: '',

        BarcodeCheckDigit: '',

        BillToCustomer: '',

        Blocked: 0,

        BranchID1: '',

        BranchID2: '',

        COLLimit: '',

        CSTNumber: '',

        CalculatedAttribute1: '',

        CalculatedAttribute2: '',

        CalculatedAttribute3: '',

        CalculatedAttribute4: '',

        CalculatedAttribute5: '',

        CalculatedAttribute6: '',

        CalculatedAttribute7: '',

        CalculatedAttribute8: '',

        CalculatedAttribute9: '',

        CalculatedAttribute10: '',

        CashDiscountPerc: '',

        CategoryCode1: '',

        CategoryCode2: '',

        CategoryCode3: '',

        CategoryCode4: '',

        CategoryCode5: '',

        CategoryCode6: '',

        CategoryCode7: '',

        CategoryCode8: '',

        CategoryCode9: '',

        CategoryCode10: '',

        City: '',

        ContactPerson: '',

        Coverage: 'Bi-weekly',

        CreditLimit: '0',

        CstID: 0,

        CustomerBalanceDue: '',

        CustomerCode: '',

        CustomerID: 0,

        CustomerName: 'Sample outlet',

        CustomerNameA: '',

        CustomerPriceLevel: '',

        CustomerPricingKey: '',

        // CustomerPrincipleCode: '',

        DateofBirth: '',

        DateofRegistration: '',

        DayOff: 'SUNDAY',

        DepositAmount: '',

        DivisionID: 9,

        Email: '',

        EnableOMS: 0,

        Fax: '',

        GSTNumber: '',

        GSTRegistrationType: "",

        GeoCodeX: '0',

        GeoCodeY: '0',

        HierarchyCode: '',

        HierarchyCode1: '',

        HierarchyCode2: '',

        HierarchyCode3: '',

        IntradayCreditLimit: '',

        InvoiceCreditLimit: '',

        IsActive: 1,

        CustomerStatus: 1,

        IsBillable: 0,

        IsChild: 0,

        IsOutletOwnerFemale: 0,

        IsTaxable: 1,

        LicenseExpiryDate: '',

        LicenseExpiryDate1: '',

        LicenseExpiryDate2: '',

        LicenseNumber: '',

        LicenseNumber1: '',

        LicenseNumber2: '',

        LoyaltyPoints: '0',

        MarginPerc: '',

        MessageKey1: '',

        MessageKey2: '',

        MessageKey3: '',

        MessageKey4: '',

        Mobile: '',

        Notes: '',

        OfficeAccount: 0,

        OwnerName: '',

        OutletType: '',

        PANCardNumber: '',

        PaymentType: 0,

        Phone: '',

        RelatedParty: 0,

        ReturnPromotionkey: '',

        RouteKey: 0,

        RunRate: '',

        SalesGroupCode: '',

        SalesMode: 0,

        SalesPromotionKey: '',

        SevicedByOutlet: 0,

        ShipCity: '',

        ShipState: '',

        ShipZip: '',

        State: '',

        StateID: '',

        SurveyKey: '',

        TINNumber: '',

        TaxID: null,

        TaxNumber: '',

        TaxRegionCode: '',

        TaxType: 1,

        TCS_Status: 0,

        Telephone: '',

        TemplateID: '',

        TerritoryHierarchy: '',

        TotalDaysOfInvoices: '',

        TotalNumberofInvoices: '',

        TradeIDNumber: '',

        Website: '',

        Zip: '',

        cache: false

      },

      CustomerCategory: [],

      authorizedProductDropDownValues: [],

      pricingDropDownValues: [],

      taxRegionDropDownValues: [],

      divisionDataDropDownValues: [],

      commonMasterDataMsg: [],

      customerDataMessageKey: [],

      outletMessageKey1: [],

      outletMessageKey2: [],

      outletMessageKey3: [],

      outletMessageKey4: [],

      hrchyCode: '',

      hrchyCode1: '',

      hrchyCode2: '',

      hrchyCode3: '',

      hierarchyfilter: false,

      hierarchyfilter1: false,

      hierarchyfilter2: false,

      hierarchyfilter3: false,

      checkedNodes: [],

      checkedNodes1: [],

      checkedNodes2: [],

      checkedNodes3: []

    }

  },

  mounted() {

    if (this.outletId) {

      this.getOutletDetails()

    }

  },

  methods: {

    myFunction() {

      var input, filter, ul, li, div, span, i, txtValue

      input = document.getElementById('myInput')

      filter = input.value.toUpperCase()

      ul = document.getElementsByClassName('e-list-parent e-ul')

      li = ul[0].getElementsByTagName('li')

      div = li[0].getElementsByClassName('e-text-content e-icon-wrapper')

      console.log('div list-->', div)

      for (i = 0; i < div.length; i++) {

        span = div[i].getElementsByTagName('span')[0]

        txtValue = span.textContent || span.innerText

        if (txtValue.toUpperCase().indexOf(filter) > -1) {

          // span[i].style.display = "";

          // } else {

          // span[i].style.display = "none";

        }

      }

    },

    nodeChecking: function(args) {

      if (args.action === 'check' && args.isInteracted) {

        var tree = document.getElementById('treeview').ej2_instances[0]

        tree.uncheckAll(tree.checkedNodes)

      }

    },

    nodeCheckedFilter: function() {

      var treeObj = document.getElementById('treeview').ej2_instances[0]

      this.customerHierarchyForFilter.CustomerHierarchy.map(item => {

        if (item.ParentID == treeObj.checkedNodes) {

          this.hrchyCode = item.HierarchyName

          this.checkedNodes = treeObj.checkedNodes

          this.outletDataJson.HierarchyCode = treeObj.checkedNodes[0]

        }

      })

    },

    nodeCheckedFilter1() {

      var tree1Obj = document.getElementById('treeview').ej2_instances[0]

      this.customerHierarchyForFilter.CustomerHierarchy1.map(item => {

        if (item.ParentID == tree1Obj.checkedNodes) {

          this.hrchyCode1 = item.HierarchyName

          this.checkedNodes1 = tree1Obj.checkedNodes

          this.outletDataJson.HierarchyCode1 = tree1Obj.checkedNodes[0]

        }

      })

    },

    nodeCheckedFilter2() {

      var tree2Obj = document.getElementById('treeview').ej2_instances[0]

      this.customerHierarchyForFilter.CustomerHierarchy2.map(item => {

        if (item.ParentID == tree2Obj.checkedNodes) {

          this.hrchyCode2 = item.HierarchyName

          this.checkedNodes2 = tree2Obj.checkedNodes

          this.outletDataJson.HierarchyCode2 = tree2Obj.checkedNodes[0]

        }

      })

    },

    nodeCheckedFilter3() {

      var tree3Obj = document.getElementById('treeview').ej2_instances[0]

      this.customerHierarchyForFilter.CustomerHierarchy3.map(item => {

        if (item.ParentID == tree3Obj.checkedNodes) {

          this.hrchyCode3 = item.HierarchyName

          this.checkedNodes3 = tree3Obj.checkedNodes

          this.outletDataJson.HierarchyCode3 = tree3Obj.checkedNodes[0]

        }

      })

    },


    hierarchyDataSource(table) {

      var data = []

      if (table) {

        table.map(row => {

          if (row.HierarchyLevel == 1) {

            data.push({

              HierarchyCode: row.HierarchyCode,

              HierarchyID: row.HierarchyID,

              HierarchyName: row.HierarchyName,

              ParentID: row.ParentID,

              HierarchyLevel: row.HierarchyLevel

            })

          } else if (row.HierarchyLevel == 2) {

            if (data.length > 0) {

              if (!data[data.length - 1].subChild) data[data.length - 1].subChild = []


              data[data.length - 1].subChild.push({

                HierarchyCode: row.HierarchyCode,

                HierarchyID: row.HierarchyID,

                HierarchyName: row.HierarchyName,

                ParentID: row.ParentID,

                HierarchyLevel: row.HierarchyLevel

              })

            }

          } else {

            var obj = data[data.length - 1]

            if (obj != undefined) {

              for (var i = 1; i < row.HierarchyLevel; i++) {

                if (i != row.HierarchyLevel - 1) {

                  if (obj.subChild) {

                    obj = obj.subChild[obj.subChild.length - 1]

                  }

                } else {

                  if (obj.subChild) {

                    obj = obj.subChild

                  } else {

                    obj = obj.subChild = []

                  }

                }

              }

              obj.push({

                HierarchyCode: row.HierarchyCode,

                HierarchyID: row.HierarchyID,

                HierarchyName: row.HierarchyName,

                ParentID: row.ParentID,

                HierarchyLevel: row.HierarchyLevel

              })

            }

          }

        })

      }

      this.fields.dataSource = data

    },

    openHierarchyStructure(n) {

      if (n == 1) {

        this.hierarchyfilter1 = true

        this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy1)

      } else if (n == 2) {

        this.hierarchyfilter2 = true

        this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy2)

      } else if (n == 3) {

        this.hierarchyfilter3 = true

        this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy3)

      }

    },

    openHierarchyFilter() {

      this.hierarchyfilter = true

      this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy)

    },

    changeCheckBoxValue() {

      // check if checkbox is checked

      if (document.querySelector('#my-checkbox').checked) {

        // if checked

        this.outletDataJson.TCS_Status = 1

      } else {

        // if unchecked

        this.outletDataJson.TCS_Status = 0

      }

    },

    changeDataSource: function (data) {

      this.fields = {

        dataSource: data,

        id: 'ParentID',

        level: 'HierarchyLevel',

        code: 'HierarchyCode',

        parentID: 'HierarchyID',

        text: 'HierarchyName',

        child: 'subChild'

      };

    },

    searchNodes: function () {

      var maskObj = document.getElementById("maskObj").ej2_instances[0];

      var _text = maskObj.element.value;

      var predicats = [],

        _array = [],

        _filter = [];

      if (_text === "") {

        this.changeDataSource(this.fields.dataSource);

      } else {

        var predicate = new Predicate("name", "startswith", _text, true);

        var filteredList = new DataManager(this.fields.dataSource).executeLocal(

          new Query().where(predicate)

        );

        console.log(filteredList);

        for (var j = 0; j < filteredList.length; j++) {

          _filter.push(filteredList[j]["id"]);

          let filters = this.getFilterItems(filteredList[j], this.fields.dataSource);

          for (let i = 0; i < filters.length; i++) {

            if (_array.indexOf(filters[i]) === -1 && filters[i] != null) {

              _array.push(filters[i]);

              predicats.push(new Predicate("id", "equal", filters[i], false));

            }

          }

        }

        if (predicats.length === 0) {

          this.changeDataSource([]);

        } else {

          var query = new Query().where(Predicate.or(predicats));

          var newList = new DataManager(this.fields.dataSource).executeLocal(query);

          this.changeDataSource(newList);

          setTimeout(function () {

            var treeObj = document.getElementById("treeview").ej2_instances[0];

            treeObj.expandAll();

          }, 1000);

        }

      }

    },


    getFilterItems(fList, list) {

      var nodes = [];

      nodes.push(fList["id"]);

      var query2 = new Query().where("id", "equal", fList["pid"], false);

      var fList1 = new DataManager(list).executeLocal(query2);

      if (fList1.length !== 0) {

        let pNode = this.getFilterItems(fList1[0], list);

        for (let i = 0; i < pNode.length; i++) {

          if (nodes.indexOf(pNode[i]) === -1 && pNode[i] != null)

            nodes.push(pNode[i]);

        }

        return nodes;

      }

      return nodes;

    },

    validateRegex(e) {

      var keyCode = e.keyCode || e.which

      var regex = /(^-?0\.[0-9]*[1-9]+[0-9]*$)|(^-?[1-9]+[0-9]*((\.[0-9]*[1-9]+[0-9]*$)|(\.[0-9]+)))|(^-?[1-9]+[0-9]*$)|(^0$){1}/

      var isValid = regex.test(String.fromCharCode(keyCode))

      return isValid

    },

    openModal(n) {

      this.commonmasterData()

      this.commonmasterModelData(n)

      setTimeout(() => {

        this.$refs.commonmasterRef.openCommonMastermodal(this.commonMasterDataMsg, n)

      }, 500)

    },

    callCommonMasterdata(index) {

      this.commonmasterModelData(index)

      this.getCustomerMasterdata()

    },

    getCustomerMasterdata() {

      this.outletMessageKey1 = []

      this.outletMessageKey2 = []

      this.outletMessageKey3 = []

      this.outletMessageKey4 = []

      const client = api()

      client

        .get('customer', {

          params: {

            requesttype: 4,

            _: new Date().getTime()

          }

        })

        .then(response => {

          this.customerDataMessageKey = response.data.MessageKey

          if (this.customerDataMessageKey) {

            this.customerDataMessageKey.map(msg => {

              if (msg.MessageTypeCode == 1) {

                this.outletMessageKey1.push(msg)

              }


              if (msg.MessageTypeCode == 2) {

                this.outletMessageKey2.push(msg)

              }

              if (msg.MessageTypeCode == 3) {

                this.outletMessageKey3.push(msg)

              }

              if (msg.MessageTypeCode == 4) {

                this.outletMessageKey4.push(msg)

              }

            })

          }

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    },

    commonmasterData() {

      const client = api()

      client

        .get('commonmaster' + '/' + 8, {

          params: {

            _: new Date().getTime()

          }

        })

        .then(response => {

          console.log(response.data)

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    },

    commonmasterModelData(keyIndex) {

      const client = api()

      client

        .get('commonmaster' + '/' + keyIndex, {

          params: {

            _search: false,

            nd: new Date().getTime(),

            rows: 100,

            page: 1,

            sidx: 'Code',

            sord: 'asc',

            _: new Date().getTime(),

            requesttype: 0,

            BankID: ''

          }

        })

        .then(response => {

          this.commonMasterDataMsg = response.data.CommonMasterList

          this.$refs.commonmasterRef.updateTableData(response.data.CommonMasterList)

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    },


    changeOutletStatus() {

      this.$refs.orderStatusModal.openOutletStatusModal()

    },

    outletStatusChanged() {

      const client = api()

      let customerId = this.outletId

      console.log('while changing outlet status-->', this.outletId)

      client

        .put('customer' + '/' + customerId, this.outletDataJson)

        .then(response => {

          console.log(response.data)

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    },

    getOutletDetails() {

      const client = api()

      let customerId = this.outletId

      client

        .get('customer' + '/' + customerId, {

          params: {

            requesttype: 6,

            _: new Date().getTime()

          }

        })

        .then(response => {

          this.fetchOutletDetails(response.data.CustomerMaster[0])

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    },

    fetchOutletDetails(editJson) {

      let vm = this

      vm.outletDataJson.Address1 = editJson.Address1 ? editJson.Address1 : ''

      vm.outletDataJson.Address2 = editJson.Address2 ? editJson.Address2 : ''

      vm.outletDataJson.Address3 = editJson.Address3 ? editJson.Address3 : ''

      vm.outletDataJson.Address4 = editJson.Address4 ? editJson.Address4 : ''

      vm.outletDataJson.AllowCustomerCode = editJson.AllowCustomerCode ? editJson.AllowCustomerCode : '1'

      vm.outletDataJson.AlternateAddress1 = editJson.AlternateAddress1 ? editJson.AlternateAddress1 : ''

      vm.outletDataJson.AlternateAddress2 = editJson.AlternateAddress2 ? editJson.AlternateAddress2 : ''

      vm.outletDataJson.AlternateAddress3 = editJson.AlternateAddress3 ? editJson.AlternateAddress3 : ''

      vm.outletDataJson.AnniversaryDate = editJson.AnniversaryDate ? editJson.AnniversaryDate : ''

      vm.outletDataJson.AprovalStatus = editJson.AprovalStatus ? editJson.AprovalStatus : 0

      vm.outletDataJson.Attribute1 = editJson.Attribute1 ? editJson.Attribute1 : ''

      vm.outletDataJson.Attribute2 = editJson.Attribute2 ? editJson.Attribute2 : ''

      vm.outletDataJson.Attribute3 = editJson.Attribute3 ? editJson.Attribute3 : ''

      vm.outletDataJson.Attribute4 = editJson.Attribute4 ? editJson.Attribute4 : ''

      vm.outletDataJson.Attribute5 = editJson.Attribute5 ? editJson.Attribute5 : ''

      vm.outletDataJson.Attribute6 = editJson.Attribute6 ? editJson.Attribute6 : ''

      vm.outletDataJson.Attribute7 = editJson.Attribute7 ? editJson.Attribute7 : ''

      vm.outletDataJson.Attribute8 = editJson.Attribute8 ? editJson.Attribute8 : ''

      vm.outletDataJson.Attribute9 = editJson.Attribute9 ? editJson.Attribute9 : ''

      vm.outletDataJson.Attribute10 = editJson.Attribute10 ? editJson.Attribute10 : ''

      vm.outletDataJson.AuthorizedItemListKey = editJson.AuthorizedItemListKey ? editJson.AuthorizedItemListKey : ''

      vm.outletDataJson.AverageTurnOver = editJson.AverageTurnOver ? editJson.AverageTurnOver : ''

      vm.outletDataJson.BankID1 = editJson.BankID1 ? editJson.BankID1 : ''

      vm.outletDataJson.BankID2 = editJson.BankID2 ? editJson.BankID2 : ''

      vm.outletDataJson.BarcodeCheckDigit = editJson.BarcodeCheckDigit ? editJson.BarcodeCheckDigit : ''

      vm.outletDataJson.BillToCustomerByNameByName = editJson.BillToCustomerByNameByName ? editJson.BillToCustomer : ''

      vm.outletDataJson.Blocked = editJson.Blocked ? editJson.Blocked : 0

      vm.outletDataJson.BranchID1 = editJson.BranchID1 ? editJson.BranchID1 : ''

      vm.outletDataJson.BranchID2 = editJson.BranchID2 ? editJson.BranchID2 : ''

      vm.outletDataJson.COLLimit = editJson.COLLimit ? editJson.COLLimit : ''

      vm.outletDataJson.CSTNumber = editJson.CSTNumber ? editJson.CSTNumber : ''

      vm.outletDataJson.CalculatedAttribute1 = editJson.CalculatedAttribute1 ? editJson.CalculatedAttribute1 : ''

      vm.outletDataJson.CalculatedAttribute2 = editJson.CalculatedAttribute2 ? editJson.CalculatedAttribute2 : ''

      vm.outletDataJson.CalculatedAttribute3 = editJson.CalculatedAttribute3 ? editJson.CalculatedAttribute3 : ''

      vm.outletDataJson.CalculatedAttribute4 = editJson.CalculatedAttribute4 ? editJson.CalculatedAttribute4 : ''

      vm.outletDataJson.CalculatedAttribute5 = editJson.CalculatedAttribute5 ? editJson.CalculatedAttribute5 : ''

      vm.outletDataJson.CalculatedAttribute6 = editJson.CalculatedAttribute6 ? editJson.CalculatedAttribute6 : ''

      vm.outletDataJson.CalculatedAttribute7 = editJson.CalculatedAttribute7 ? editJson.CalculatedAttribute7 : ''

      vm.outletDataJson.CalculatedAttribute8 = editJson.CalculatedAttribute8 ? editJson.CalculatedAttribute8 : ''

      vm.outletDataJson.CalculatedAttribute9 = editJson.CalculatedAttribute9 ? editJson.CalculatedAttribute9 : ''

      vm.outletDataJson.CalculatedAttribute10 = editJson.CalculatedAttribute10 ? editJson.CalculatedAttribute10 : ''

      vm.outletDataJson.CashDiscountPerc = editJson.CashDiscountPerc ? editJson.CashDiscountPerc : ''

      vm.outletDataJson.CategoryCode1 = editJson.CategoryCode1 ? editJson.CategoryCode1 : ''

      vm.outletDataJson.CategoryCode2 = editJson.CategoryCode2 ? editJson.CategoryCode2 : ''

      vm.outletDataJson.CategoryCode3 = editJson.CategoryCode3 ? editJson.CategoryCode3 : ''

      vm.outletDataJson.CategoryCode4 = editJson.CategoryCode4 ? editJson.CategoryCode4 : ''

      vm.outletDataJson.CategoryCode5 = editJson.CategoryCode5 ? editJson.CategoryCode5 : ''

      vm.outletDataJson.CategoryCode6 = editJson.CategoryCode6 ? editJson.CategoryCode6 : ''

      vm.outletDataJson.CategoryCode7 = editJson.CategoryCode7 ? editJson.CategoryCode7 : ''

      vm.outletDataJson.CategoryCode8 = editJson.CategoryCode8 ? editJson.CategoryCode8 : ''

      vm.outletDataJson.CategoryCode9 = editJson.CategoryCode9 ? editJson.CategoryCode9 : ''

      vm.outletDataJson.CategoryCode10 = editJson.CategoryCode10 ? editJson.CategoryCode10 : ''

      vm.outletDataJson.City = editJson.City ? editJson.City : ''

      vm.outletDataJson.ContactPerson = editJson.ContactPerson ? editJson.ContactPerson : ''

      vm.outletDataJson.Coverage = editJson.Coverage ? editJson.Coverage : 'Bi-weekly'

      vm.outletDataJson.CreditLimit = editJson.CreditLimit ? editJson.CreditLimit : '0'

      vm.outletDataJson.CstID = editJson.CstID ? editJson.CstID : 0

      vm.outletDataJson.CustomerBalanceDue = editJson.CustomerBalanceDue ? editJson.CustomerBalanceDue : ''

      vm.outletDataJson.CustomerCode = editJson.CustomerCode ? editJson.CustomerCode : ''

      vm.outletDataJson.CustomerID = editJson.CustomerID ? editJson.CustomerID : 0

      vm.outletDataJson.CustomerName = editJson.CustomerName ? editJson.CustomerName : ''

      vm.outletDataJson.CustomerNameA = editJson.CustomerNameA ? editJson.CustomerNameA : ''

      vm.outletDataJson.CustomerPriceLevel = editJson.CustomerPriceLevel ? editJson.CustomerPriceLevel : ''

      vm.outletDataJson.CustomerPricingKey = editJson.CustomerPricingKey ? editJson.CustomerPricingKey : ''

      vm.outletDataJson.CustomerStatus = editJson.CustomerStatus ? editJson.CustomerStatus : 1

      vm.outletDataJson.DateofBirth = editJson.DateofBirth ? editJson.DateofBirth : ''

      vm.outletDataJson.DateofRegistration = editJson.DateofRegistration ? editJson.DateofRegistration : ''

      vm.outletDataJson.DayOff = editJson.DateofRegistration ? editJson.DateofRegistration : 'SUNDAY'

      vm.outletDataJson.DepositAmount = editJson.DepositAmount ? editJson.DepositAmount : ''

      vm.outletDataJson.DivisionID = editJson.DivisionID ? editJson.DivisionID : 9

      vm.outletDataJson.Email = editJson.Email ? editJson.Email : ''

      vm.outletDataJson.EnableOMS = editJson.EnableOMS ? editJson.EnableOMS : 0

      vm.outletDataJson.Fax = editJson.Fax ? editJson.Fax : ''

      vm.outletDataJson.GSTNumber = editJson.GSTNumber ? editJson.GSTNumber : ''

      editJson.GSTRegistrationType = editJson.GSTRegistrationType ? editJson.GSTRegistrationType.toString() : ''

      vm.outletDataJson.GSTRegistrationType = editJson.GSTRegistrationType ? editJson.GSTRegistrationType : ""

      vm.outletDataJson.GeoCodeX = editJson.GeoCodeX ? editJson.GeoCodeX : '0'

      vm.outletDataJson.GeoCodeY = editJson.GeoCodeY ? editJson.GeoCodeY : '0'

      vm.outletDataJson.HierarchyCode = editJson.HierarchyCode ? editJson.HierarchyCode : ''

      vm.outletDataJson.HierarchyCode1 = editJson.HierarchyCode1 ? editJson.HierarchyCode1 : ''

      vm.outletDataJson.HierarchyCode2 = editJson.HierarchyCode2 ? editJson.HierarchyCode2 : ''

      vm.outletDataJson.HierarchyCode3 = editJson.HierarchyCode3 ? editJson.HierarchyCode3 : ''

      vm.checkedNodes[0] = editJson.HierarchyCode ? editJson.HierarchyCode : ''

      vm.checkedNodes1[0] = editJson.HierarchyCode1 ? editJson.HierarchyCode1 : ''

      vm.checkedNodes2[0] = editJson.HierarchyCode2 ? editJson.HierarchyCode2 : ''

      vm.checkedNodes3[0] = editJson.HierarchyCode3 ? editJson.HierarchyCode3 : ''

      vm.hrchyCode = editJson.OutletHierarchyName ? editJson.OutletHierarchyName: ''

      vm.hrchyCode1 = editJson.HierarchyCode1Name ? editJson.HierarchyCode1Name: ''

      vm.hrchyCode2 = editJson.HierarchyCode2Name ? editJson.HierarchyCode2Name: ''

      vm.hrchyCode3 = editJson.HierarchyCode3Name ? editJson.HierarchyCode3Name: ''

      vm.outletDataJson.IntradayCreditLimit = editJson.IntradayCreditLimit ? editJson.IntradayCreditLimit : ''

      vm.outletDataJson.InvoiceCreditLimit = editJson.InvoiceCreditLimit ? editJson.InvoiceCreditLimit : ''

      vm.outletDataJson.IsActive = editJson.IsActive ? editJson.IsActive : 1

      vm.outletDataJson.IsBillable = editJson.IsBillable ? editJson.IsBillable : 0

      vm.outletDataJson.IsChild = editJson.IsChild ? editJson.IsChild : 0

      vm.outletDataJson.IsOutletOwnerFemale = editJson.IsOutletOwnerFemaleIsOutletOwnerFemale ? editJson.IsChild : 0

      vm.outletDataJson.IsTaxable = editJson.IsTaxable ? editJson.IsTaxable : 1

      vm.outletDataJson.LicenseExpiryDate = editJson.LicenseExpiryDate ? editJson.LicenseExpiryDate : ''

      vm.outletDataJson.LicenseExpiryDate1 = editJson.LicenseExpiryDate1 ? editJson.LicenseExpiryDate1 : ''

      vm.outletDataJson.LicenseExpiryDate2 = editJson.LicenseExpiryDate2 ? editJson.LicenseExpiryDate2 : ''

      vm.outletDataJson.LicenseNumber = editJson.LicenseNumber ? editJson.LicenseNumber : ''

      vm.outletDataJson.LicenseNumber1 = editJson.LicenseNumber1 ? editJson.LicenseNumber1 : ''

      vm.outletDataJson.LicenseNumber2 = editJson.LicenseNumber2 ? editJson.LicenseNumber2 : ''

      vm.outletDataJson.LoyaltyPoints = editJson.LoyaltyPoints ? editJson.LoyaltyPoints : '0'

      vm.outletDataJson.MarginPerc = editJson.MarginPerc ? editJson.MarginPerc : ''

      vm.outletDataJson.MessageKey1 = editJson.MessageKey1 ? editJson.MessageKey1 : ''

      vm.outletDataJson.MessageKey2 = editJson.MessageKey2 ? editJson.MessageKey2 : ''

      vm.outletDataJson.MessageKey3 = editJson.MessageKey3 ? editJson.MessageKey3 : ''

      vm.outletDataJson.MessageKey4 = editJson.MessageKey4 ? editJson.MessageKey4 : ''

      vm.outletDataJson.Mobile = editJson.Mobile ? editJson.Mobile : ''

      vm.outletDataJson.Notes = editJson.Notes ? editJson.Notes : ''

      vm.outletDataJson.OfficeAccount = editJson.OfficeAccount ? editJson.OfficeAccount : 0

      vm.outletDataJson.OwnerName = editJson.OwnerName ? editJson.OwnerName : ''

      vm.outletDataJson.OutletType = editJson.OutletType ? editJson.OutletType : ''

      vm.outletDataJson.PANCardNumber = editJson.PANCardNumber ? editJson.PANCardNumber : ''

      vm.outletDataJson.PaymentType = editJson.PaymentType ? editJson.PaymentType : 0

      vm.outletDataJson.Phone = editJson.Phone ? editJson.Phone : ''

      vm.outletDataJson.RelatedParty = editJson.RelatedParty ? editJson.RelatedParty : 0

      vm.outletDataJson.ReturnPromotionkey = editJson.ReturnPromotionkey ? editJson.ReturnPromotionkey : ''

      vm.outletDataJson.RouteKey = editJson.RouteKey ? editJson.RouteKey : 0

      vm.outletDataJson.RunRate = editJson.RunRate ? editJson.RunRate : ''

      vm.outletDataJson.SalesGroupCode = editJson.SalesGroupCode ? editJson.SalesGroupCode : ''

      vm.outletDataJson.SalesMode = editJson.SalesMode ? editJson.SalesMode : 0

      vm.outletDataJson.SalesPromotionKey = editJson.SalesPromotionKey ? editJson.SalesPromotionKey : ''

      vm.outletDataJson.SevicedByOutlet = editJson.SevicedByOutlet ? editJson.SevicedByOutlet : 0

      vm.outletDataJson.ShipCity = editJson.ShipCity ? editJson.ShipCity : ''

      vm.outletDataJson.ShipState = editJson.ShipState ? editJson.ShipState : ''

      vm.outletDataJson.ShipZip = editJson.ShipZip ? editJson.ShipZip : ''

      vm.outletDataJson.State = editJson.State ? editJson.State : ''

      vm.outletDataJson.StateID = editJson.StateID ? editJson.StateID : ''

      vm.outletDataJson.SurveyKey = editJson.SurveyKey ? editJson.SurveyKey : ''

      vm.outletDataJson.TINNumber = editJson.TINNumber ? editJson.TINNumber : ''

      vm.outletDataJson.TaxID = editJson.TaxID ? editJson.TaxID : null

      vm.outletDataJson.TaxNumber = editJson.TaxNumber ? editJson.TaxNumber : ''

      vm.outletDataJson.TaxRegionCode = editJson.TaxRegionCode ? editJson.TaxRegionCode : ''

      vm.outletDataJson.TaxType = editJson.TaxType ? editJson.TaxType : 1

      vm.outletDataJson.Telephone = editJson.Telephone ? editJson.Telephone : ''

      vm.outletDataJson.TemplateID = editJson.TemplateID ? editJson.TemplateID : ''

      vm.outletDataJson.TCS_Status = editJson.TCS_Status ? editJson.TCS_Status : ''

      vm.outletDataJson.TerritoryHierarchy = editJson.TerritoryHierarchy ? editJson.TerritoryHierarchy : ''

      vm.outletDataJson.TotalDaysOfInvoices = editJson.TotalDaysOfInvoices ? editJson.TotalDaysOfInvoices : ''

      vm.outletDataJson.TotalNumberofInvoices = editJson.TotalNumberofInvoices ? editJson.TotalNumberofInvoices : ''

      vm.outletDataJson.TradeIDNumber = editJson.TradeIDNumber ? editJson.TradeIDNumber : ''

      vm.outletDataJson.Website = editJson.Website ? editJson.Website : ''

      vm.outletDataJson.Zip = editJson.Zip ? editJson.Zip : ''

      vm.outletDataJson.cache = editJson.cache ? editJson.cache : false

    },

    customCategoryOptions(value) {

      let customerCategoryType = []

      this.CustomerCategory.map(item => {

        if (item.CategoryType == value) {

          customerCategoryType.push(item)

        }

      })

      return customerCategoryType

    },

    fetchCustomerCode(resp) {

      if (resp) {

        this.outletDataJson.CustomerCode = resp.DocumentPrefix + resp.DocumentNumber

      }

    },

    // closeTab(x) {

    // for (let i = 0; i < this.tabs.length; i++) {

    // if (this.tabs[i] === x) {

    // this.tabs.splice(i, 1)

    // }

    // }

    // },

    cancelButton() {

      this.$emit('cancelOutletForm')

    },

    // newTab() {

    // this.tabs.push(this.tabCounter++)

    // },

    categoriesTabClicked() {

      this.outletlabels = this.pageConfigRes.UDFLabelList

    },

    enableInput(type) {

      if (

        this.pageConfigRes &&

        this.pageConfigRes.DataFieldPermissionList &&

        this.pageConfigRes.DataFieldPermissionList[type] != 'undefined'

      ) {

        if (this.pageConfigRes.DataFieldPermissionList[type] === "disabled='disabled'") {

          return { disabled: 'disabled' }

        } else {

          return ''

        }

      }

    },

    validateOutletFields() {

      if (this.outletDataJson.CustomerCode === '') {

        this.$bvToast.toast('CustomerCode is required field', {

          title: 'Validations',

          solid: true,

          toaster: 'b-toaster-top-center'

        })

        return false

      }

      if (this.outletDataJson.CustomerName === '') {

        this.$bvToast.toast('CustomerName is required field', {

          title: 'Validations',

          solid: true,

          toaster: 'b-toaster-top-center'

        })

        return false

      }

      if (this.outletDataJson.Address1 === '') {

        this.$bvToast.toast('CustomerAddress is required field', {

          title: 'Validations',

          solid: true,

          toaster: 'b-toaster-top-center'

        })

        return false

      }

      return true

    },

    saveCustomerOutlet() {

      let validate = this.validateOutletFields()

      if (!validate) {

        return

      }

      const client = api()

      if (this.outletId) {

        let customerId = this.outletId

        client

          .put('customer' + '/' + customerId, this.outletDataJson)

          .then(response => {

            this.$emit('closeEditTab', customerId)

            if (response.data) {

              this.$bvToast.toast('Record Updated Successfully', {

                title: 'Update',

                solid: true,

                toaster: 'b-toaster-top-center'

              })

            }

          })

          .catch(error => {

            console.error(error)

          })

          .finally(() => {

            console.log('executing finally!')

          })

      } else {

        if (this.outletDataJson.TCS_Status) {

          this.outletDataJson.TCS_Status = 1

        } else {

          this.outletDataJson.TCS_Status = 0

        }

        client

          .post('customer', this.outletDataJson)

          .then(response => {

            console.log('adding outlet response--->', JSON.stringify(response))

            if (response.data) {

              let event = {}

              event.data = this.outletDataJson

              this.$bvToast.toast('Record Update Successfully', {

                title: 'Update',

                solid: true,

                toaster: 'b-toaster-top-center'

              })

              this.cancelButton()

              event.data.CustomerID = response.data

              this.$emit('actionSelected', event)

              this.outletDataJson = event

            }

          })

          .catch(error => {

            console.error(error)

          })

          .finally(() => {

            console.log('executing finally!')

          })

      }

    },

    fetchCustorCategoryCodes() {

      const client = api()

      client

        .get('customer', {

          params: {

            requesttype: 2,

            _: new Date().getTime()

          }

        })

        .then(response => {

          this.CustomerCategory = response.data.CustomerCategory

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    },

    fetchdropDownValues() {

      const client = api()

      client

        .get('customer', {

          params: {

            requesttype: 3,

            _: new Date().getTime()

          }

        })

        .then(response => {

          this.authorizedProductDropDownValues = response.data.AuthorizedItemControlData.AuthorizedItemControl

          this.pricingDropDownValues = response.data.PricingControlData.PricingControl

          this.taxRegionDropDownValues = response.data.TaxRegionData.StateMaster

          this.divisionDataDropDownValues = response.data.DivisionData.DivisionList

        })

        .catch(error => {

          console.error(error)

        })

        .finally(() => {

          console.log('executing finally!')

        })

    }

  }

}

</script>

<style scoped>

.xj-form .label {

  text-align: initial;

}

.mainBasicTab {

  padding: 0px;

}

.iplusSquareClass {

  font-size: 18px;

  cursor: pointer;

  color: #ccc;

  float: left;

  padding: 2px 10px;

}

.ck-btn {

  border-radius: 3px;

  padding-right: 16px;

  padding-left: 16px;

  cursor: pointer;

  text-align: center;

  font-size: 9pt;

  height: 26px;

  font-weight: bold;

}

.blue-btn {

  background-color: #007bff;

  color: #ffffff;

  border: 1px solid #007bff;

}

.ck-btn-txt {

  background-color: transparent;

  padding-right: 10px;

  padding-left: 10px;

  cursor: pointer;

  text-align: center;

  font-size: 9pt;

  height: 30px;

  border: 0 !important;

  color: #2a80b9;

}

.redborder {

  border: 1px solid red;

}

.control_wrapper {

  display: block;

  max-width: 350px;

  max-height: 350px;

  margin: auto;

  overflow: auto;

  border: 1px solid #dddddd;

  border-radius: 3px;

}

.outlet-section label {

    font-size: small;

    color: #8a8a8a;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 125px;

    white-space: nowrap;

}

</style>


Package.json: 


{
  "name": "fuji",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@syncfusion/ej2-vue-calendars": "^19.3.53",
    "@syncfusion/ej2-vue-dropdowns": "^19.3.53",
    "@syncfusion/ej2-vue-grids": "^19.3.54",
    "@syncfusion/ej2-vue-inputs": "^19.3.53",
    "@syncfusion/ej2-vue-navigations": "^19.3.54",
    "@syncfusion/ej2-vue-treegrid": "^19.3.53",
    "axios": "^0.21.4",
    "bootstrap": "4.5.3",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.19.1",
    "font-awesome": "^4.7.0",
    "moment": "^2.29.1",
    "vue": "^2.6.14",
    "vue-autosuggest": "^2.2.0",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-good-table": "^2.21.11",
    "vue-i18n": "^8.26.7",
    "vue-loading-overlay": "^4.0.4",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/cli-plugin-eslint": "^4.5.15",
    "@vue/cli-service": "^4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}


Error am getting in the console while page loa





SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team December 3, 2021 02:40 PM UTC

Hi Punith, 
 
We have validated your reported problem using your shared code. But, we were unable to run it in our local sample as your code has external dependant codes. 
 
So, we request you to replicate  your reported problem in our last shared sample or share your complete project with dependencies(if possible). It would help us to validate your problem and to provide you the prompt solution. 
 
Regards, 
Shameer Ali Baig S. 



PB Punith B N December 10, 2021 07:18 AM UTC

Hi team,

As I am working on the requirement for filtering in TreeView. I used the same code provided by the syncfusion team.

For the above code Getting the console error, so providing a clear document to provide the solution in the below zip 

file.

So please provide the solution for the above requirement asap. It will help us a lot in the project

Thanks and Regards,

Punith BN



Attachment: Tree_view_Filtering_58c9eac9.zip


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team December 13, 2021 09:41 AM UTC

Hi Punith, 
  
Thanks for sharing the issue details. 
  
We have used your shared code in your application and try to replicate it. But, your reported problem in not reproducing to us as the TreeView’s filtering sample working without any issues. 
 
We have attached the sample with your shared code for your reference. If you still face the problem, then please revert by replicating your reported problem in the attached application. It would help us to provide you the prompt solution. 
 
 
Regards, 
Shameer Ali Baig S. 


Loader.
Up arrow icon