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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

split button in Grids responsive

Thread ID:

Created:

Updated:

Platform:

Replies:

143088 Mar 4,2019 04:17 PM UTC Mar 6,2019 10:00 AM UTC Vue 3
loading
Tags: Data Grid
sundar sambandam
Asked On March 4, 2019 04:17 PM UTC

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 [Syncfusion]
Replied On 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,  
  
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%;  
}  
  
  
  
Please check the above sample and let me know if you have any other concern. 

Regards, 
Thavasianand S. 


sundar sambandam
Replied On March 6, 2019 09:48 AM UTC

Thank you Thavasianand 
It worked as expected.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  
                          
Regards, 
Thavasianand S.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;