split button in Grids responsive

[sundar sambandam]

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

Sundar 

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>

                                                             </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) {

                                              

                                            }

                                        }

                                    })

                            };

                        }

Attachment: syncfusionSplitButton_91152cba.7z

[Thavasianand Sankaranarayanan]

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,  

  

index.js  

<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';  

}  

  

  

index.css  

.e-split-btn-wrapper{  

  width: 100%;  

}  

  

  

Sample Link: https://next.plnkr.co/edit/kd8FWPxiumaEt0Qf  

  

Please check the above sample and let me know if you have any other concern. 

Regards, 

Thavasianand S. 

[sundar sambandam]

Thank you Thavasianand 

It worked as expected.

[Thavasianand Sankaranarayanan]

Hi Sundar, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.