Apply filter in URL, best practice

[Jacob]

Hi,

Need help to find the best way to apply filter in links - or a different method if that's better.

This is what I want.
I have a page that shows a lot of names, and when clicking on a name, another page should appear showing details for that particular name.
My initial thought was, that this is done by filtering, right !!
Using filters, also allow the user to cancel the restrictions or change filter options, if desired.
I still think this is the right way, I just don't know how.

I have played around with action links:

...ClientTemplate(@Html.ActionLink("#=Company.Name#", MVC.Company.ActionNames.Index, MVC.Company.Name, new { id = "#=Company.Id#" }).ToHtmlString());

-which gives the following URL: "http://localhost:65398/Company/Index/12345".
It would then be possible to save this ID in a session variable and then load it when the AJAS request arrive and then apply the extra FilterDescription to the list of filters, but it's still a hack.

I guess I have to find a way to add the filter parameters to the URL so kendo grid recognize it as a filter.
Any help would be appreciated.
Thanks.

[Jacob]

Please Telerik, I need help here.
I can't figure out how to dynamically apply the filter up front without two page loads OR adding the filter to the URL.
Thanks.

[Petur Subev]

Hello Jacob,

I am not sure if filtering is actually the best approach here. Instead I would suggest you to create separate details page which accepts a route parameter - the ID of the entity you want to display in details. Inside the Grid you just have to construct different URL based on the different items. To create hyperlinks inside a column, check the following topic and more specifically the example for the AjaxBound Grid:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-action-links


Regards,
Petur Subev
Telerik

 

 

[Jacob]

Hi Petur,

Much appreciated, but...
The reason for wanna using filtering, is that the same page may be used to show a single item and all items in one, without having to create two similar pages. Imagine that the user want to edit the shown item, then you have to either implement the edit functionality in both pages or accept that the user is redirected to a edit page every time he/she click on a item in the list. For me, filtering seems the obvious choice.

Is there a way, where I can add a filter to the grid, without a server turn around ??
The thing is, that the filter has already been applied on the server, when the grid first request the data, but the grid does not yet know anything about it and therefor not able to show it to the user.

Thanks.

[Petur Subev]

Hello Jacob,

If you have disabled serverFiltering options of the dataSource of the Grid, then you just have to use the filter method of the dataSource and the Grid will automatically react to the change in the dataSource and redraw itself. 

How to use the filter method of the dataSource is covered in the documentation here:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

Kind Regards,
Petur Subev
Telerik

 

 

[Jacob]

Hi Petur,

Not sure where so find this ServerFiltering property.
I'm using Kendo.Mvc version 4.0.30319.
Thanks.

[Petur Subev]

Hello Jacob,

When using the MVC wrappers all the options ServerPaging, ServerFiltering, ServerSorting and ServerGrouping are controlled through one single option of the dataSource called ServerOperation. They are controlled through a single configuration because those operations are tightly coupled

Kind Regards,
Petur Subev
Telerik

 

 

[Jacob]

Hi Petur,

I already have ServerOperation(true) set.
Lets go back to the beginning.

When a page is first requested, the server has already added the filter (the query with the where part) and the grid shows the data, but does not know that it has been filtered.
A piece of javascript (code below) request the server for the filter (if any) and apply that filter to the grid - this cause the grid to request the server for new data.

$.ajax({
    url: "@Url.Action(MVC.Base.ActionNames.GetIdFilter)",
    type: "GET",
    datatype: "json",
    success: function (r) {
        filter = r;
    },
    async: false
});
if (filter.Filtered) {
    grid.dataSource.filter({
        field: filter.Member,
        operator: filter.Operator,
        value: filter.Value
    });
}

How do I prevent the grid from requesting the server for data twice ??
Thanks.

[Petur Subev]

Hello Jacon,

You still have not shared how you have configured the Grid and I am getting confused.

if you have disabled server operations and you have an initial filter then you can assign it on the DataSource (I see you are using the MVC wrappers).

Here is an example:

