b2adminui 1.0.0

package/src/app/transaction-history/wallet-transaction-list/wallet-transaction-list.component.html

@@ -0,0 +1,530 @@
+<main>
+    <div class="ibox float-e-margins">
+        <div class="ibox-content p-md">
+            <div class="ibox-details">
+                <fieldset>
+                    <legend class="f-s-16">
+                        <b>Search</b>
+                    </legend>
+                    <form class="form-horizontal custom-form-horizontal" name="form" role="form" #f="ngForm" (ngSubmit)="f.form.valid && 
+                    walletTransactionSearchList.DateTo >= walletTransactionSearchList.DateFrom && validDateRange && 
+                        validCompanySelection && searchList(null, true)" novalidate>
+
+                        <div class="row">
+                            <div class="col-sm-6">
+                                <div class="form-group">
+                                    <label class="col-sm-5 control-label">Company Name
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-sm-6">
+                                        <kendo-dropdownlist *ngIf="!companyDisable" class="form-control" name="company" #company="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.CompanyUniqueId"
+                                            [disabled]="companyDisable" [filterable]="true" [data]="companyListData"
+                                            [textField]="'companyName'" [valueField]="'companyUniqueId'"
+                                            [defaultItem]="defaultCompanyItem"
+                                            (filterChange)="companySearchFilter($event)" [valuePrimitive]="true"
+                                            (valueChange)="validateCompanySelection()">
+                                        </kendo-dropdownlist>
+                                        <kendo-dropdownlist *ngIf="companyDisable" class="form-control" name="company"
+                                            [disabled]="companyDisable" 
+                                            [data]="companyListData" 
+                                            [filterable]="true" 
+                                            [textField]="'companyName'" 
+                                            [valueField]="'companyUniqueId'"
+                                            [defaultItem]="defaultCompanyItem"
+                                            [valuePrimitive]="true">
+                                        </kendo-dropdownlist>
+                                        <div class="message-error"
+                                            *ngIf="f.submitted && !validCompanySelection && !walletTransactionSearchList.CompanyUniqueId">
+                                            <span class='img-warning'></span>Please select a Company.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">Transaction ID
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="text" placeholder="Transaction ID" name="transactionId"
+                                            #transactionId="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.TransactionId"
+                                            (keypress)="common.onlyNumberKey($event,false)" maxlength="20"
+                                            pattern="^([0-9])*$" class="form-control" />
+                                        <div *ngIf="(f.submitted || transactionId.touched) && transactionId.errors && transactionId.errors.pattern"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Please enter correct Transaction ID
+                                            format.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-sm-5 control-label">Customer Name
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-sm-6">
+                                        <input type="text" class="form-control" placeholder="Customer Name"
+                                            name="customerName" [(ngModel)]="walletTransactionSearchList.CustomerName"
+                                            maxlength="201" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">Wallet ID
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input class="form-control" type="text" placeholder="Wallet ID" maxlength="20"
+                                            pattern="^([0-9])*$" name="walletId" #walletId="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.WalletId" />
+                                        <div *ngIf="(f.submitted || walletId.touched) && (walletId.errors && walletId.errors.pattern)"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Please enter correct Wallet ID format.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-sm-5 control-label">Mobile Number
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-sm-6">
+                                        <input type="text" pattern="^([0-9])*$" maxlength="15" class="form-control"
+                                            name="mobileNo" #mobileNo="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.MobileNo"
+                                            placeholder="Mobile Number">
+                                        <div *ngIf="walletTransactionSearchList.MobileNo && mobileNo.errors && mobileNo.errors.pattern"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Invalid Mobile Number.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-sm-6 control-label">Email Address
+                                        <span class="pull-right m-l-sm">:</span>
+                                    </label>
+                                    <div class="col-sm-6">
+                                        <input type="text" placeholder="Email Address" name="emailAddress"
+                                            #emailAddress="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.EmailAddress" class="form-control"
+                                            pattern="^\w+([\.-]?\w+[+0-9]?)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
+                                            maxlength="50" [title]="" />
+                                        <div *ngIf="walletTransactionSearchList.EmailAddress && (emailAddress.errors && emailAddress.errors.pattern)"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Please enter correct email address.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-sm-5 control-label">Transaction Type :</label>
+                                    <div class="col-sm-6">
+                                        <kendo-dropdownlist class="form-control" name="transactionTypeId"
+                                            #transactionTypeId="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.TransactionTypeId"
+                                            [filterable]="true" [data]="transactionTypeListData"
+                                            [textField]="'transactionType'" [valueField]="'transactionTypeId'"
+                                            [defaultItem]="defaultTxnTypeItem"
+                                            (filterChange)="txnTypeSearchFilter($event)" [valuePrimitive]="true">
+                                        </kendo-dropdownlist>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">Status
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <kendo-dropdownlist class="form-control" name="transactionStatusId"
+                                            #transactionStatusId="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.TransactionStatusId"
+                                            [filterable]="true" [data]="transactionStatusListData"
+                                            [textField]="'transactionStatus'" [valueField]="'transactionStatusId'"
+                                            [defaultItem]="defaultTxnStatusItem"
+                                            (filterChange)="txnStatusSearchFilter($event)" [valuePrimitive]="true">
+                                        </kendo-dropdownlist>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-sm-5 control-label">Merchant/Branch Name
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-sm-6">
+                                        <input type="text" name="fullName" placeholder="Merchant/Branch Name"
+                                            class="form-control" name="merchantName" placeholder="Merchant Name"
+                                            [(ngModel)]="walletTransactionSearchList.MerchantName" maxlength="201"
+                                            (keypress)="common.onlyAlphanumericAndThaiWithDotandHyphen($event,true)"
+                                            (paste)="common.validateAlphanumericAndThaiWithDotandHyphen($event,true)" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">Merchant/Branch ID
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="text" placeholder="Merchant/Branch ID" maxlength="20"
+                                            pattern="^([0-9])*$" name="merchantId" #merchantId="ngModel"
+                                            placeholder="Merchant Id"
+                                            [(ngModel)]="walletTransactionSearchList.MerchantId" class="form-control" />
+                                        <div *ngIf="(f.submitted || merchantId.touched) && (merchantId.errors && merchantId.errors.pattern)"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Please enter correct Merchant ID format.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-5 control-label">Trans Date From
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <datetime name="fromDates" [(ngModel)]="walletTransactionSearchList.DateFrom"
+                                            #fromDates="ngModel" (ngModelChange)="handleDateFromChange($event)"
+                                            [timepicker]="false" [datepicker]="common.datepickerFromOpts">
+                                        </datetime>
+                                        <div class="message-error"
+                                            *ngIf="f.submitted && !walletTransactionSearchList.DateFrom">
+                                            <span class='img-warning'></span>Please enter Trans Date From.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">To
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <datetime name="toDates" [(ngModel)]="walletTransactionSearchList.DateTo"
+                                            #toDates="ngModel" (ngModelChange)="handleDateToChange($event)"
+                                            [timepicker]="false" [datepicker]="common.datepickerToOpts">
+                                        </datetime>
+                                        <div class="message-error"
+                                            *ngIf="f.submitted && !walletTransactionSearchList.DateTo">
+                                            <span class='img-warning'></span>Please enter Trans Date To.
+                                        </div>
+                                        <div class="message-error"
+                                            *ngIf="f.submitted && walletTransactionSearchList.DateFrom > walletTransactionSearchList.DateTo">
+                                            <span class='img-warning'></span>Trans Date To should be greater than Trans
+                                            Date From.
+                                        </div>
+                                        <div class="message-error"
+                                            *ngIf="f.submitted && validDateRange === false && walletTransactionSearchList.DateTo >= walletTransactionSearchList.DateFrom">
+                                            <span class='img-warning'></span>Search interval can't be over
+                                            {{common.sharedService.appConfig.search_date_interval}} days.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-5 control-label">Approval code
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="text" maxlength="20" placeholder="Approval code"
+                                            class="form-control" name="approvalCode"
+                                            [(ngModel)]="walletTransactionSearchList.ApprovalCode"
+                                            (keypress)="common.onlyAlphanumeric($event)" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">System User Name
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="text" maxlength="101" placeholder="System User Name"
+                                            class="form-control" name="systemUserName"
+                                            [(ngModel)]="walletTransactionSearchList.SystemUserName"
+                                            (keypress)="common.onlyAlphanumericAndThai($event,true)" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-5 control-label">Channel Name
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="text" class="form-control" maxlength="255"
+                                            placeholder="Channel Name" name="topupChannelName"
+                                            #topupChannelName="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.TopupChannelName">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-6 control-label">System User Email
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="email" class="form-control" maxlength="50" placeholder="Email"
+                                            name="email" #email="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.SystemEmail"
+                                            pattern="^\w+([\.-]?\w+[+0-9]?)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
+                                        <div *ngIf="walletTransactionSearchList.SystemEmail && (email.errors && email.errors.pattern)"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Please enter correct email address.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label class="col-md-5 control-label">Credit Card Type
+                                        <span class="pull-right m-l-sm"> :</span>
+                                    </label>
+                                    <div class="col-md-6">
+                                        <input type="text" class="form-control" maxlength="20"
+                                            placeholder="Credit Card Type" name="topupCardType" #topupCardType="ngModel"
+                                            [(ngModel)]="walletTransactionSearchList.TopupCardType">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-sm-12 text-center">
+                                <button type="submit" class="btn m-r btn-primary">Search</button>
+                                <button type="button" (click)="clearInputFields()"
+                                    class="btn m-r btn-warning">Clear</button>
+                            </div>
+                        </div>
+                    </form>
+
+                    <div class="ibox-content m-t-sm p-md">
+                        <div class="row">
+                            <div class="col-xs-12 table-responsive border-none">
+                                <kendo-grid #grid="kendoGrid" [data]="gridView" class="table-content-center"
+                                    [pageSize]="apiSearchModel.PageSize" [skip]="apiSearchModel.Skip" [sortable]="false"
+                                    [pageable]="{buttonCount: 4, info: true, pageSizes: common.pageSizes,previousNext: true}"
+                                    (pageChange)="pageChange($event)" (excelExport)="onExcelExport($event)">
+                                    <ng-template kendoGridToolbarTemplate>
+                                        <button type="button"
+                                            class="pull-right k-button k-grid-excel btn-toggle btn-export"
+                                            (click)="common.togglePopup($event); exportToSelectedFiles(grid)">
+                                            <span class="k-icon k-i-file-excel m-r-sm btn-toggle"></span>Export
+                                        </button>
+                                        <div class="toggle-popup" tabindex="-1">
+                                            <ul id="export-popup"
+                                                class="k-group popup k-reset k-state-border-left custom-popup"
+                                                role="menu" data-role="popup">
+                                                <li class="k-item">
+                                                    <span class="k-link">
+                                                        <input type="checkbox" [(ngModel)]="common.toggleExcelFile"
+                                                            class="m-sm">to Excel (.xlsx)
+                                                    </span>
+                                                </li>
+                                                <li class="k-item">
+                                                    <span class="k-link">
+                                                        <input type="checkbox" [(ngModel)]="common.toggleCSVFile"
+                                                            class="m-sm">to
+                                                        CSV (.csv)
+                                                    </span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <button class="pull-right k-button k-grid-excel m-r-sm btn-toggle"
+                                            (click)="common.togglePopup($event)" type="button">
+                                            <i class="fa fa-list m-r-sm"></i>Fields
+                                        </button>
+                                        <div class="toggle-popup field-popup" tabindex="-1">
+                                            <ul id="field-popup"
+                                                class="custom-popup k-group popup k-reset k-state-border-left"
+                                                role="menu" data-role="popup">
+                                                <li class="k-item" *ngFor="let column of grid.columnList.columns">
+                                                    <span class="k-link"
+                                                        *ngIf="column?.field && column.title != '#' 
+                                                        && !(column?.field == 'CompanyName' && companyDisable) 
+                                                        && !(column?.field == 'Note' || column?.field == 'UserDefined1' || column?.field == 'UserDefined2' || 
+                                                        column?.field == 'UserDefined3' || column?.field == 'UserDefined4' || column?.field == 'UserDefined5')">
+                                                        <input type="checkbox" [id]="'chk'+column?.title"
+                                                            class="custom-checkbox" checked name="checkbox"
+                                                            value="value"
+                                                            (change)="common.hideColumn(column,$event.target)"
+                                                            [disabled]="common.isDisabled(column.hidden, grid?.columnList?.columns.toArray(),companyDisable)">
+                                                        <label [for]="'chk'+column?.title" class="font-normal">{{
+                                                            column.title }}</label>
+                                                    </span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </ng-template>
+
+                                    <kendo-grid-column class="text-center" field="Index" title="#" width="50">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column class="text-right" field="TransactionUniqueId" title="ID"
+                                        width="80">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="CompanyName" [hidden]="companyDisable"
+                                        title="Company Name" width="140">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="CustomerName" title="Customer Name" width="160">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column class="text-right" field="WalletId" title="Wallet Id"
+                                        width="160">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column class="text-right" field="MobileNo" title="Mobile Number"
+                                        width="120">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column class="text-center" field="TransactionDate"
+                                        title="Transaction Date" class="text-center" width="180">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="MerchantName" title="Merchant Name" width="160">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column class="text-right" field="MerchantId" title="Merchant ID"
+                                        width="100">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="Amount" title="Transaction Amount" class="text-right"
+                                        width="130">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="TransCurrency" title="Transaction Currency" width="130">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="FeeAmount" title="Fee Amount" class="text-right"
+                                        width="100">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="TopupCardType" title="Credit Card Type" width="100">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="ModifiedDate" title="Modified Date" class="text-center"
+                                        width="100">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="ApprovalCode" title="Approval Code" width="120">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="TopupChannelName" title="Channel Name" width="100">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="TransactionType" title="Transaction Type" width="120">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="TransactionStatus" title="Status" width="80">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="Note" title="NOTE" width="80" [hidden]="true">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="UserDefined1" title="User Defined 1" width="100"
+                                        [hidden]="true">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="UserDefined2" title="User Defined 2" width="100"
+                                        [hidden]="true">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="UserDefined3" title="User Defined 3" width="100"
+                                        [hidden]="true">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="UserDefined4" title="User Defined 4" width="100"
+                                        [hidden]="true">
+                                    </kendo-grid-column>
+                                    <kendo-grid-column field="UserDefined5" title="User Defined 5" width="100"
+                                        [hidden]="true">
+                                    </kendo-grid-column>
+
+                                    <!--View column-->
+                                    <kendo-grid-column title="View" width="60" class="text-center">
+                                        <ng-template kendoGridCellTemplate let-dataItem>
+                                            <a>
+                                                <i (click)="viewRights ? redirectToPage(['/wallet-transaction-view', dataItem.TransactionUniqueId]) : showPermissionError()"
+                                                    class="fa fa-external-link view-link"></i>
+                                            </a>
+                                        </ng-template>
+                                    </kendo-grid-column>
+
+                                    <kendo-grid-excel [fileName]="fileName+'.xlsx'" [fetchData]="exportAllData">
+                                        <kendo-excelexport-column field="Index" title="#">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TransactionUniqueId" title="ID">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="CompanyName" [hidden]="companyDisable"
+                                            title="Company Name">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="CustomerName" title="Customer Name">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="WalletId" title="Wallet Id">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="MobileNo" title="Mobile Number">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TransactionDate" title="Transaction Date">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="MerchantName" title="Merchant Name">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="MerchantId" title="Merchant ID">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="Amount" title="Transaction Amount">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TransCurrency" title="Transaction Currency">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="FeeAmount" title="Fee Amount">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TopupCardType" title="Credit Card Type">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="ModifiedDate" title="Modified Date">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="ApprovalCode" title="Approval Code">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TopupChannelName" title="Channel Name">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TransactionType" title="Transaction Type">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="TransactionStatus" title="Status">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="Note" title="NOTE">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="UserDefined1" title="User Defined 1">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="UserDefined2" title="User Defined 2">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="UserDefined3" title="User Defined 3">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="UserDefined4" title="User Defined 4">
+                                        </kendo-excelexport-column>
+                                        <kendo-excelexport-column field="UserDefined5" title="User Defined 5">
+                                        </kendo-excelexport-column>
+                                    </kendo-grid-excel>
+
+                                </kendo-grid>
+                            </div>
+                        </div>
+                    </div>
+                </fieldset>
+            </div>
+        </div>
+    </div>
+</main>