How to prevent syncfusion rowselected-event when clicking checkbox
Hi Team,
I am working on the data grid using syncfusion there am finding a difficulty, How to prevent syncfusion row selected-event when clicking the checkbox in the Vue js platform
Can u please help me with the above issue?
Thanks and regards,
Punith BN
SIGN IN To post a reply.
9 Replies
AG
Ajith Govarthan
Syncfusion Team
September 1, 2021 01:58 PM UTC
Hi Punith B N,
Thanks for contacting Syncfusion support.
Query: I am working on the data grid using syncfusion there am finding a difficulty, How to prevent syncfusion row selected-event when clicking the checkbox in the Vue js platform. Can u please help me with the above issue?
By default, in our EJ2 Grid, when you enable checkbox selection the rowSelecting and rowSelected events will be triggered when you select the checkboxes, which is the default behavior of our EJ2 Grid. So, before we proceed to your query, please share the below details to validate further on your requirement.
- Share the complete Grid code example.
- Please share the use case of preventing the rowSelected event when click the checkboxes.
- Share the screenshot or video demonstration of your requirement.
- Do you want to check and uncheck the checkboxes without selecting and deselecting the rows?
- Share the Syncfusion package version.
Regards,
Ajith G.
PB
Punith B N
October 14, 2021 10:12 AM UTC
- Shared the source code with the name Source code below
<template>
<b-overlay :show="isGridLoading" rounded="sm">
<filter-panel
@hideColumnFilter="hideColumnFilter"
@openColumnChooser="openColumnChooser"
@dateChangeParameter = "dateChangeParameter"
:selectedColumns="selectedColumns"
:columnsList="columnsList"
:tabIndex ="tabIndex"
></filter-panel>
<ejs-grid
ref="sales_order_grid"
id="sales_order_grid"
:allowFiltering="columnfilter"
:dataSource="
salesOrderListRes.SOHeaderList && salesOrderListRes.SOHeaderList.length > 0
? salesOrderListRes.SOHeaderList
: emptyArray
"
:allowResizing="true"
:allowSorting="true"
:allowReordering="true"
:showColumnChooser="true"
:dataBound="createdGrid"
:filterSettings="filterOptions"
:rowSelected="rowSelected"
@actionBegin="gridActionBegin($event)"
>
<e-columns>
<e-column type="checkbox" width="50"></e-column>
<e-column
v-if="tabIndex == 1 || tabIndex == 5"
field="DocumentStatus"
:headerText="$t('common.status')"
textAlign="left"
:template="statusTemplate"
:filterBarTemplate="sotemplateOptions"
:customAttributes="customAttributes"
:visible="documentstatus"
width="90"
maxWidth="100"
></e-column>
<e-column
v-if="tabIndex == 2 || tabIndex == 5"
field="DNReference"
:headerText="$t('soheader.deliverystatus')"
textAlign="left"
width="40"
maxWidth="100"
:customAttributes="customAttributes"
:template="DN1ReferenceTemplate"
:visible="dnreference"
></e-column>
<e-column
v-if="tabIndex == 1"
field="DNReference"
:headerText="$t('soheader.deliverystatus')"
textAlign="left"
width="40"
maxWidth="80"
:customAttributes="customAttributes"
:template="DNReferenceTemplate"
:visible="dnreference"
></e-column>
<e-column
v-if="tabIndex == 1 || tabIndex == 2 || tabIndex == 5"
field="PLReference"
:headerText="$t('soheader.pickliststatus')"
textAlign="left"
width="40"
maxWidth="80"
:customAttributes="customAttributes"
:template="PLReferenceTemplate"
:visible="plreference"
></e-column>
<e-column
v-if="tabIndex == 1 || tabIndex == 2 || tabIndex == 5"
field="SIReference"
:headerText="$t('soheader.salesinvoicestatus')"
textAlign="left"
:customAttributes="customAttributes"
:template="SIReferenceTemplate"
width="40"
maxWidth="80"
:visible="sireference"
></e-column>
<e-column
v-if="tabIndex == 1 || tabIndex == 2 || tabIndex == 5"
field="OrderDeliveryStatus"
:headerText="$t('common.deliverystatus')"
textAlign="left"
width="100"
maxWidth="150"
:customAttributes="customAttributes"
:template="deliveryStatusTemplate"
:filterBarTemplate="templateOptions"
:visible="orderdeliverstatus"
></e-column>
<e-column
field="DocumentNumber"
:headerText="$t('common.documentno')"
textAlign="left"
width="90"
maxWidth="150"
:customAttributes="customAttributes"
:template="documentNumber"
:visible="documentnumber"
></e-column>
<e-column
field="DocumentDate"
:headerText="$t('soheader.DocDate')"
textAlign="left"
width="90"
maxWidth="150"
:customAttributes="customAttributes"
:visible="documentdate"
></e-column>
<e-column
field="CustomerName"
:headerText="$t('poheader.OutletnameAddress')"
:template="customerNameAddress"
:customAttributes="customAttributes"
textAlign="left"
width="200"
maxWidth="300"
:visible="customername"
></e-column>
<e-column
field="IsSubDT"
:headerText="$t('soheader.isSubDT')"
width="90"
maxWidth="100"
textAlign="left"
:customAttributes="customAttributes"
:visible="issubdt"
></e-column>
<e-column
field="RouteName"
:customAttributes="customAttributes"
:headerText="$t('deliveryorders.RouteName')"
width="80"
maxWidth="100"
textAlign="left"
:visible="routename"
></e-column>
<e-column
field="SalesmanName"
:headerText="$t('common.salesman')"
width="80"
maxWidth="100"
textAlign="left"
:customAttributes="customAttributes"
:visible="salesmanname"
></e-column>
<e-column
field="TotalLines"
:headerText="$t('soheader.TotalLines')"
width="60"
maxWidth="100"
textAlign="left"
:customAttributes="customAttributes"
:visible="totallines"
></e-column>
<e-column
field="TotalQuantity"
:headerText="$t('common.qty')"
width="60"
maxWidth="100"
textAlign="left"
:customAttributes="customAttributes"
:visible="totalquantity"
></e-column>
<e-column
field="TotalPromotion"
:headerText="$t('common.discount')"
width="60"
maxWidth="100"
textAlign="left"
:template="discountTemplate"
:customAttributes="customAttributes"
:visible="totalpromotion"
></e-column>
<e-column
field="TotalTaxes"
:headerText="$t('common.tax')"
textAlign="left"
:template="taxTemplate"
:customAttributes="customAttributes"
width="80"
maxWidth="100"
:visible="totaltaxes"
></e-column>
<e-column
field="DocumentAmount"
:headerText="$t('soheader.amount')"
textAlign="left"
:template="amountTemplate"
:customAttributes="customAttributes"
width="130"
maxWidth="150"
:visible="documentamount"
></e-column>
<e-column
field="DeliveryInstructions"
:headerText="$t('siheader.delvinstrsalesdesc')"
textAlign="left"
:customAttributes="customAttributes"
width="160"
maxWidth="200"
:visible="deliveryinstructions"
></e-column>
</e-columns>
</ejs-grid>
<b-pagination
:value="pagingDetails.currentPage"
:total-rows="pagingDetails.rows"
:per-page="pagingDetails.perPage"
@change="onPageChange"
aria-controls="deliveryNoteGridPagination"
align="center"
></b-pagination>
<orderstatusmodal ref="changeStatusRef" @deleteSelectedGrid="deleteSelectedGrid"></orderstatusmodal>
</b-overlay>
</template>
<script>
import Vue from 'vue'
import api from '../service'
import orderstatusmodal from '@/components/orderstatusModal.vue'
import filterPanel from '@/components/filter-panel.vue'
Vue.prototype.$eventHub = new Vue()
import {
GridPlugin,
Edit,
DetailRow,
Sort,
ColumnChooser,
Page,
Resize,
Filter,
Reorder
} from '@syncfusion/ej2-vue-grids'
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns'
import { mapGetters } from 'vuex'
Vue.use(GridPlugin)
Vue.use(DropDownListPlugin)
export default {
name: 'sales-order-grid',
props: ['tabIndex', 'saleOrderListReqBody'],
components: {
orderstatusmodal,
'filter-panel': filterPanel
},
computed: {
...mapGetters(['getStartDate', 'getEndDate', 'getRefreshValue', 'getFilterValue'])
},
data() {
let vm = this
return {
customAttributes: { class: 'customcss' },
// salesOrderReqBody: {},
salesOrderListRes: [],
// toolbar: ['ColumnChooser'],
pagingDetails: {
perPage: 0,
rows: 0,
currentPage: 1,
records: 0
},
documentstatus: true,
dnreference: true,
plreference: true,
sireference: true,
orderdeliverstatus: true,
documentnumber: true,
documentdate: true,
customername: true,
issubdt: true,
routename: true,
salesmanname: true,
totallines: true,
totalquantity: true,
totalpromotion: true,
totaltaxes: true,
documentamount: true,
deliveryinstructions: true,
// columnNames: [],
columnsList: [],
selectedColumns:[],
isGridLoading: false,
filterOptions: {
ignoreAccent: true,
mode: 'Immediate'
},
columnfilter: true,
emptyArray: [],
templateOptions: {
create: function() {
let dd = document.createElement('select')
dd.id = 'OrderDeliveryStatus'
let dataSource = [
{
text: '',
value: ''
},
{
text: 'Partial delivered',
value: '2'
},
{
text: 'No Delivery',
value: '0'
},
{
text: 'Fully delivered',
value: '3'
},
{
text: 'In Progress',
value: '1'
}
]
for (let i = 0; i < dataSource.length; i++) {
let option = document.createElement('option')
option.value = dataSource[i].value
option.innerHTML = dataSource[i].text
dd.appendChild(option)
}
return dd
},
write: function(args) {
args.element.addEventListener('input', args => {
if (args.currentTarget.value !== 'All') {
let value = +args.currentTarget.value
vm.$refs.sales_order_grid.filterByColumn(args.currentTarget.id, 'equal', value)
} else {
vm.$refs.sales_order_grid.removeFilteredColsByField(args.currentTarget.id)
}
})
}
},
sotemplateOptions: {
create: function() {
let dd = document.createElement('select')
dd.id = 'DocumentStatus'
let dataSource = [
{
text: '',
value: ''
},
{
text: 'Void',
value: '2'
},
{
text: 'Draft',
value: '0'
},
{
text: 'Closed',
value: '3'
},
{
text: 'Posted',
value: '1'
}
]
for (let i = 0; i < dataSource.length; i++) {
let option = document.createElement('option')
option.value = dataSource[i].value
option.innerHTML = dataSource[i].text
dd.appendChild(option)
}
return dd
},
write: function(args) {
args.element.addEventListener('input', args => {
if (args.currentTarget.value !== 'All') {
let value = +args.currentTarget.value
vm.$refs.sales_order_grid.filterByColumn(args.currentTarget.id, 'equal', value)
} else {
vm.$refs.sales_order_grid.removeFilteredColsByField(args.currentTarget.id)
}
})
}
},
customerNameAddress: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<p class="m-0" style="font-weight:bold;overflow:hidden;text-overflow: ellipsis;width:180px;white-space:nowrap;" :title="data.CustomerName">{{data.CustomerName}}</p>
<p class="m-0" style="overflow:hidden;text-overflow: ellipsis;width:180px;white-space:nowrap;" :title="data.DeliveryAddress">{{data.DeliveryAddress}}</p>
</span>`
})
}
},
statusTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `
<p style="margin-top: 0.5rem;margin-bottom: 0.5rem;">
<span class="badge badge-pill badge-success px-3" v-if="data.DocumentStatus === 1">Posted</span>
<span class="badge badge-pill badge-danger px-3" v-else-if="data.DocumentStatus === 2">Void</span>
<span class="badge badge-pill badge-close px-3" v-else-if="data.DocumentStatus === 3">Closed</span>
<span class="badge badge-pill badge-warning px-3" v-else-if="data.DocumentStatus === 0">Draft</span>
</p>
`
})
}
},
taxTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<p class="m-0" style="font-size:12px;">{{ data.TotalTaxes | currency}}</p>
</span>`
})
}
},
discountTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<p class="m-0" style="font-size:12px;">{{ data.TotalPromotion | currency }}</p>
</span>`
})
}
},
amountTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span style="display:inline-flex;">
<p style="width:70px;" class="m-0">{{ data.DocumentAmount | currency}}</p>
<p style="width:20px;" v-if="data.DocumentStatus === 0" title='Click to delete the row' class="crossmark m-0" @click.stop="deleteGridRecord(data.InternalDocumentNo)">✕ </p>
</span>`,
methods: {
deleteGridRecord(data) {
this.$eventHub.$emit('rowGridClicked', data)
}
}
})
}
},
documentNumber() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<p class="m-0" v-b-popover.hover.bottomright.html="popoverConfig(data)" @mouseover="fetchDocumentData(data)">{{data.DocumentNumber}}</p>
</span>`,
data() {
return {
documentdata: {},
documentAmount: ''
}
},
methods: {
popoverConfig(data) {
return (
'<b-overlay :show="isGridLoading" rounded="sm">' +
'<div style="display:flex;">' +
'<div style="margin-right: 10px;border-right: 1px solid black;margin-bottom: 20px;width:50%;">' +
'<div class="pl-1 mr-2">' +
'<b>' +
'Salesman:' +
'</b>' +
(data.SalesmanName ? data.SalesmanName : '') +
'</div>' +
'<div class="pl-1 mr-2">' +
'<b>' +
'Warehouse:' +
'</b>' +
(data.WarehouseName ? data.WarehouseName : '') +
'</div>' +
'<div class="pl-1 mr-2">' +
'<b>' +
'Bill To Outlet:' +
'</b>' +
(data.BillToCustomer ? data.BillToCustomer : '') +
'</div>' +
'<div class="pl-1 mr-2">' +
'<b>' +
'Sales Descriptions:' +
'</b>' +
(data.SalesDescription ? data.SalesDescription : '') +
'</div>' +
'<div class="pl-1 mr-2">' +
'<b>' +
'Last Updated:' +
'</b>' +
'</div>' +
'</div>' +
'<div>' +
'<div class="pl-1">' +
'<b>' +
'Beat Name:' +
'</b>' +
(data.BeatName ? data.BeatName : '') +
'</div>' +
'<div class="pl-1">' +
'<b>' +
'Division:' +
'</b>' +
(data.DivisionDescription ? data.DivisionDescription : '') +
'</div>' +
'<div class="pl-1">' +
'<b>' +
'Currency:' +
'</b>' +
(data.CurrencyCode ? data.CurrencyCode : '') +
'</div>' +
'<div class="pl-1">' +
'<b>' +
'Scheduled Date:' +
'</b>' +
(data.DocumentDate ? data.DocumentDate : '') +
'</div>' +
'<div class="pl-1">' +
'Not Printed' +
'</div>' +
'</div>' +
'</div>' +
'<div style="float: left; height: 43%; width: 98%;" class="xj-add-new-jobs-container popup_class">' +
'<table id="saleslines" style="width:100%">' +
'<thead>' +
'<tr class="tooltipheader">' +
'<td style="width: 50%; padding-left:5px;color:#fff;border:0">' +
'Description' +
'</td>' +
'<td style="width: 100px;padding-left:5px;color:#fff;border:0">' +
'BaseUOM' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Stock' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Qty' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Booked' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Delivered' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Disc' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Tax' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Free' +
'</td>' +
'<td style="width: 150px;text-align:center;padding-left:5px;color:#fff;border:0">' +
'Amount' +
'</td>' +
'</tr>' +
'</thead>' +
'<tbody style="overflow-y:scroll;">' +
'<tr>' +
'<td style="width:50%;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.ItemDescription +
'</td>' +
'<td style="border:0;border-bottom:1px solid #ccc">' +
this.documentdata.BaseUOM +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.InventoryStock +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.SOItemQuantity +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.DeliveredQty +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.DeliveredQty +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.ItemTotalPromotion +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.ItemExciseTax +
'</td>' +
'<td style="text-align:center;border:0;border-bottom:1px solid #ccc">' +
this.documentdata.SDIsFreeGood +
'</td>' +
'<td style="text-align:right;border:0;border-bottom:1px solid #ccc">' +
this.documentAmount +
'</td>' +
'</table>' +
'</div>'
)
},
fetchDocumentData(data) {
this.isGridLoading = true
const client = api()
client
.get('soheader' + '/', {
params: {
InternalDocumentNo: data.InternalDocumentNo,
IsTooltip: 1,
_: new Date().getTime()
}
})
.then(response => {
this.isGridLoading = false
this.documentdata = response.data.SODetail[0]
this.documentAmount = response.data.SODetail[0].LineNetAmount.toFixed(2)
})
.catch(() => {
this.isGridLoading = false
console.log('Unable to search division')
})
// .finally(() => {})
}
}
})
}
},
DNReferenceTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<div v-html="mycomputedprop(data)"></div>
</span>`,
data() {
return {
tooltip: ''
}
},
methods: {
mycomputedprop(data) {
var statusString = '',
colour = '',
statusType = '',
achievedPercentage = 0
var tooltip = 'DN#: '
if (
data.DeliveredQuantity <= 0 &&
data.DNReference === undefined &&
data.PLReference === undefined &&
data.SIReference === undefined
) {
colour = 'status icon cancelled'
statusType = 'F'
tooltip = 'Processing DN failed due to ' + data.ValidationMessage
statusString =
'<div><u style="cursor:pointer;text-decoration: none;" title="' +
tooltip +
'">' +
'<span class="' +
colour +
'" style="text-align: center;line-height: 12px;">' +
statusType +
'</span></u></b>'
} else {
if (data.DNReference !== undefined) {
if (parseFloat(data.DeliveredQuantity) > parseFloat(data.TotalQuantity)) achievedPercentage = 100
else
achievedPercentage = (parseFloat(data.DeliveredQuantity) / parseFloat(data.TotalQuantity)) * 100
if (data.DNReference !== undefined) {
if (data.DNReference.split('_')[3] == 0) {
colour = 'status icon draft'
statusType = 'D'
tooltip +=
data.DNReference.split('_')[2] + ' in draft with ' + parseInt(achievedPercentage) + '%'
} else if (data.DNReference.split('_')[3] == 1) {
statusType = 'F'
colour = 'status icon finalised'
tooltip +=
data.DNReference.split('_')[2] + ' in finalized with ' + parseInt(achievedPercentage) + '%'
} else if (
data.DNReference.split('_')[3] == 2 &&
data.DocumentStatus == 1 &&
data.IsValidated == 0
) {
statusType = 'F'
colour = 'status icon cancelled'
tooltip = 'Processing DN failed due to ' + data.ValidationMessage
} else if (data.DNReference.split('_')[3] == 2) {
colour = 'status icon cancelled'
statusType = 'V'
tooltip = 'Delivery note Cancelled'
} else if (data.DNReference.split('_')[3] == 3) {
colour = 'status icon loaded'
statusType = 'L'
tooltip +=
data.DNReference.split('_')[2] + ' in loaded with ' + parseInt(achievedPercentage) + '%'
} else if (data.DNReference.split('_')[3] == 4) {
colour = 'status icon hold'
statusType = 'H'
tooltip +=
data.DNReference.split('_')[2] + ' in Onhold with ' + parseInt(achievedPercentage) + '%'
} else if (data.DNReference !== undefined && data.DeliveredQuantity > 0) {
if (data.DeliveredQuantity > 0 && data.DeliveredQuantity < data.TotalQuantity) {
colour = 'status icon finalised'
statusType = 'P'
tooltip = ''
}
}
statusString =
'<div><u style="cursor:pointer;text-decoration: none;" id = "dndocnumber_' +
data.DNReference +
'" title="' +
tooltip +
'">' +
'<span class="' +
colour +
'" style="text-align: center;line-height: 12px;">' +
statusType +
'</span></u></div>'
}
}
}
return statusString
}
}
})
}
},
DN1ReferenceTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<div v-html="mycomputedprop(data)"></div>
</span>`,
data() {
return {
tooltip: ''
}
},
methods: {
mycomputedprop(data) {
var statusString = '',
colour = '',
statusType = '',
achievedPercentage = 0
var tooltip = 'DN#: '
if (data.DNReference !== undefined) {
if (parseFloat(data.DeliveredQuantity) > parseFloat(data.TotalQuantity)) achievedPercentage = 100
else achievedPercentage = (parseFloat(data.DeliveredQuantity) / parseFloat(data.TotalQuantity)) * 100
if (data.DNReference !== undefined) {
if (data.DNReference.split('_')[3] == 0) {
colour = 'status icon draft'
statusType = 'D'
tooltip += data.DNReference.split('_')[2] + ' in draft with ' + parseInt(achievedPercentage) + '%'
} else if (data.DNReference.split('_')[3] == 1) {
statusType = 'F'
colour = 'status icon finalised'
tooltip +=
data.DNReference.split('_')[2] + ' in finalized with ' + parseInt(achievedPercentage) + '%'
} else if (
data.DNReference.split('_')[3] == 2 &&
data.DocumentStatus == 1 &&
data.IsValidated == 0
) {
statusType = 'F'
colour = 'status icon cancelled'
tooltip = 'Processing DN failed due to ' + data.ValidationMessage
} else if (data.DNReference.split('_')[3] == 2) {
colour = 'status icon cancelled'
statusType = 'V'
tooltip = 'Delivery note Cancelled'
} else if (data.DNReference.split('_')[3] == 3) {
colour = 'status icon loaded'
statusType = 'L'
tooltip +=
data.DNReference.split('_')[2] + ' in loaded with ' + parseInt(achievedPercentage) + '%'
} else if (data.DNReference.split('_')[3] == 4) {
colour = 'status icon hold'
statusType = 'H'
tooltip +=
data.DNReference.split('_')[2] + ' in Onhold with ' + parseInt(achievedPercentage) + '%'
} else if (data.DNReference !== undefined && data.DeliveredQuantity > 0) {
if (data.DeliveredQuantity > 0 && data.DeliveredQuantity < data.TotalQuantity) {
colour = 'status icon finalised'
statusType = 'P'
tooltip = ''
}
}
statusString =
'<div><u style="cursor:pointer;text-decoration: none;" id = "dndocnumber_' +
data.DNReference +
'" title="' +
tooltip +
'">' +
'<span class="' +
colour +
'" style="text-align: center;line-height: 12px;">' +
statusType +
'</span></u></div>'
}
}
return statusString
}
}
// created() {
// this.$eventHub.$on('selectedIndex', e => {
// this.index = e
// console.log('I am from child component--->',this.index)
// })
// }
})
}
},
PLReferenceTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<div v-html="mycomputedprop(data)"></div>
</span>`,
data() {
return {}
},
methods: {
mycomputedprop(data) {
var statusString = '',
colour = '',
statusType = ''
var tooltip = ''
if (data.PLReference != undefined) {
tooltip = 'PL#: '
if (data.PLReference.split('_')[3] == '0') {
//draft
colour = 'status icon draft'
statusType = 'D'
tooltip += data.PLReference.split('_')[2] + ' in draft status'
} else if (data.PLReference.split('_')[3] == '2') {
//loaded-Out
colour = 'status icon loaded'
statusType = 'L'
tooltip += data.PLReference.split('_')[2] + ' in loaded-Out status'
} else if (data.PLReference.split('_')[3] == '3') {
//loaded-In
colour = 'status icon loaded'
statusType = 'L'
tooltip += data.PLReference.split('_')[2] + ' in loaded-In status'
} else if (data.PLReference.split('_')[3] == '4') {
//Start sync
colour = 'status icon loaded'
statusType = 'S'
tooltip += data.PLReference.split('_')[2] + ' in sync started status'
} else if (data.PLReference.split('_')[3] == '1') {
//finalized
colour = 'status icon finalised'
statusType = 'F'
tooltip += data.PLReference.split('_')[2] + ' in finalized status'
}
statusString =
'<div><u style="cursor:pointer;text-decoration: none;" id = "pidocnumber_' +
data.PLReference +
'" title="' +
tooltip +
'">' +
'<span class="' +
colour +
'" style="text-align: center;line-height: 12px;">' +
statusType +
'</span></u></div>'
return statusString
} else return ''
}
}
})
}
},
SIReferenceTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<div v-html="mycomputedprop(data)"></div>
</span>`,
data() {
return {}
},
methods: {
mycomputedprop(data) {
var statusString = '',
colour = '',
statusType = ''
var tooltip = 'SI#: '
if (data.SIReference != undefined) {
tooltip = 'created SI#: '
if (data.SIReference.split('_')[3] == '0') {
//draft
colour = 'status icon draft'
statusType = 'D'
tooltip += data.SIReference.split('_')[2] + ' in draft status'
} else if (data.SIReference.split('_')[3] == '2') {
//void
colour = 'status icon cancelled'
statusType = 'V'
tooltip += data.SIReference.split('_')[2] + ' in voided status'
} else if (data.SIReference.split('_')[3] == '1') {
//finalized
colour = 'status icon finalised'
statusType = 'F'
tooltip += data.SIReference.split('_')[2] + ' in finalized status'
} else if (data.SIReference.split('_')[3] == '3') {
//closed
colour = 'status icon closed'
statusType = 'C'
tooltip += data.SIReference.split('_')[2] + ' in closed status'
}
if (data.SIReference != null)
statusString =
'<div><u style="cursor:pointer;text-decoration: none;" id = "sidocnumber_' +
data.SIReference +
'" title="' +
tooltip +
'">' +
'<span class="' +
colour +
'" style="text-align: center;line-height: 12px;">' +
statusType +
'</span></u></div>'
}
return statusString
}
}
})
}
},
deliveryStatusTemplate: function() {
return {
template: Vue.component('columnTemplate', {
template: `<span>
<div v-html="mycomputedprop(data)"></div>
</span>`,
data: function() {
// ...
},
methods: {
mycomputedprop: function(data) {
var htmlString = '',
csscolor = '',
achievedPercentage = 0
if (data.OrderDeliveryStatus == 0)
htmlString =
"<div class='progress-bar'><div class='progress-fill' ></div><div class='progress-fill-text' + '></div></div>"
else {
if (parseFloat(data.DeliveredQuantity) > parseFloat(data.TotalQuantity)) achievedPercentage = 100
else achievedPercentage = (parseFloat(data.DeliveredQuantity) / parseFloat(data.TotalQuantity)) * 100
if (data.DNReference !== undefined) {
var dnDocumentStatus = data.DNReference.split('_')[3]
var plDocumentStatus
if (data.PLReference != undefined) plDocumentStatus = data.PLReference.split('_')[3]
if (dnDocumentStatus == 0 && plDocumentStatus == null) csscolor = 'background-color:#FDD835'
// yellow
else if (dnDocumentStatus == 0 && plDocumentStatus == 0) csscolor = 'background-color:#aaa'
// green
else if (dnDocumentStatus == 1 && plDocumentStatus == 0) csscolor = 'background-color:#aaa'
else if (dnDocumentStatus == 1 && plDocumentStatus == 1) csscolor = 'background-color:#16A086'
// green
else if (dnDocumentStatus == 2) csscolor = 'background-color:#E42512'
// void
else if (dnDocumentStatus == 3) csscolor = 'background-color:#1E90FF'
// blue
else if (dnDocumentStatus == 4) csscolor = 'background-color:#d15402'
// red
else csscolor = 'background-color:#FDD835' // yellow
} else csscolor = 'background-color:#FDD835' // yellow
if (parseInt(achievedPercentage) > 0)
htmlString =
"<div class='progress-bar'><div class='progress-fill' style='width:" +
parseInt(achievedPercentage) +
'%;' +
csscolor +
"'></div><div class='progress-fill-text'>" +
parseInt(achievedPercentage) +
'%</div>'
else {
csscolor = ''
achievedPercentage = 0
htmlString =
"<div class='progress-bar'><div class='progress-fill' style='width:" +
parseInt(achievedPercentage) +
'%;' +
csscolor +
"'></div><div class='progress-fill-text'>" +
parseInt(achievedPercentage) +
'%</div>'
}
}
return htmlString
}
}
})
}
}
}
},
mounted() {
this.pagingDetails.currentPage = 1
this.fetchsalesOrderList()
// for bootstrap warning
const originalWarn = console.warn
const wrappedWarn = function() {
if (arguments[0] !== '[BootstrapVue warn]: popover - The provided target is no valid HTML element.') {
return originalWarn(...arguments)
}
}
console.warn = wrappedWarn
},
provide: {
grid: [DetailRow, Filter, Edit, Sort, ColumnChooser, Page, Resize, Reorder]
},
watch: {
saleOrderListReqBody() {
this.fetchsalesOrderList()
}
},
created() {
this.$eventHub.$on('rowGridClicked', e => {
if (this.$refs.changeStatusRef) {
this.$refs.changeStatusRef.deleteRowGrid(e)
}
})
},
updated: function() {},
methods: {
preventCheckboxEvent(event) {
event.preventDefault();
},
hideColumnFilter(value) {
if (value) {
this.columnfilter = false
} else {
this.columnfilter = true
}
},
openColumnChooser(columnsSelected) {
this.columnsList.forEach(colElement => {
if (columnsSelected.includes(colElement)) {
this.$refs.sales_order_grid.showColumns(colElement, 'field')
} else {
console.log('column not present', colElement)
this.$refs.sales_order_grid.hideColumns(colElement, 'field')
}
})
},
// openColumnChooser(data) {
// var names = data.map(function(v) {
// return v.toLowerCase()
// })
// console.log("selected column name",names)
// if(names.indexOf("documentnumber") < 0) {
// this.documentnumber = false
// } else {
// this.documentnumber = true
// }
// if(names.indexOf("documentstatus") < 0) {
// this.documentstatus = false
// } else {
// this.documentstatus = true
// }
// if(names.indexOf("plreference") < 0) {
// this.plreference = false
// } else {
// this.plreference = true
// }
// if(names.indexOf("dnreference") < 0) {
// this.dnreference = false
// }else {
// this.dnreference = true
// }
// if(names.indexOf("sireference") < 0) {
// this.sireference = false
// }else {
// this.sireference = true
// }
// if(names.indexOf("orderdeliverstatus") < 0) {
// this.orderdeliverstatus = false
// }else {
// this.orderdeliverstatus = true
// }
// if(names.indexOf("documentdate") < 0) {
// this.documentdate = false
// }else {
// this.documentdate = true
// }
// if(names.indexOf("customername") < 0) {
// this.customername = false
// }else {
// this.customername = true
// }
// if(names.indexOf("issubdt") < 0) {
// this.issubdt = false
// }else {
// this.issubdt = true
// }
// if(names.indexOf("routename") < 0) {
// this.routename = false
// }else {
// this.routename = true
// }
// if(names.indexOf("salesmanname") < 0) {
// this.salesmanname = false
// }else {
// this.salesmanname = true
// }
// if(names.indexOf("totallines") < 0) {
// this.totallines = false
// }else {
// this.totallines = true
// }
// if(names.indexOf("totalquantity") < 0) {
// this.totalquantity = false
// }else {
// this.totalquantity = true
// }
// if(names.indexOf("totalpromotion") < 0) {
// this.totalpromotion = false
// }else {
// this.totalpromotion = true
// }
// if(names.indexOf("totaltaxes") < 0) {
// this.totaltaxes = false
// }else {
// this.totaltaxes = true
// }
// if(names.indexOf("documentamount") < 0) {
// this.documentamount = false
// }else {
// this.documentamount = true
// }
// if(names.indexOf("deliveryinstructions") < 0) {
// this.deliveryinstructions = false
// }else {
// this.deliveryinstructions = true
// }
// },
deleteSelectedGrid(documentNo) {
const client = api()
client
.delete('soheader' + '/' + documentNo, this.outletDataJson)
.then(response => {
console.log('delete response--->', response)
this.refreshSalesOrder()
})
.catch(error => {
console.log(error)
})
},
refreshSalesOrder() {
const client = api()
client
.get('/soheader', {
params: {
_search: false,
nd: new Date().getTime(),
rows: 100,
page: 1,
sidx: 'InternalDocumentNo',
sord: 'desc',
_: new Date().getTime(),
FromDate: this.getStartDate,
ToDate: this.getEndDate,
DocumentStatus: 0,
TabID: this.getTabNames()
}
})
.then(response => {
this.$emit('resetHeadCount', true)
console.log(response.data)
})
.catch(error => {
console.log(error, 'Unable to get customer details')
this.showLoader = false
})
},
getTabNames() {
let val = ''
if (this.tabIndex == 0) {
val = 'postedpanel'
} else if (this.tabIndex == 1) {
val = 'inprogresspanel'
} else if (this.tabIndex == 2) {
val = 'closepanel'
} else if (this.tabIndex == 3) {
val = 'voidpanel'
} else if (this.tabIndex == 4) {
val = 'draftpanel'
} else {
val = 'allpanel'
}
return val
},
refreshSalesOrderPage() {
const client = api()
client
.get('/soheader', {
params: {
_search: false,
nd: new Date().getTime(),
rows: 100,
page: 1,
sidx: 'InternalDocumentNo',
sord: 'desc',
OutletHierarchy: '',
SEARCHVALUE: '',
outletCat1: '',
outletCat2: '',
productCat1: '',
productCat2: '',
DNStatus: '',
PLStatus: '',
SIStatus: '',
SalesOrderSource: '',
AllocatedSO: '',
_: new Date().getTime(),
FromDate: this.getStartDate,
ToDate: this.getEndDate,
OrderDeliveryStatus: 1,
TabID: this.getTabNames(),
}
})
.then(response => {
if (response.data) {
let refreshBtnValue = false
this.$store.commit('REFRESH_VALUE', refreshBtnValue)
}
})
.catch(error => {
console.log(error, 'Unable to search division')
})
},
rowSelected: function(args) {
console.log("args data-->",args)
this.$emit('salesOrderFrom', args.data)
},
dateChangeParameter(val) {
this.$emit('filterPanelDateValue',val)
},
createdGrid: function() {
// hide filters
let headerFilterEle = this.$refs.sales_order_grid.ej2Instances
.getHeaderTable()
.querySelectorAll('.e-filterbarcell div')
// fetch the column names
// let headerColumn = this.$refs.sales_order_grid.getColumns()
// let columnArray = []
// for (let h = 0; h < headerColumn.length; h++) {
// if (headerColumn[h].field != undefined && headerColumn[h].field !== '') {
// columnArray.push(headerColumn[h].field)
// }
// }
// this.columnNames = columnArray
// To get grid columns
let headerColumn = this.$refs.sales_order_grid.getColumns()
let columnArray = []
for (let h = 0; h < headerColumn.length; h++) {
if (headerColumn[h].field != undefined && headerColumn[h].field && headerColumn[h].visible) {
columnArray.push(headerColumn[h].field)
}
}
this.columnsList = columnArray
this.selectedColumns = JSON.parse(JSON.stringify(columnArray))
for (let i = 0; i < headerFilterEle.length; i++) {
if (this.tabIndex == 0 || this.tabIndex == 3 || this.tabIndex == 4) {
if (i == 0 || i == 2 || i == 4 || i == 5) {
headerFilterEle[i].style.display = 'block'
} else {
headerFilterEle[i].style.display = 'none'
}
}
if (this.tabIndex == 1) {
if (i == 5 || i == 7 || i == 10 || i == 9) {
headerFilterEle[i].style.display = 'block'
} else {
headerFilterEle[i].style.display = 'none'
}
} else if (this.tabIndex == 5) {
if (i == 0 || i == 4 || i == 5 || i == 7 || i == 10 || i == 9) {
headerFilterEle[i].style.display = 'block'
} else {
headerFilterEle[i].style.display = 'none'
}
}
if (this.tabIndex == 2) {
if (i == 3 || i == 4 || i == 6 || i == 8 || i == 9) {
headerFilterEle[i].style.display = 'block'
} else {
headerFilterEle[i].style.display = 'none'
}
}
}
},
// actionBegin: function(args) {
// if (args.requestType === 'save') {
// if (
// this.$refs.sales_order_grid.ej2Instances.pageSettings.currentPage !== 1 &&
// this.$refs.sales_order_grid.ej2Instances.editSettings.newRowPosition === 'Top'
// ) {
// args.index =
// this.$refs.sales_order_grid.ej2Instances.pageSettings.currentPage * this.$refs.sales_order_grid.ej2Instances.pageSettings.pageSize -
// this.$refs.sales_order_grid.ej2Instances.pageSettings.pageSize
// } else if (this.$refs.sales_order_grid.ej2Instances.editSettings.newRowPosition === 'Bottom') {
// args.index =
// this.$refs.sales_order_grid.ej2Instances.pageSettings.currentPage * this.$refs.grid.ej2Instances.pageSettings.pageSize -
// 1
// }
// }
// },
async fetchsalesOrderList() {
this.isGridLoading = true
this.salesOrderListRes = []
const client = api()
await client
.get('soheader', {
params: this.saleOrderListReqBody
})
.then(response => {
this.isGridLoading = false
if (response.data && response.data.SOHeaderList) {
this.salesOrderListRes = response.data
this.pagingDetails.currentPage = response.data.page ? +response.data.page : 1
this.pagingDetails.rows = response.data.records
this.pagingDetails.perPage = this.saleOrderListReqBody.rows
}
})
.catch(error => {
this.isGridLoading = false
console.log(error)
})
},
async salesOrderProcessName() {
const client = api()
await client
.get('soheader', {
params: {
ProcessName: 'FromSalesOrderListScreen',
_: new Date().getTime()
}
})
.then(response => {
console.log('salesOrderProcessName response.data----->', response.data)
})
.catch(error => {
console.log(error)
})
},
gridActionBegin(event) {
console.log(event, 'paging console')
if (event.requestType === 'paging') {
// this.onPageChange(event)
}
if (event.requestType === 'sorting') {
this.onSortChange(event)
}
if (event.requestType === 'filtering') {
// if (event.action === 'clearFilter') {
// this.onColumnFilter(event)
// } else {
this.onColumnFilter(event)
// }
}
},
onSortChange(params) {
console.log(params)
this.saleOrderListReqBody.sidx = params.columnName
this.saleOrderListReqBody.sord = params.direction === 'Ascending' ? 'asc' : 'desc'
this.saleOrderListReqBody.page = 1
this.fetchsalesOrderList()
},
onColumnFilter(params) {
if (
params.currentFilterObject.field !== '' &&
params.currentFilterObject.value !== '' &&
params.action !== 'clearFilter'
) {
this.saleOrderListReqBody._search = true
this.saleOrderListReqBody[params.currentFilterObject.field] = params.currentFilterObject.value
} else {
this.saleOrderListReqBody._search = false
delete this.saleOrderListReqBody[params.currentFilterObject.field]
}
this.saleOrderListReqBody.page = 1
this.fetchsalesOrderList()
},
onPageChange(event) {
this.pagingDetails.currentPage = event
this.saleOrderListReqBody.page = +this.pagingDetails.currentPage
this.fetchsalesOrderList()
}
}
}
</script>
<style>
@import url('../../node_modules/@syncfusion/ej2-vue-grids/styles/bootstrap.css');
.dnreference {
min-width: auto !important;
text-align: center !important;
line-height: 12px !important;
background-color: #1e90ff !important;
font-size: 12px !important;
background-size: 13px !important;
background-position: 95% center !important;
padding: 4px 8px 4px 6px !important;
border-radius: 0.1rem !important;
}
.sireference {
min-width: auto !important;
text-align: center !important;
line-height: 12px !important;
background-color: #66bb6a !important;
color: #ffffff !important;
font-size: 12px !important;
background-size: 13px !important;
background-position: 95% center !important;
padding: 4px 8px 4px 6px !important;
border-radius: 0.1rem !important;
}
.progress-fill-text {
color: #000;
position: relative;
left: 0;
width: 100%;
overflow: unset !important;
text-align: center;
line-height: 16px;
margin: 2px 0px 0px 0px;
}
.progress-bar {
width: 100%;
text-align: center;
position: relative;
background-color: #eee !important;
height: 24px;
line-height: 24px;
overflow: hidden;
}
.progress-fill {
color: #000;
width: 0%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
height: 24px;
margin: 1px 0px 0px 1px;
}
.e-filterbar {
background-color: #f7f8fd !important;
}
.e-grid .e-headercelldiv {
background-color: #f7f8fd;
font-size: 13px;
font-weight: 500;
color: #a3a6b4;
}
.crossmark {
font-size: 14px;
color: black;
font-weight: 700;
padding-left: 10px;
cursor: pointer;
}
.crossmark:hover {
color: red !important;
}
.tooltipheader {
background-color: #34495e;
background-repeat: repeat;
font-size: 12px;
color: #fff;
height: 30px;
font-weight: bold;
padding: 2px 0 0 4px;
overflow: auto;
}
.status {
width: 70px;
padding: 3px 6px 3px 6px;
height: 16px;
border-radius: 50%;
font-size: 9pt;
margin-top: 8px;
font-weight: 700;
}
.icon {
background-repeat: no-repeat;
background-size: 28px;
background-position: center;
}
.draft,
.nodelivery {
background-color: #ccc;
background-size: 14px;
background-position: 95% center;
color: #fff;
}
.nodelivery {
background-color: #e9ecef; /*#a9a9a9;*/
background-image: none;
margin: 12px 0 0 0;
height: 1rem;
}
.finalised {
background-color: #66bb6a;
background-size: 15px;
color: #fff;
background-position: 95% center;
}
.cancelled {
background-color: #f44336;
background-size: 11px;
background-position: 95% center;
color: #fff;
}
.closed {
background-color: #9acd32;
background-size: 13px;
background-position: 95% center;
color: #fff;
}
.loaded {
background-color: #1e90ff;
background-size: 13px;
background-position: 95% center;
color: #fff;
}
.loadedout {
background-color: #1e90ff;
background-size: 13px;
background-position: 95% center;
color: #fff;
}
.loadedin {
background-color: #83e5c0;
background-size: 13px;
background-position: 95% center;
color: #fff;
}
.hold {
background-color: #cccccc;
background-size: 13px;
background-position: 95% center;
}
.paddingTop {
padding:20px !important;
}
</style>
- In our application, we are opening the details page of the row with the click of a particular row in the data grid, by using an event called rowSelected event. ( please refer to the source code attached below)
- As I said I don't want to open the details page with the click of a checkbox, Checkbox click is only for select and unselect the rows in the data grid.
- Shared the video of the checkbox event action and row click event. (please refer to the record123.mp4)
- syncfusion version:
"@syncfusion/ej2-vue-grids": "*"
Attachment: record123_2326ab01.rar
AG
Ajith Govarthan
Syncfusion Team
October 15, 2021 01:28 PM UTC
Hi Punith,
Thanks for the update.
Based on your query you want to select the rows only with checkboxes and you want to open an external window when you click the rows. So, we have prepared sample in that we have used the rowSelecting event. Using the rowSelecting event, we have selected the rows only with checkbox based on the target element. For your convenience we have attached the sample please refer them for your reference.
Code Example:
|
App.vue
rowSelecting: function (args) {
var cell = parentsUntil(args.target, "e-gridchkbox", false);
if (cell) {
console.log("row selected"); // select the rows when target element is checkbox
} else {
args.cancel = true;
window.alert("external window opened"); // open your external dialog with data here
//
}
},
} |
Please get back to us if you need further assistance.
Regards,
Ajith G.
Hi Ajith Govardhan,
I used the above solution. My issue got resolved by the above code.
Thanks for the support
Thanks and Regards,
Punith BN
Hi team,
The above code perfectly working with the checkboxes but it is not working with the headercheckboxClick
please find the attached video below
can u please provide me the solution for headercheckboxClick it should not allow to go to the edit page
Thanks and regards,
Punith BN
Attachment: record15.40.27[18.10.2021]_10ff61d7.zip
BS
Balaji Sekar
Syncfusion Team
October 18, 2021 04:53 PM UTC
Hi Punith,
We happy to hear that issue has been resolved.
Based on your query we have achieved the external window open when click on row alone so, we can only select the Grid rows using checkbox/ header checkbox actions which is achieved in rowSelecting event.
In below code example, we have achieved the header checkbox click action perform like row checkbox behavior so, please refer the below code example and sample for more information.
|
rowSelecting: function (args) {
var cell = args.isHeaderCheckboxClicked
? args.isHeaderCheckboxClicked
: parentsUntil(args.target, "e-gridchkbox", false);
if (cell) {
console.log("row selected");
} else {
args.cancel = true;
window.alert("external window opened");
}
},
}, |
Please get back to us, if you need further assistance.
Regards,
Balaji Sekar.
PB
Punith B N
October 19, 2021 04:36 AM UTC
Hi Balaji Sekar,
I used the above solution. My issue got resolved by the above code.
Thanks very much for the support
Thanks and Regards,
Punith BN
PB
Punith B N
October 19, 2021 10:24 AM UTC
Hi Team,
Below code is used, but again another issue occurs...
The issue is the checkbox is selected and if we try to click the row event apart from the checkbox area. it has to redirect to the view details or edit page as shown in the video example, but the checkbox is deselecting instead of redirecting to another page. Please help with this issue
Thanks and regards,
Punith BN
please refer the video attached
rowSelected: function(args) {
var cell = args.isHeaderCheckboxClicked
? args.isHeaderCheckboxClicked
: parentsUntil(args.target, "e-gridchkbox", false);
if (cell) {
console.log("row selected");
} else {
args.cancel = true;
this.$emit('salesOrderFrom', args.data)
}
},
Attachment: record15.50.51[19.10.2021]_b71b2aaa.zip
AG
Ajith Govarthan
Syncfusion Team
October 20, 2021 01:14 PM UTC
Hi Punith B N,
Thanks for the update.
Based on your query, you are facing external window opening issue when click the selected rows in the Grid component. So, we have modified our previously attached sample and in that we have selected and deselected the rows only with the checkboxes by using the checkboxOnly property in the selectionSettings.
We have also opened the external windows using the recordClick event based on the target element. For your convenience we have attached the sample, please refer them for your reference.
Code Example:
|
App.vue
export default Vue.extend({
data: () => {
return {
data: gridData,
selectionSettings: { checkboxOnly: true },
pageSettings: { pageSize: 5 },
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Dialog",
},
};
},
methods: {
recordClick: function (args) {
if (!args.cell.classList.contains("e-gridchkbox"))
window.alert("external window opened");
},
}, |
Please get back to us if you need further assistance.
Regards,
Ajith G.
SIGN IN To post a reply.
- 9 Replies
- 3 Participants
-
PB Punith B N
- Aug 31, 2021 07:11 AM UTC
- Oct 20, 2021 01:14 PM UTC
