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

split button in Grids responsive

Hi there,

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 .

Kind regards

following is my column template code snippet

                        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>
                                                        <!-- 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'
                                        data: function () {
                                            return {
                                                data: {},
                                                actionItems: [],
                                                actionText: 'test ',
                                                selectedStateCode: null,
                                            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) {

Attachment: syncfusionSplitButton_91152cba.7z

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team March 5, 2019 01:27 PM UTC

Hi Sundar, 
Greetings from Syncfusion. 
We have checked the customer requirement ‘To make SplitButton responsive inside Grid Column’ and it can be achieved by assigning 100% width to SplitButton and its wrapper element. Also we need to assign the wrapper width to dropdown popup element using beforeOpen event of SplitButton. Please check the below code snippet,  
<ejs-splitbutton :items='items' style="width: 100%" content='Paste':beforeOpen="onBeforeOpen"></ejs-splitbutton>  
onBeforeOpen: function(args){  
    //To set the popup width  
    args.element.style.width =this.$el.parentElement.offsetWidth + 'px';  
  width: 100%;  
Please check the above sample and let me know if you have any other concern. 

Thavasianand S. 

SS sundar sambandam March 6, 2019 09:48 AM UTC

Thank you Thavasianand 
It worked as expected.

TS Thavasianand Sankaranarayanan Syncfusion Team March 6, 2019 10:00 AM UTC

Hi Sundar, 
We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S.

Live Chat Icon For mobile
Up arrow icon