SlickGrid dynamically building cols from dates error

Question

I am trying to take a start date and and end date from a datapicker, then use the start date and enddate to create a list of column dates, when I hardcode the dates in this works fine, however when I try and get the dates from the date pickers they both return null, here is some code (I am also using MVC3 and Razor, but I think this is a JS thing I am doing wrong.).

using (Html.BeginForm("Index", "Home", FormMethod.Post))
{

<p>
    Start Date:
    <input id='datepicker' name='datepicker' style="width: 85px">
    End Date:
    <input id='datepickerend' name='datepickerend' style="width: 85px">
    @Html.ListBox("teamID", (SelectList)ViewBag.Teams, "--Select a Team--")
    @Html.DropDownList("dealID", (SelectList)ViewBag.Deals, "--Select a Deal--")
    <input type="submit" value="Filter" id="btnFilter" />
</p>}



<script type="text/javascript">

function FormatUkDate(dateStr) {
    dateStr = dateStr.split("/");
    return new Date(dateStr[2], dateStr[1] - 1, dateStr[0]);
}
</script>
<script type="text/javascript">
Date.prototype.addDays = function (days) {
    var dat = new Date(this.valueOf())
    dat.setDate(dat.getDate() + days);
    return dat;
}

function getDates() {
    //        var StartDate = new Date(FormatUkDate($('#datepicker').value));
    //        var EndDate = new Date(FormatUkDate($('#datepickerend').value));
    var StartDate = $('#datepicker').val();
    var EndDate = $('#datepickerend').val();

    var dateArray = new Array();
    while (StartDate <= EndDate) {
        dateArray.push(StartDate)
        StartDate = StartDate.addDays(1);
    }
    return dateArray;
}

</script>


<script>
var daterange = getDates();
var grid;
var colsArray = new Array();
var columns = [
 {
     id: "Name", name: "Name", field: "Name"
 }
  ];
for (i = 0; i < daterange.length; i++) {
    var a = daterange[i].toString()
    a = a.substring(0, 10);
    columns.push({ id: a.valueOf(), name: a.valueOf(), field: a.valueOf() });
}
var options = {
    enableCellNavigation: true,
    enableColumnReorder: true
};

$(function () {
    var myData = [];

    $.getJSON('/Home/getm', function (data) {
        myData = data;
        grid = new Slick.Grid("#myGrid", myData, columns, options);
    });
});
</script>

Where are you initialising the datepickers with a call to `.datepicker()` ? — njr101, Jul 19 '12 at 15:07
Can you post a js fiddle? You're right, this has nothing to do with MVC so you can just use static html. — njr101, Jul 19 '12 at 15:30
was putting it in a fiddle ( though not sure how I would have got the slickgrid in) .. but found the issue... its was to do with the order I was doing things. — chris, Jul 23 '12 at 11:11
Glad you found the problem. For what it's worth, if you need to post SlickGrid problems in future with jsfiddle you can use the "manage resources" item on the left-hand side. See an example here : http://jsfiddle.net/3PmM4/ — njr101, Jul 23 '12 at 11:37

score 0 · Accepted Answer · answered Jul 23 '12 at 11:13

0

The problem was fixed by altering the button to with slickme building the grid, and more importantly calling some Ajax which passed the date picker values across fine.

answered Jul 23 '12 at 11:13

chris

551
1
13
32

SlickGrid dynamically building cols from dates error

1 Answers1