Chart SeriesClick to filter a Kendo Grid

5 posts, 0 answers
  1. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 31 Aug Link to this post

    I'm trying to make my chart interactive by displaying data in a Kendo Grid based on clicking on a data point from a Kendo Chart,

    I have a working chart and it's event is connected to a seriesclick which currently is tied to a kendoConsole.Log.  I would like to hide the grid and display it filtered when a data point is clicked and refilter if another is clicked.   Is this possible?  If so how do you do it?

     

    Thanks!

  2. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 04 Sep Link to this post

    Hello Mike,

    This can be achieved in the series click event by retrieving the current value of the series and setting the same value as a filter to the Grid dataSource:

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

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-seriesClick

    Another option will be to use custom logic and the same dataSource for the Chart and the Grid. I made an example demonstrating this approach as well:

    http://dojo.telerik.com/ADAlu/2

    I hope one of these approaches to prove helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 05 Sep in reply to Stefan Link to this post

    Thanks for the response.  I'm looking over the solution and I'll let you know how it goes.  I started this going a different route.  I created the click event on a chart and was hoping to pass the clicked date/time as a filter date.  I created a stored procedure that returns the data needed and has the filter date as a parameter.  I'd need to pass the clicked date/time to the grids data source controller code.   Is this possible?  I'd rather the stored procedure do the business logic to pull the data rather then filtering it at the grid. 

     

            public ActionResult HourlyErrorsDetail_Read([DataSourceRequest] DataSourceRequest request, DateTime filterDateTime)
            {

                    ElmahService es = new ElmahService();
                    //var newErrors = es.GetErrorsHourCount();
                    var newErrors = es.GetElmahHourlyDetails(filterDateTime);

                    return Json(newErrors, JsonRequestBehavior.AllowGet);

              }

  4. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 05 Sep in reply to Mike Link to this post

    I also noticed I forgot to mention I'm doing this using Kendo MVC.  Are we able to do your example or mine using razor and kendo mvc?
  5. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 07 Sep Link to this post

    Hello Mike,

    In general, the examples can be made using the MVC version of the widgets as they are wrappers of the jQuery one and behave the same on the client.

    If the desired result is to have the date time object I can suggest the following approach.

    1) On the series click call the read method of the Kendo UI Grid dataSource instance:

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

    2) Use the Data() method of the Grid read to pass additional parameters using a function:

    http://www.telerik.com/forums/pass-additional-parameters-to-read-ajax-datasource-method---mvc

    .Read(read => read.Action("Products_Read", "Grid").Data("additionalInfo"))

    function additionalInfo() {
        return {
            filterDateTime: new Date(),// This will return the current date/time
        }
    }

    This will allow filtering the Grid based on the current time when the Chart is clicked. 

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top