Some questions about functionalities of the Grid control.

[Miguel Jesús]

Hello,

Could you help me with these questions?

1. Is there any way to put a dropdownlist instead of the input text on the filter toolbar?

I need to put a dropdownlist on the filter toolbar for the users not to have to type the word but just selected it.

2. How can I put some text near the icons on the filter toolbar? Is that possible?

I need to show on the toolbar the icon AND some text that indicates the action that the icon does.

3. And finally, This Grid control supports adding some header title on the top of the grid?

Waiting for your reply,

Regards.

[Sellappandi Ramu]

Hi Miguel,

Thanks for using Syncfusion products.

Please find the response in below table.

Queries	Response
1. Is there any way to put a dropdownlist instead of the input text on the filter toolbar?	We considered this requirement “DropDown list instead of text box in filter bar” as feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
2. How can I put some text near the icons on the filter toolbar? Is that possible?	Based on your requirement we have created a sample to display the text with icon in toolbar and it can be downloaded from following link location. Sample Link: https://www.syncfusion.com/downloads/support/forum/119285/ze/MVCGrid_119285-558875397 In the above sample we have used actionComplete event to append the text in toolbar. Please refer the following code snippet.     @(Html.EJ().Grid<MVCGrid.OrdersView>("FlatGrid")         .Datasource((IEnumerable<object>)ViewBag.datasource)         .AllowScrolling()          .AllowPaging()    /*Paging Enabled*/               .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })               .ToolbarSettings(toolbar =>                 {                     toolbar.ShowToolbar().ToolbarItems(items =>                     {                         items.AddTool(ToolBarItems.Add);                         items.AddTool(ToolBarItems.Edit);                         items.AddTool(ToolBarItems.Delete);                         items.AddTool(ToolBarItems.Update);                         items.AddTool(ToolBarItems.Cancel);                     });                 })         .Columns(col =>         {                    ….         }).ClientSideEvents(eve => { eve.ActionComplete("TextCreate"); })     ) </div> <script type="text/javascript">     function TextCreate(args) {         if (this.initialRender) {             $("#" + this._id + "_add").append("<span>Add</span>");             $("#" + this._id + "_edit").append("<span>Edit</span>");             $("#" + this._id + "_delete").append("<span>Delete</span>");             $("#" + this._id + "_update").append("<span>Update</span>");             $("#" + this._id + "_cancel").append("<span>Cancel</span>");         }     } </script>
3. And finally, This Grid control supports adding some header title on the top of the grid?	Currently, we don’t have any inbuilt support to provide Tile and Subtitle for Grid control. But we can achieve your requirement by placing html elements, that holds the title before the Grid. Please refer the below code snippet. <style>     #title {         text-align: center;         font-weight: bold;         font-size: 25px;     } </style> <div id="title">Syncfusion Grid</div> <div>     @(Html.EJ().Grid<MVCGrid.OrdersView>("FlatGrid")                 ….     ) </div>

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R

[Miguel Jesús]

Thanks for your reply,

It was possible, thanks to your advice, solve query 2 and 3.

But what about query 1?, it's really fantastic that you can develop my feature request, but I think that it's going to take some time.

I need to do something and use what the component have at this moment.

I've seen that the grid supports excel filtering, but there isn't any demo using this type of filtering with server side pagination, I mean using UrlAdaptor.

I dont know if it's possible to use that filtering type of that way, but I think it would be a solution.

Another thing I've tried, it was replacing the input text to a dropdown using JQuery (keeping same id) but then the Grid control never sends the dropdownlist value to pagination on server side, so if there was any way to make the grid send the value, it would be another way to solve my query.

Waiting for your reply,

Regards

[Sellappandi Ramu]

Hi Miguel,

Thanks for the update.

We have analyzed your requirement deeply and achieved your requirement in filter bar. We have rendered dropDown to filter bar of EmployeeID column. Please refer the following code snippet.

<script>

    function create(args) {

        var employeeFilter = this.getHeaderTable().find(".e-filterbar #EmployeeID_filterBarcell");

        employeeFilter.parent().removeClass('e-filterdiv');

        employeeFilter.ejDropDownList({ width: '100%', showCheckbox: true, popupHide: "drppopuphide" });

        $.ajax({

            url: '/Grid/DataSource',

            type: 'post',

            async: false,

            success: function (data) {

                employeeFilter.ejDropDownList({ dataSource: data });

            }

        })

    }

    function drppopuphide(args) {

        var value = args.text.split(',');

        var filter = [];

        for (var i = 0; i < value.length; i++) {

            var fObj = { field: "EmployeeID", value: value[i], predicate: "or", operator: 'equal', matchcase: 'false' };

            filter.push(fObj);

        }

        var gridObj = $("#FlatGrid").data('ejGrid');

        ej.merge(gridObj.model.filterSettings.filteredColumns, filter);

        if (args.text == "") {

            for (var j = 0; j < gridObj.model.filterSettings.filteredColumns.length; j++) {

                if (gridObj.model.filterSettings.filteredColumns[j].field == "EmployeeID")

                    gridObj.model.filterSettings.filteredColumns.pop("EmployeeID");

            }

        }

        var args = { requestType: 'refresh' }

        gridObj._processBindings(args);

    }
</script>

In the above code snippet we have used _filterHandler method to perform the filter operation in grid.

For your convenience we have attached sample and it can be downloaded from following link location

Sample Link: https://www.syncfusion.com/downloads/support/forum/119285/ze/ExcelFilter-314656102

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R