Search form

[Dario Quintana]

Hi all,

I couldn't find a direct example on how to achieve a search-page with several search-criterias to filter the grid result. An example of a search-page could be this from google http://www.google.com/advanced_search?hl=en

I saw the external service example (of twitter) but maybe exists something more straight.

Cheers

[Atanas Korchev]

Hi Dario Quintana,

I have attached a sample project showing how to use the grid client-side API in order to filter it based on the value of some textbox. Here is the most interesting part of the example

<label for="search">
        Company Name:</label>
    <input type="text" id="search" />
    <%=
        Html.Telerik().Grid<MvcApplication3.Models.Customer>(Model)
        .Name("Grid")
        .Columns(columns => columns.Add(c => c.CompanyName))
        .Pageable()
        .Filterable()
    %>
    <%= Html.Telerik().ScriptRegistrar() %>

<script type="text/javascript">
    $('#search').keydown(function(e) {
        if (e.keyCode == 13) {
            var grid = $('#Grid').data('tGrid');
            grid.filter("substringof(CompanyName,'" + $(this).val() + "')");
        }
    });
</script>

Regards,

Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alec]

Atanas,

     While your example of filtering the already rendered results on the client side is good, I think Dario is looking for the same functionality that I am as well. Please me explain further.

Lets set some context as to the data:

• Customers Table
• Total rows in table: 100,000
• Page Size: 20

I have a page that when it initially loads, is populated with some default data. In this case it is the first 20 records of ALL records in the above table ordered by Customer Last name. The user can page through these results without issue, each pager click making an ajax call to the server passing in the GridCommand variable, returning only the results needed for display. The client side filtering does not help me as I am only displaying 20 rows at a time, not hiding X number of rows and showing X number of rows.

So I need to allow the user to select some filters, from other HTML elements on the page. The problem I am having is that I cannot use the normal Ajax binding adding parameters (.Ajax(ajax => ajax.Action("_AjaxBinding", "Home", new {id = (string)ViewData["id"]})

as I do not know what these will be at that time.

Scenario:

User navigates to page, page displays initial results. User now selects some values from drop downs at top of page and clicks a "Filter" button.

I need to gather the filter values as well as the items in the gridcommand and send it back to the server, using ajax as I do not want postbacks,

then send the result of those filters back into the grid.

How can I accomplish this with Ajax / Client Side / Javascript?

Sorry for the long post.

[Atanas Korchev]

Hi Alec,

I am not sure I understand your requirements correctly. Are they similar to the scenario demonstrated in this online example? If not please elaborate.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dario Quintana]

Hi all,

Atanas, I think that the main question in the example you provide to us: the filtering is taking place in the Client-side or Server-side?

Thanks

[Atanas Korchev]

Hi Dario Quintana,

The filtering is taking place on the server-side. The following code:

 ordersGrid.rebind({
                customerID: customerID
            });

calls the server :

        [GridAction]
        public ActionResult _RelatedGrids_Orders(string customerID)
        {
            customerID = customerID ?? "ALFKI";

            return View(new GridModel<Order>
            {
                Data = GetOrdersForCustomer(customerID)
            });
        }

and passes the customerID value. The GetOrdersForCustomer returns the filtered orders and then the action method returns JSON to which the grid binds on the client-side.

I hope this helps,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Bojan]

Atanas, thank you for the great example.

Is it possible to add another filter criteria?

I'm trying to search several columns at the same time, using this code:

<script type="text/javascript"><br>    $('#search').keydown(function(e) {<br>        if (e.keyCode == 13) {<br>            var grid = $('#Customers').data('tGrid');<br>            var searchTerm = $(this).val();<br>            grid.filter("substringof(FirstName,'" + searchTerm + "')" + "~and~substringof(LastName,'" + searchTerm + "')" + "~and~substringof(EmailAddress,'" + searchTerm + "')"); <br>        }<br>    });<br></script>

but I need "or" operator instead of "and". Changing "~and~" with "~or~" is not working.

Any suggestions?

Best regards,
Bojan

[Kyle schultz]

I am having a different problem. I have a simple page with a form. When the user provides values in the form field and clicks submit the system should load the results grid.

<%

 

= Html.Telerik().Grid(new List<MonitorSearchResult>())

 

.Name(

 

"events")

 

.Columns(colums =>

{

colums.Bound(c => c.TransmissionEventId).Title(

 

"Event Id");

 

colums.Bound(c => c.EventStatusDescription).Title(

 

"status");

 

colums.Bound(c => c.Direction).Title(

 

"Direction");

 

})

.DataBinding(d => d.Ajax().Select(

 

"Search", "Monitor"))

 

.Sortable()

%>

 

 

 

<script type="text/javascript">

 

 

 

 

 

$(document).ready(

 

function () {

 

$(

 

'#btnSearch').click(function () {

 

 

 

var grid = $('#events').data('tGrid');

 

 

 

var searchModel = {

 

TransmissionAccountId: $(

 

'#SelectedCriteria_TransmissionAccountId').val(),

 

};

grid.rebind(searchModel);

 

 

return false;

 

});

});

 

 

</script>


The problem is Grid is undefined and I cannot figure out why! Please help.

 

$(

 

'#events')

 

is found just not the .data('tData') part of it.