Split button inside grid

[Raj Kumar]

I want to use syncfusion split button inside syncfusion grid but i define a template for that  it is not working. How to use this.

Grid:
  $("#Grid").ejGrid({
                    dataSource: obj,
                    allowPaging: true,
                    pageSettings: {
                        pageSize: 10
                    },
                    detailsTemplate: "#tabGridContents",
                    detailsDataBound: "detailGridData",
                    create: "FlatGridComplete",
                    columns: [
                        { field: "jobCode", headerText: "Job Code", width: 100, headerTextAlign: ej.TextAlign.Center, textAlign: "center" },
                        { field: "jobTitle", headerText: "Job Title", width: 150, headerTextAlign: ej.TextAlign.Center },
                        { field: "location", width: 200, headerText: "Location", headerTextAlign: ej.TextAlign.Center },
                        { headerText: "Status", width: 140, template: "#ColumnPostTemplate", headerTextAlign: ej.TextAlign.Center },
                        { headerText: "Published On", width: 130, template: "#ColumnPostedOnTemplate", headerTextAlign: ej.TextAlign.Center },
                        { field: "applicationsCount", width: 130, headerText: "Applications", headerTextAlign: ej.TextAlign.Center, textAlign: "center" },
                        { template: "#ColumnEditTemplate", textAlign: "center", width: 130, }
                    ],
                 
                  
                });
             
 

template:
    <script type="text/x-jsrender" id="ColumnEditTemplate">
    
        <button id="splitButton">File</button>
        <ul id="target">
            <li><a rel='nofollow' href="#">Open</a></li>
            <li><a rel='nofollow' href="#">Save</a></li>
            <li><a rel='nofollow' href="#">Delete</a></li>
        </ul>

        </script>            

[Sathyanarayanamoorthy Eswararao]

Hi Raj Kumar, 

Thanks for contacting Syncfusion support. 

According to your query you need to render the split button control in grid columns. We already have a knowledge base documentation for how to render Syncfusion controls in grid columns. Please refer the below link for the Knowledge base documentation. 

KB Link: https://www.syncfusion.com/kb/6798/how-to-display-syncfusion-controls-in-grid-columns 

Also in the provided code example we found that you have defined the button element in the template for the column but the button element is not rendered as ejSplitButton so it is not working properly. 

For your convenience we have prepared a online sample. Refer the below link for sample. 

Sample: https://jsplayground.syncfusion.com/hslhst14 

Also please refer the below documentations. 

https://help.syncfusion.com/js/grid/columns#column-template 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy 

[Raj Kumar]

It is working. thanks for the solution sir

[Sathyanarayanamoorthy Eswararao]

Hi Raj Kumar, 

We are happy to hear that your issue has been resolved. 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy