[Solved] Grid Client-side API

[Flame Boy]

I am looking to have a separate search box control the filters for an Ajax grid on the same page. My first instinct would be to use a javascript onclick like this:

ordersGrid.rebind({
                filter: "substringof(Name,'" + searchterm + "')"
            });

Will this work? Am I on the right track? Thanks!

[Atanas Korchev]

Hello Flame Boy,

 You can use this code to filter the grid:

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

grid.filter("substringof(Name,'" +searchterm + "')");

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.

[Drew]

Hi Atanas!

Im looking to do something very similar to what Flame Boy requested, However Im not sure how to implement it.
I would like to use Ajax links to apply a filter on my Grid, Im just not sure how to call that script in an Ajax link.

My First attempt was to create an Ajax.ActionLink and pass a search parameter to the controller, store it in a variable and use a redirecttoaction to move it over to the _AjaxBinding controller which would then filter my linq query BUT the Ajax.ActionLink would redraw my grid as Json data. I know im on the wrong track here.

Your recommended approach looks much simpler than what I was attempting,  I just dont get out to call that script from my ajax link.

Any help would be greatly appreciated.

[Atanas Korchev]

Hello Drew,

Unfortunately I cannot understand your request. Why do you want to use an AjaxLink to filter the grid? Could you please elaborate a bit more on your scenario? Thanks!

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.

[Drew]

Im working on a site with a left and right colum.  On the right colum is the grid and on the left is a list of category navigation links.  my grid on initial pageload returns all records, I wanted to know if it was possible to filter to the grid by clicking the navigation links on the left colum but without a page refresh. 

The links would act as if they were preset filters.   I would also like to add a textbox to allow an open text search on the grid too.

I was trying to keep the page simple by usign a list of links.
Would I be better off using a telerik menu or a single colum grid as my navigation menu?

 

=Html.Telerik().Grid<Product>()

.Name("Grid")

.Columns(columns =>

{

columns.Add(o => o.Id).Width(50);

columns.Add(o => o.Name);

columns.Add(o => o.Size).Width(50);

columns.Add(o => o.Srp).Width(60);

columns.Add(o => o.Qty).Width(50);

columns.Add(o => o.AddToBasket).Width(115);

})

.Ajax(ajax => ajax.Action("_AjaxBinding", "Products"))

.Pageable()

.Scrollable()

.Filterable()

Html.Telerik().ScriptRegistrar().Render();

[Atanas Korchev]

Hi Drew,

I think I got it now. In my opinion there is no need to use AjaxLink. You can use a normal <A> tag with some JavaScript wired to it which will filter the grid.

<a href="javascript:doFilter('something')">filter</a>

<script type="text/javascript">
function doFilter(searchTerm) {
        var grid = $('#Grid').data('tGrid');
        grid.filter("substringof(Name,'" +searchterm + "')");
}
</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.

[Drew]

That was exactly what I needed!

Thanks alot!

[Drew]

Hi Atanas,

An issue has popped up when I try and add another type of search on my grid. 

One of the fields on my grid is called Categories, which is just a list of ints  1232,1233,1234,1235, 
I'm using it this way so my items can belong to more than one category when clicked on.

I have a list of links (category list) that when I click them, I get a "Did not return JSON" error.
Here's what my list of links looks like.

<a href="javascript:doFilter('1232')">Category A</a><br>
<a href="javascript:doFilter('1233')">Category B</a><br>
, etc..

My jQuery for this filtering is here

 

function doFilter(search) {

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

grid.filter("substringof(Categories,'" + search + "')");

}

 

Is jQuery not able to filter data that way?  (This script was tested on my other "text" fields and works well)

I also noticed that the built in grid filter drop down is missing its filter options "greater than, less than, etc"  but it exists in the other fields of my grid.

The category data does display properly in the grid, just no filtering works on it.

 

[Atanas Korchev]

Hi Drew,

We will need some further information in order to resolve the problem. Could you please check with Fiddler or Firebug what the actual error message is when receiving "Did not return JSON" ? Could you also send us your grid declaration as well as the model you are binding it to? Is the Categories property of string type or array of integers?

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Drew]

Using firebug does not show me an error in the code,  on page load the data loads perfectly in my ajax grid, I use a textbox to search the grid field name which works well,  The problem is when I search the Categories field.  Currently it's an array of strings..  Here's my grid code

<%= Html.Telerik().Grid<Product>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Add(o => o.Id).Width(65).Title("Item#");
                columns.Add(o => o.Name).Title("Product Description");
                columns.Add(o => o.Size).Width(60);
                columns.Add(o => o.SuggRetailPrice).Width(60).Title("Srp.");
            })
            .Ajax(ajax => ajax.Action("ProductsGrid", "Order"))
            .Pageable()
            .Scrollable()
            .Sortable()
            .Filterable()
            %>

Here's my product class

public class Product
    {
            public Product()
            {

            }

            /// <summary>
            /// Product Id
            /// </summary>
            public int Id { get; set; }

            /// <summary>
            /// Product Name
            /// </summary>
            public string Name { get; set; }


            /// <summary>
            /// Currency code
            /// </summary>
            public short CurrencyCode { get; set; }

            /// <summary>
            /// Suggested Retail Price
            /// </summary>
            public decimal SuggRetailPrice { get; set; }

            /// <summary>
            /// The size of the product( e.g 100, 16 oz etc.)
            /// </summary>
            public string Size { get; set; }

            /// <summary>
            /// Unit of measure code
            /// </summary>
            public short UnitofMeasureCode { get; set; }

            /// <summary>
            /// The categories in which this product exist.
            /// </summary>
            public string[] Categories { get; set; }

        }

In my productsgrid action, I am binding my IEnumerable<Product> list to a gridmodel and the data loads just fine until I try and filter the categories field,   the other fields filter just fine. When I include the categories field to display in the grid,  the data shows but still no filter works on it.   Not sure if that helps.

This was the jQuery code I was using again.

    function doFilter(search) {
        var grid = $('#Grid').data('tGrid');
        grid.filter("substringof(Categories,'" + search + "')");

    }

And at the bottom of my page

<%Html.Telerik().ScriptRegistrar().Render(); %>

[Atanas Korchev]

Hi Drew,

The grid currently can filter only on simple types - string, integer, date, boolean etc. This means that filtering by array of strings will not work. The only workaround I can suggest is  converting that property to string (the string representation of the array) by using a ViewModel object. This is highlighted in this blog post.

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Drew]

Good tip, I'll do it that way.

Again, Thanks for your help!