@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("people")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(
            model =>
            {
                model.Id(m => m.PersonID);
                model.Field(field => field.Name).Editable(true);
            })
            .Filter(ft=>ft.Add(m=>m.Name).Contains("Foo"))
            .Read(read => read.Action("GetPeople", "Home"))
            .Create(cr => cr.Action("CreatePerson", "Home"))
            .Update(up => up.Action("UpdatePerson", "Home"))
    )
    .ToolBar(tb=>tb.Create())
    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID);
        columns.Bound(c => c.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(c => c.Salary);
        columns.Bound(c => c.BirthDate).Format("{0:dd/MM/yyyy}");
        columns.Command(cmd => cmd.Edit());
    })
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Pageable()
    .Sortable()
)

If this is not what you are looking for please elaborate.

Kind Regards,
Petur Subev
Telerik

 

 

[Jacob]

Hi Petur,

I apologize, here is the grid:

@(Html.Kendo().Grid<CompanyDomainView>()
    .Name("customer-grid")
    .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(true)
            .PageSize((int)ViewBag.linesPrPage)
            .Model(model => model.Id(e => e.IdForTheKendoComponents))
            .Read(read => read.Action(MVC.Company.ActionNames.Data_Read, MVC.Company.Name))
            .Update(update => update.Action(MVC.Company.ActionNames.Company_Update, MVC.Company.Name))
            .Events(events => events.Sync("onSync"))
            .Events(events => events.Error("onDataSourceError"))
            .Create(create => create.Action(MVC.Company.ActionNames.Company_Create, MVC.Company.Name))
            )
        .Columns(columns =>
            {
                columns.Bound(e => e.InternalId).Width(250).Filterable(filter => filter.Cell(c => c.Template("NumericFilter")));
                columns.Bound(e => e.Name).Filterable(false);
                columns.Bound(e => e.CompanyCode).Filterable(false);
                columns.Bound(e => e.FactoryName).Filterable(false);

            })
    .Pageable(p =>
        p.Refresh(true)
        .ButtonCount(10)
        .PageSizes(new[] { 10, 25, 100, 200 })
        .Input(true)
        )
    .PrefixUrlParameters(true)
    .Selectable(p => p.Mode(GridSelectionMode.Single))
    .ClientDetailTemplateId("customerTemplate")
    .Editable()
    .Events(e => e.DetailInit("onAfterTemplateLoad"))
    .Events(e => e.DetailExpand("onTemplateExpand"))
    .Events(e => e.DetailCollapse("onTemplateCollapse"))
     .ToolBar(b => b.Template(@"<div class='grid-column-right'>
        <a class='k-button k-button-icontext k-grid-new' style='margin-right:40px; ' href='javascript: addNewItem()'>+ Add</a>
        <a class='k-button k-button-icontext k-grid-refresh' href='javascript: refreshGrid()'>Refresh all</a>
        </div>"))
    .Filterable(f=>f
        .Extra(false)
        .Mode(GridFilterMode.Row)
        .Operators(op => op
            .ForNumber(str => str
                .Clear()
                .IsEqualTo("Is equal to")
                .IsGreaterThan("Is greater than")
            )))
)

Thank you.

[Vladimir Iliev]

Hello Jacob,

If you need to skip the initial request that the Grid makes you can set the "AutoBind" option to false. This way the first request will be made when you call the "filter" method on the client side.

@(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Order>()
    .Name("grid")
    .AutoBind(false)

Another option (as my colleague Peter mention) is to directly set the "Filter" option of the Grid on the server side (example is available in his previous reply).

Regards,
Vladimir Iliev
Telerik

 

 

[Jacob]

Hi Vladimir,

There is not always a filter - how does that work with the first option, mentioned by Petur ??

[Vladimir Iliev]

Hi Jacob,

You can conditionally set the filters using regular "if" statement inside the Grid configuration:

.DataSource(dataSource => dataSource
    .Ajax()
    .Filter(f => {
        if (ViewData["filter"] != null)
        {
            f.Add(model => model.OrderDescription).Equals(ViewData["filter"]);
        }
    })

Regards,
Vladimir Iliev
Telerik