Add remote sourced dropdownlist to Grid Toolbar

[Jim Woods]

How do I add remote sourced dropdownlist to Grid toolbar?  I will like to customize it with a dropdown.

I tried using the following but it doesn't work:

customToolbarItems: [{ templateID: "#dropdownlist" }]

This is my code:

HTML

<div id="TotalApplicationVisitsGrid"></div>

<input type="text" id="dropdownlist" />

JS

<script>

        $(function () {

            

            var applicationListTemplate = ej.DataManager({

                url: endpoint + "applications",

                crossDomain: true,

                offline: true

            });

            var aggregateTotalAppVisits = ej.DataManager({

                url: newMacEndpoint + "applications/-1/sessions",

                crossDomain: true,

                offline: true

            });

            var query = ej.Query()

                  .take(100);

            //Controls

            $('#dropdownlist').ejDropDownList({

                dataSource: applicationListTemplate,

                fields: {

                    text: "Description",

                    id: "ApplicationId"

                },

                query: query

            });

            

            $("#TotalApplicationVisitsGrid").ejGrid({

                dataSource: aggregateTotalAppVisits,

                allowPaging: true,

                toolbarSettings: {

                    showToolbar: true,

                    toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.PdfExport]

                },

                columns: [

                        { field: "ApplicationID", headerText: "Application ID", width: 75, textAlign: ej.TextAlign.Right },

                        { field: "Visits", headerText: "Visits", width: 80 }

                ],

                toolbarClick: function (e) {

                    this.exportGrid = this["export"];

                    if (e.itemName == "Excel Export") {

                        this.exportGrid('/api/Orders/ExcelExport');

                        e.cancel = true;

                    }

                    else if (e.itemName == "Word Export") {

                        this.exportGrid('/api/Orders/WordExport');

                        e.cancel = true;

                    }

                    else if (e.itemName == "PDF Export") {

                        this.exportGrid('/api/Orders/PdfExport');

                        e.cancel = true;

                    }

                },

            });

        });

    </script>

[Madhu Sudhanan P]

Hi Jim,

Thanks for using Syncfusion products.

We have analyzed the provided code snippet and found that the cause of the issue is due to the missing of template string to render toolbar template. The templateID of the customToolbarItems should be the ID value of the script element which contains the template string but in your code you have provided the ID of the input element instead of the script element and hence the toolbar template was not worked.

To resolve this issue, please modify your code as below.

  <div id="TotalApplicationVisitsGrid"></div>

  <script type="text/x-jsrender" id="dropdownlistTemplate">

        <input type="text" id="dropdownlist" />
  </script>

     $("#TotalApplicationVisitsGrid").ejGrid({

            dataSource: aggregateTotalAppVisits,

             . . .

            toolbarSettings: {

                showToolbar: true,

                toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.PdfExport],

                customToolbarItems: [{ templateID: "#dropdownlistTemplate" }]

            },

            create: function (args) {

       

                //Best Pratice - Use `create` event to render the sub controls after grid created

                $('#dropdownlist').ejDropDownList({

                    dataSource: applicationListTemplate,

                    fields: {

                        text: "Description",

                        id: "ApplicationId"

                    },

                    query: query

                });

            },

            . . . .  . . .
        });

For your convenience, we have also created a simple grid sample which simulates your requirement and the same can be referred from the below link.

http://jsplayground.syncfusion.com/ao13etsi

Please refer the below help links for more information on toolbar template.

http://js.syncfusion.com/demos/web/#!/azure/grid/ToolBarTemplate

http://helpjs.syncfusion.com/js/grid/toolbar#custom-toolbar-action

http://www.syncfusion.com/kb/javascript/ejgrid?sortId=0&tags=custom-toolbar

Please let us know if you have any query.

Regards,
Madhu Sudhanan. P

[Jim Woods]

Thanks!  That worked.

[Madhu Sudhanan P]

Hi Jim,

Thanks for the update. We are happy that the requirement achieved.

Regards,
Madhu Sudhanan. P