Telerik DatePicker returns null on post

Question

I have 2 Telerik DatePicker's that I am using to filter my model by. However the problem I am having is on the action call for the partial view, both dates are null. I used the alert that is commented out to ensure that a date is actually being registered which it is. So I believe the problem has to do with the post back function .

The View:

<script type="text/javascript">

    function filterChange() {
        $("#log").ajaxError(function (event, jqxhr, settings, exception) {
            alert(exception);
        });

        var startValue = $('#filterStart').data('tDatePicker').value();
        var endValue = $('#filterEnd').data('tDatePicker').value(); 

        //alert('Index: ' + startValue + ',' + endValue);


        $.get('@Url.Action("DashboardPartial")',
        {  start: startValue, end: endValue
        }, function (data) {           
            $("#target").html(data);
        });

    }
</script>

<div style="width: 100%; height: 100%">
    <fieldset>     
        <legend>Filters</legend>
        <div>
            @using (Html.BeginForm())
            {                
            <div class="Filter-Div">                      
                    @Html.Telerik().DatePicker().Name("filterStart").Value((DateTime)@ViewBag.StartDate).ClientEvents(events => events.OnChange("filterChange"))             

            </div>
            <div class="Filter-Div">                  
                    @Html.Telerik().DatePicker().Name("filterEnd").Value((DateTime)@ViewBag.EndDate).ClientEvents(events => events.OnChange("filterChange")).TodayButton()

            </div>                
            }

        </div>
    </fieldset>  
    @(Html.Telerik().ScriptRegistrar()
    .DefaultGroup(group => group
                .Add("telerik.common.js")
                .Add("telerik.tabstrip.min.js")
                .Add("telerik.calendar.min.js"))
    .jQuery(false))  

<div id="target">
   @{ Html.RenderPartial("DashboardPartial"); }
</div>

The Controller

[OutputCache(Duration=5)]
        public PartialViewResult DashboardPartial( DateTime? start, DateTime? end)
        {

            db = new DashboardEntities();

            ViewBag.StartDate = start;
            ViewBag.EndDate = end;              

            var job = db.Job.where(Job=>Job.startDate > start && Job.endDate < end);                      

            return PartialView(prj);
        }

Answer 1

Are the startValue and endValue variables in your Javascript code of type Date? If that's the case, convert them to string like this:

<script type="text/javascript">

    function filterChange() {
        $("#log").ajaxError(function (event, jqxhr, settings, exception) {
            alert(exception);
        });

        var startValue = $('#filterStart').data('tDatePicker').value().toLocaleString();
        var endValue = $('#filterEnd').data('tDatePicker').value().toLocaleString(); 

        //alert('Index: ' + startValue + ',' + endValue);


        $.get('@Url.Action("DashboardPartial")',
        {  start: startValue, end: endValue
        }, function (data) {           
            $("#target").html(data);
        });

    }
</script>

Also, in your form, remove '@' before ViewBag.StartDate and ViewBag.EndDate:

<div class="Filter-Div">                      
 @Html.Telerik().DatePicker().Name("filterStart").Value((DateTime)ViewBag.StartDate).ClientEvents(events => events.OnChange("filterChange"))             
</div>
<div class="Filter-Div">                  
 @Html.Telerik().DatePicker().Name("filterEnd").Value((DateTime)ViewBag.EndDate).ClientEvents(events => events.OnChange("filterChange")).TodayButton()
</div>