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

Multiple custom command buttons in a grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

130371 May 9,2017 01:59 PM UTC May 15,2017 01:18 PM UTC JavaScript 4
loading
Tags: ejGrid
Stian Rossland
Asked On May 9, 2017 02:02 PM UTC

When i try to add multiple custom commands to a grid column, only the last own is rendered.

Stian Rossland
Replied On May 9, 2017 02:02 PM UTC

                 {
                          headerText: "Actions",
                            commands: [
                                {
                                    type: "open",
                                        buttonOptions: {
                                        text: "Open",
                                            width: "100",
                                            click: "onOpenClick"
                                        },
                                                               
                                      type: "power",
                                        buttonOptions: {
                                        text: "Power",
                                            width: "100",
                                            click: "onPowerClick"
                                        }, 
                                      type: "disconnect",
                                        buttonOptions: {
                                        text: "Disconnect",
                                            width: "100",
                                            click: "onDisconnectClick"
                                        }
                                    }
                                ],
                                isUnbound: true,
                                textAlign: ej.TextAlign.Left,
                                width: 400
                         }

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 10, 2017 10:20 AM UTC

Hi Rossland,
Thanks for contacting Syncfusion support.
We can reproduce the mentioned issue in our sample with the attached code example. In your code example the curly brackets were not properly closed in the commands column. 
 Find the code example: 
{
      type: "open",
      buttonOptions: {
             text: "Open",
             width: "100",
             click: "onOpenClick"
    },

Find the modified code example: 
 
{
      type: "open",
       buttonOptions: {
            text: "Open",
            width: "100",
            click: "onOpenClick"
         }
  },
 
Regards,
Prasanna Kumar N.S.V



Stian Rossland
Replied On May 14, 2017 03:36 PM UTC

Thank you. I got it to work now. Is there a way to render one of the command buttons as a dropdown button? Alternative i could show a pop-up on click, but i can't find a popup widget in JS Essential. Basically what a need is a multiple choice on a commnd button.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 15, 2017 01:18 PM UTC

Hi Rossland, 

Query : “Is there a way to render one of the command buttons as a dropdown button?” 

It is not possible to render one of the command buttons as a dropdown button. To achieve your requirement we suggest you to use columnTemplate feature of ejGrid. In columnTemplate HTML templates can be specified in the template property of the particular column as a string (HTML element) or ID of the template’s HTML element. 

Find the code example and sample:  


<body> 
    
    <div id="Grid"></div> 
    <ul id="U1"> 
        <li><span>User</span></li> 
        <li><span>Guest</span></li> 
        <li><span>Admin</span></li> 
    </ul> 
             
 <script type="text/javascript"> 
    $(function () { 
        $("#Grid").ejGrid({ 
            // the datasource "window.gridData" is referred from jsondata.min.js 
            dataSource: window.gridData, 
            allowPaging: true, 
            templateRefresh : function (args) {              
                $($(args.cell).children()[0]).ejSplitButton({ click: "btnClick2", targetID: "U1" , width: "80px", height: "30px"}); 
                $($(args.cell).children()[1]).ejButton({ click: "btnClick1" }); 
            }, 
            columns: [ 
                     ---------------------------------- 
                     { headerText: "Actions", template: '<button id="button13">Open</button><button id="button14">Power</button>', width: 150 } 
            ] 
        }); 
    }); 
 </script> 


Refer to the Help document for the columnTemplate. 


Regards, 
Prasanna Kumar N.S.V 


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.

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

;