As i am working in the data grid, on click of a button the Modal will open with n of records in the data grid.
On intial rendering of the grid, depending upon some condition the records in the data grid has to be checked in the checkbox as shown in the video. (checkbox issue.mp4)
<ejs-grid
ref="loadoutmodal_Grid"
:dataSource="dataGrid"
:allowResizing="true"
:allowFiltering="columnfilter"
:dataBound="createdGrid"
:rowDataBound='rowDataBound'
:allowSorting="true"
:allowReordering="true"
:showColumnChooser="true"
:allowTextWrap="true"
:rowSelected="rowSelected"
:rowDeselected="rowDeselected"
:selectionSettings='selectionOptions'
:queryCellInfo="queryCellInfoEvent"
:filterSettings="filterOptions"
@actionBegin="gridActionBegin($event)"
>
<e-columns>
<e-column type="checkbox" width="50"></e-column>
<e-column
field="DocumentNumber"
:headerText="$t('deliveryorders.DocNo')"
textAlign="left"
width="100"
maxWidth="120"
:filter="filterOptions"
></e-column>
<e-column
field="Doctype"
:headerText="$t('picklist.picklistdoctype')"
textAlign="left"
width="100"
maxWidth="120"
:filter="filterOptions"
></e-column>
<e-column
field="DocumentDate"
:headerText="$t('picklist.DocDate')"
textAlign="left"
width="130"
maxWidth="180"
:template="formatDocumentDate"
:filter="filterOptions"
></e-column>
<e-column
field="CustomerName"
:headerText="$t('common.outlet')"
textAlign="left"
width="130"
maxWidth="180"
:filter="filterOptions"
></e-column>
<e-column
field="RouteName"
:headerText="$t('picklist.deliveryroute')"
textAlign="left"
width="100"
maxWidth="180"
:filter="filterOptions"
></e-column>
<e-column
field="SalesmanName"
:headerText="$t('common.salesman')"
textAlign="left"
width="100"
maxWidth="180"
:filter="filterOptions"
></e-column>
<e-column
field="TotalLines"
:headerText="$t('common.lines')"
textAlign="left"
width="120"
maxWidth="150"
:filter="filterOptions"
></e-column>
<e-column
field="DocumentAmount"
:headerText="$t('common.amount')"
textAlign="left"
width="90"
minWidth="120"
maxWidth="150"
:filter="filterOptions"
></e-column>
</e-columns>
</ejs-grid>
<b-pagination
v-model="pagingDetails.currentPage"
:total-rows="pagingDetails.rows"
:per-page="pagingDetails.perPage"
@change="onPageChange"
aria-controls="deliveryNoteGridPagination"
align="center"
></b-pagination>
</div>
</b-modal>
</div>
</b-overlay>
</template>
<script>
import Vue from 'vue'
import api from '../../service'
import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'
import { START_DATE } from '@/store/actions/user'
import { END_DATE } from '@/store/actions/user'
import Multiselect from 'vue-multiselect'
Vue.component('multiselect', Multiselect)
Vue.prototype.$eventHub = new Vue()
import {
GridPlugin,
Edit,
DetailRow,
Sort,
ColumnChooser,
Page,
Resize,
Filter,
Reorder,
CommandColumn,
} from '@syncfusion/ej2-vue-grids'
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns'
import moment from 'moment'
Vue.use(GridPlugin)
Vue.use(DropDownListPlugin)
export default {
name: 'load-out-modal',
data() {
return {
startDate: moment().startOf('month').format('YYYY-MM-DD'),
endDate: new Date().toISOString().split('T')[0],
value: [],
options: [],
waterMark: 'Select a Date Range',
formatStartDate: '',
formatEndDate: '',
dataGrid: [],
loadoutmodal_Grid_Loaded: false,
selectionOptions: { type: 'Mutliple', checkboxOnly: true },
documentCount: 0,
// emptyRecords: true,
picklistdocument: {},
filterOptions: {
ignoreAccent: true,
mode: 'Immediate',
operator: 'contains'
},
columnfilter: true,
pagingDetails: {
perPage: 0,
rows: 0,
currentPage: 1,
records: 0
},
editSettings: {
allowEditing: true,
allowAdding: true,
newRowPosition: 'Bottom'
},
showLoader: false,
pickListReqBody: {
_search: false,
nd: new Date().getTime(),
rows: 10,
page: 1,
sidx: 'DocumentNumber',
sord: 'desc',
_: new Date().getTime(),
FromPickList: true,
RouteFilter: '',
IsDisableWarehouseCheck: 0,
OutletRegistrationtype: ''
},
loadOutForm: {
PickHeader: [],
PickDetails: [],
RoundOffOptions:"4",
NetOffLimitValue:"1",
DecimalPlacesRule:2,
},
PickHeader: {
RouteType: null,
InternalDocumentNo: 0,
DocumentNumber: '',
DocumentDate: moment().format('DD MMMM YYYY'),
PickListDescription: '',
RouteNumber: null,
WarehouseID: null,
VEHICLEID: null,
DocumentStatus: 0,
IsVanCapErrorWarned: 0,
IsDisableWarehouseCheck: 0,
selDNIDs: '',
LastUpdateID: null,
},
formatDocumentDate: function () {
return {
template: Vue.component('columnTemplate', {
template: `<p class="m-0 pt-1">
<span>{{formatDate(data.DocumentDate)}}</span>
</p> `,
methods: {
formatDate(data) {
return moment(data).format('DD MMM YYYY')
}
}
})
}
},
selectedIndexesArray: [],
selectedDNs: [],
selIndex: [],
}
},
computed: {
...mapGetters(['getStartDate', 'getEndDate', 'getRefreshValue'])
},
props: ['formMode','currentIndex'],
watch: {
// update views(recall api calls) on date change
// getStartDate() {
// this.getPickListDocuments()
// },
// getEndDate() {
// this.getPickListDocuments()
// }
},
mounted() {
this.pagingDetails.currentPage = 1
},
methods: {
...mapActions([START_DATE, END_DATE]),
rowDataBound(args){
if(typeof this.selectedDNs == 'object'){
for (const [key0, value0] of Object.entries(this.selectedDNs)) {
for (const [key1, value1] of Object.entries(args.data)) {
if(value0 == value1) {
console.log('key0, key1',key0,key1)
this.selIndex.push(parseInt(args.row.getAttribute('aria-rowindex')))
}
}
}
}
},
createdGrid: function () {
let headerFilterEle = this.$refs.loadoutmodal_Grid.ej2Instances
.getHeaderTable()
.querySelectorAll('.e-filterbarcell div')
for (let i = 0; i < headerFilterEle.length; i++) {
if (i == 0) {
headerFilterEle[i].style.display = 'block'
} else {
headerFilterEle[i].style.display = 'none'
}
}
this.$refs.loadoutmodal_Grid.getDataModule().isQueryInvokedFromData = true;
if (this.selIndex.length) {
console.log('created grid console')
this.$refs.loadoutmodal_Grid.selectRows(this.selIndex)
this.selIndex = []
}
},
rowDeselected:function(args){
console.log('deselect called',args)
if(this.selectedIndexesArray.length > 0){
for(let i = 0 ; i < this.selectedIndexesArray.length; i++){
if(this.selectedIndexesArray[i]['DocumentNumber'] == args.data.DocumentNumber){
this.selectedIndexesArray.splice(i,1)
}
}
}
},
rowSelected: function (args) {
if(this.selectedIndexesArray.length > 0){
for(let i = 0 ; i < this.selectedIndexesArray.length; i++){
for(let j = 0 ; j < args.data.length; j++){
if(this.selectedIndexesArray[i]['DocumentNumber'] == args.data[j].DocumentNumber){
args.data.splice(j,1)
}
}
}
if(args.data.length > 0 || args.data.length == undefined){
this.selectedIndexesArray.push(args.data)
}
}
if(args.data && Object.keys(args.data).length > 0){
for(let i = 0 ; i < args.data.length; i++) {
this.selectedIndexesArray.push(args.data[i])
}
}
console.log('rowSelected => end', this.selectedIndexesArray)
},
