CODEWITHSUNDEEP
asp.net-mvc-5devexpress
pepr
pepr

Reputation: 20770

ASP.NET MVC GridView filtering by value from textbox on button click? (DevExpress)

Summary: I want to enter a text to the textbox, push the button, and the GridView should display the reduced content -- filtered by the value.

Details: Being a DevExpress APS.NET MVC 5 beginner, I have a simple demo application that uses the GridView. The first example uses the Gridview with filter row -- everything generated by the DevExpress (14.2) GridView wizard.

Initial state of the gridview

When entering some value to the column filter, the displayed content is reduced after a while:

Filtered content

I need to implement the alternative where I enter the value to the textbox, and the GridView content is updated only after pushing the Apply button:

I want filtering after pressing the Apply button

The view is defined as follows:

@{
    ViewBag.Title = "GridView filtering";
}

<h2>@ViewBag.Title</h2>

@Html.DevExpress().Label(settings =>
{
    settings.Name = "Label";
    settings.Text = "Filter for the Name column";
}).GetHtml()

@Html.DevExpress().TextBox(settings =>
{
    settings.Name = "TextBox";
}).GetHtml()

@Html.DevExpress().Button(settings =>
{
    settings.Name = "BtnApply";
    settings.Text = "Apply";
    settings.UseSubmitBehavior = true;
}).GetHtml()


@Html.Action("GridViewPartial")

I am lost on how to bind the button click to the functionality, how to get the textbox content, and how to pass it to the GridView and make it updated.

Upvotes: 0

Views: 3060

Answers (1)

Gosha_Fighten
Gosha_Fighten

Reputation: 3858

The Apply button should not perform submit in this scenario. Set its UseSubmitBehavior property to False. Handle the button's client-side Click event. To access it in mark-up, use ButtonSettings.ClientSideEvents:

@Html.DevExpress().Button(settings =>
{
    settings.Name = "BtnApply";
    settings.Text = "Apply";
    settings.UseSubmitBehavior = false;
    settings.ClientSideEvents.Click = "btnApplyClick";
}).GetHtml()

In the btnApplyClick JS function, use the TextBox'es clien-side GetText method to get the text typed in your TextBox. Then, use the Grid's client-side AutoFilterByColumn to apply your filter to the grid by the Name column:

<script type="text/javascript">
    function btnApplyClick(s, e) {
        var filter = TextBox.GetText();
        GridView.AutoFilterByColumn("Name", filter);
    }
</script>

Where "GridView" is the name of your GridView extension.

Upvotes: 2

Related Questions