Split button inside grid

Question

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 · Answer

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 · Answer

It is working. thanks for the solution sir

Sathyanarayanamoorthy Eswararao · Answer

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