Apply filter in URL, best practice

13 posts, 0 answers
  1. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 26 Jan 2015 Link to this post

    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.
  2. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 27 Jan 2015 Link to this post

    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.
  3. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 28 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 29 Jan 2015 in reply to Petur Subev Link to this post

    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.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 02 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 17 Feb 2015 in reply to Petur Subev Link to this post

    Hi Petur,

    Not sure where so find this ServerFiltering property.
    I'm using Kendo.Mvc version 4.0.30319.
    Thanks.
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 19 Feb 2015 in reply to Petur Subev Link to this post

    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.
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 24 Feb 2015 in reply to Petur Subev Link to this post

    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.
  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 26 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 13 Mar 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    There is not always a filter - how does that work with the first option, mentioned by Petur ??
  13. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 17 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top