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

ejGrid Custom Command column template

Thread ID:

Created:

Updated:

Platform:

Replies:

124708 Jun 23,2016 10:09 PM UTC Jun 24,2016 07:38 AM UTC JavaScript 1
loading
Tags: ejGrid
Phu Trieu
Asked On June 23, 2016 10:09 PM UTC

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?

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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. 


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

;