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. Image for the cookie policy date

Add remote sourced dropdownlist to Grid Toolbar

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>

3 Replies

MS Madhu Sudhanan P Syncfusion Team August 31, 2015 05:44 AM UTC

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


JW Jim Woods September 2, 2015 12:03 AM UTC

Thanks!  That worked.


MS Madhu Sudhanan P Syncfusion Team September 2, 2015 04:14 AM UTC

Hi Jim,

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

Regards,
Madhu Sudhanan. P

Loader.
Live Chat Icon For mobile
Up arrow icon