I am trying to add a splitbutton in a grid. Button width is not responsive. I am unable to set the button width in the grid.
Could you please let me know how to set it right.
I have attached the video of the screen.
Thank you .
field: "displayReference", headerText: "Reference", width: '180px', textAlign: 'left',
template: function () {
return {
template: vue.component('displayReferenceTempl',
{
template: ` <div>
<div class='row'>
<div class='col-sm-9'>{{displayRefText}}</div>
<div class='col-sm-3 text-center'>
<a v-if='externalSystemUrl && externalSystemUrl.length > 0' :rel='nofollow' href='externalSystemUrl' target='_blank'><i class='fas fa-external-link-alt'></i></a>
</div>
</div>
<!-- bootstrap Split button -->
<div class='row'>
<!-- Syncfusion Split button -->
<!-- Split button -->
<div class="col-sm-12">
<ejs-splitbutton style="width: 150px" v-if='actionItems && actionItems.length > 0'
:items="actionItems" :content="actionText"
v-on:click='onButtonClick($event)' v-on:beforeItemRender='onBeforeItemRender'
v-on:select='onSelect'>{{actionText}}
</ejs-splitbutton>
</div>
</div>
</div>
`,
data: function () {
return {
data: {},
actionItems: [],
actionText: 'test ',
selectedStateCode: null,
};
},
computed:{
displayRefText() {
return this.data.displayReference;
},
externalSystemUrl() {
return this.data.externalSystemUrl;
}
},
mounted() {
var thisComp = this;
// Build workitem actions split button/ddl
_.each(this.data.statusActions, function(item) {
thisComp.actionItems.push({ action:item.action, text:item.actionDisplayTitle });
});
// Determine primary action to display
var primaryAction = _.find(this.data.statusActions, function (item) {return item.isPrimary;});
if (primaryAction == null) {
primaryAction = this.data.statusActions[0]
}
this.actionText = primaryAction ? primaryAction.actionDisplayTitle : "Select";
},
methods: {
onButtonClick(args) {
var item = _.find(this.actionItems, function (item) { return item.text === args.element.textContent; });
bus.$emit(global.event.workItemActionClicked, { action: item.action, actionDisplayTitle: item.text, workitem: this.data });
},
onSelect: function (args) {
this.actionText = args.item.text;
},
onBeforeItemRender: function (args) {
}
}
})
};
}
