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.
Unfortunately, activation email could not send to your email. Please try again.

Add remote sourced dropdownlist to Grid Toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

120086 Aug 29,2015 12:03 AM Sep 2,2015 12:14 AM JavaScript 3
loading
Tags: ejGrid
Jim Woods
Asked On August 29, 2015 12:03 AM

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 [Syncfusion]
Replied On August 31, 2015 01:44 AM

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
Replied On September 1, 2015 08:03 PM

Thanks!  That worked.

Madhu Sudhanan P [Syncfusion]
Replied On September 2, 2015 12:14 AM

Hi Jim,

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

Regards,
Madhu Sudhanan. P

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.

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.

;