1. Home
  2. Forum
  3. jQuery
  4. ejGrid Custom Command column template

ejGrid Custom Command column template

I have a command column that i want to be able to customize the commands instead of using the buttons. Something to this nature.
{
headerText: 'test',
commands: [
{
type: "details",
buttonOptions: {
template: '',
click: this._beginEditUser
}
}, {
type:"bleh",
buttonOptions: {
template: '',
click: this._beginEditUser
}]
}
is this possible?

1 Reply
VA Venkatesh Ayothi Raman Syncfusion Team June 24, 2016 07:38 AM UTC

Hi Phu, 

Thank you for contacting Syncfusion support. 

Do you wants to customize the buttons then we can do in the button options like as follows, 

Code example: 
<Grid> 
$("#Grid").ejGrid({ 
                  . . .  
                columns: [ 
                               .  . . 
 
                               { 
                                   headerText: "Employee Details", 
                                   commands: [ 
                                       { 
                                           type: "details", 
                                           buttonOptions: { 
                                               contentType:"imageonly", 
                                               width: "100", 
                                               click: "onClick", 
                                               prefixIcon: "e-uiLight e-handup" 
 
 
                                           } 
                                       } 
                                   ], 
                                   isUnbound: true, 
                                   textAlign: ej.TextAlign.Left, 
                                   width: 150 
                               } 
                ] 
            }); 
 
   
Sample for customize the button: http://jsplayground.syncfusion.com/21ldtybg 

If you wants to render the other controls to the column then we suggest you to use column template feature in Grid. Please refer to the Help document, sample and code example. 

Code example: 
<Grid> 
 
$("#Grid").ejGrid({ 
                allowPaging: true, 
                pageSettings: { pageSize: 4 }, 
                templateRefresh: "templateRefresh", 
                 
           columns: [ 
      
                                          { headerText: "Employee Image", template:"<input type='text'  id='{{:EmployeeID}}' class='DateTime' />",  textAlign: "center", width: 110 }, 
.  . . . 
                ] 
            }); 
        }); 
 
        function templateRefresh(args) { 
 
            var DateTemplate = $(args.cell).find(".DateTime"); // get the input cell  
            $(DateTemplate).ejDateTimePicker(); // Render the DataTimePicker control  
        }</script> 
 


In above code example, we have bound the date time picker control in Grid using create event.  

Sample for column template: http://jsplayground.syncfusion.com/p5hhawb2 

Help documents: 

2)      Button Customization: http://help.syncfusion.com/js/button/easy-customization 

If it is doesn’t meet your requirement then could you please share the more details for you requirement? 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon