Send date as parameter for Data in Datasource

3 posts, 0 answers
  1. Kevin
    Kevin avatar
    4 posts
    Member since:
    Jun 2016

    Posted 05 Oct Link to this post

    Okey I have been breaking my head over this for hours now and using google but I can not seem to find the right solution

    I have a chart that uses a data source and some javascript to send aditional data.

    But the DateTime is always null in my controller how do I fix this

    View code

    @(Html.Kendo().DatePicker().Name("startField")
        .Events(e => e.Change("startChanged"))
        //.Format("dd-MM-yyyy")
        .Value(DateTime.Now.Date.AddDays(-6))
    )
     
    @(Html.Kendo().Chart<ECOnX.Web.Modules.Containers.Mvc.Models.Container.ContainerDataChartViewModel>()
            .Name("dataChart")
            .Title(Html.Resource("Week"))
            .ChartArea(chartArea => chartArea.Background("transparent"))
            .DataSource(ds => ds.Read(read => read.Action("ChartContainerData_Read", "ContainerController").Data("containerReadData")))
            ...
            .Tooltip(tooltip => tooltip.Visible(true).Shared(true))
    )

     

    <script>

        $(document).ready(function () {
            //change event
            $("#btnRefresh").click(function () {
                var startPicker = $("#startField").data("kendoDatePicker");
                var converted = '"\\\/Date(' + startPicker.value().getTime() + ')\\\/"';
                alert(converted)
                var grid = $("#dataChart").data("kendoChart");
                grid.dataSource.read();
            });
        });

        function containerReadData() {
            var startPicker = $("#startField").data("kendoDatePicker");
            var converted = '"\\\/Date(' + startPicker.value().getTime() + ')\\\/"';
            return {
                id: $('#chartidfield').val(),
                startDateTest: converted
            };
        }

        function startChanged() {
                var grid = $("#dataChart").data("kendoChart");
                grid.dataSource.read();
        }
    </script>

     

    And the controller

    public ActionResult ChartContainerData_Read(string id, DateTime? startDateTest)
            {
                using (DataContext context = new DataContext())
                {
                    DateTime startDate = DateTime.Now.Date.AddDays(-6);
                    DateTime endDate = DateTime.Now.Date.AddDays(7);
                    ..
                    var json = Json(query.ToList(), JsonRequestBehavior.AllowGet);
                    return json;
                }
            }
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2135 posts

    Posted 09 Oct Link to this post

    Hello Kevin,

    I have found the following forum thread for passing Date object to controller. Please take a look at it and see if the suggested solution will work for you:

    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Kevin
    Kevin avatar
    4 posts
    Member since:
    Jun 2016

    Posted 09 Oct Link to this post

    Hello Konstantin,

    I have found the problem this morning another partial view was loaded on the page which had the same javascript function defined. which was causing the null date being passed. Just passing the picker value is enough.

    function containerReadData() {
        var startPicker = $("#startField").data("kendoDatePicker");
        return {
            containerId: $('#chartidfield').val(),
            startDate: startPicker.value()
        }
    }

     

Back to Top