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.

Some questions about functionalities of the Grid control.

Thread ID:

Created:

Updated:

Platform:

Replies:

119285 Jun 1,2015 08:23 PM Jun 3,2015 10:06 PM ASP.NET MVC 3
loading
Tags: Grid
Miguel Jesús
Asked On June 1, 2015 08:23 PM


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 [Syncfusion]
Replied On June 2, 2015 10:38 AM

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: http://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
Replied On June 2, 2015 12:22 PM

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 [Syncfusion]
Replied On June 3, 2015 10:06 PM

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: http://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

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.

;