Supply New Datasource to Existing Grid

[Coty]

I have a grid that is initialized with a datasource, then the user can choose different options from a form and get a new set of data that needs to be applied to the grid.  I can't load the entire dataset to the grid and just let the grid filter the data because the dataset would be too large so I need to set a brand new dataset each time (note: the number of columns and formatting should stay the same).  I have it working, EXCEPT, the date format does propagate.

Here is what I have:

function DisplayMeetingsGrid(myMeetings) {

        var grid = $("#grid").data("kendoGrid");

        if (typeof grid === 'undefined') {

            $("#grid").kendoGrid({
                dataSource: {
                    data: myMeetings,
                    schema: {
                        model: {
                                fields: {
                                    MeetingDate: { type: "date" }
                                }
                        }
                    },
                },
                groupable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    refresh: false,
                    pageSizes: [10, 20, 50, 100],
                    buttonCount: 5,
                    pageSize: 10,
                    input: true
                },
                columns: [{
                    field: "MeetingName",
                    title: "Name",
                    width: 220,
                    template: "<a href='/${URLBase}/meeting/view/${MeetingId}/'>${MeetingName}</a>",
                    filterable: true
                }, {
                    field: "MeetingDate",
                    title: "Date",
                    width: 90,
                    format: "{0:M/d/yyyy}",
                    filterable: {
                        ui: "datepicker"
                    }
                }, {
                    field: 'StartTime',
                    title: "Start Time",
                    template: "${StartTime} <a style='float: right;' data-mid='${MeetingId}' title='Add this Meeting to your calendar' class='ical iCalendarLink'>Add to your calendar</a>",
                    width: 108,
                    filterable: false
                }, {
                    field: "Location",
                    title: "Location",
                    width: 200,
                    filterable: true
                }, {
                    field: 'agenda',
                    template: kendo.template($("#agendas-template").html()),
                    title: "Agendas (Group)",
                    filterable: false,
                    sortable: false,
                    groupable: false
                }]
            });

        } else {

            //WHEN THIS CODE IS HIT, THE DATE FORMAT IS LOST!  <---------------
            $("#grid").data("kendoGrid").dataSource.data(myMeetings);

        }

}

 

Any help is appreciated.

 

 

[Coty]

Above it is supposed to say, "EXCEPT the date format does NOT propagate"

To give more clarity, the date initially appears correctly like this:

 6/4/2015

but when I load a new set of data to the grid it looks like this:

2015-06-04T00:00:00

 

[Alexander Valchev]

Hello Coty,

Please check the data method documentation:

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

"The schema.model configuration will not be used to parse the set data items. The data should be parsed in advance."

In other words the date will not be parsed automatically and respectively will not be formatted. The DataSource expects that the data passed to the data method is already parsed.

To resolve the issue you may parse manually date strings in myMeetings array.

• http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseDate

Regards,
Alexander Valchev
Telerik

 

 

[Coty]

Thanks for the Response Alexander,

 When I initialize the grid, you can see I use the schema to notify the grid that the MeetingDate field is of type date.  And then within the columns of the grid the date column has a format option ----> format: "{0:M/d/yyyy}

Just trying to figure out how the grid functions.  These settings, the schema, and the format of the fields are not saved after initialization of the first datasource, or when you apply a new datasource they are overwritten?

So the solution is to loop through my datasource records and parse the date the way I want it to look before adding the new datasource?

One other option i tried, but I couldnt get it to work, was to use a kendo datasource object instead of my JSON data.  I tried this:

var ds = new kendo.data.DataSource({
      data: myMeetings,
      schema: {
          model: {
              fields: {
                  MeetingDate: { type: "date" }
              }
          }
      }
  });

And then applying the datasource but it didn't seem to work.

[Dimo]

Hello Coty,

The documentation text should be understood like this:

The data() method of the DataSource should provide values in the expected data type, which corresponds to the data type defined in the schema.

In other words, if the initial data defines the dates as strings, the Grid dataSource will transform them into Javascript Date objects, which then can be formatted, according to the column format. However, if the dates are provided as strings in the data() method, then they will not be transformed, and the column format will not be applied.

The column format is not removed or overwritten when using the data() method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<link href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.web.min.js"></script>
</head>
<body>

<div id="grid"></div>

<p><button type="button" class="k-button" id="changeData">Change data</button></p>

<script>
    var sampleData = [
        {ProductID: 1, ProductName: "foo", Introduced: (new Date(2013, 8, 10)).toString(), UnitPrice: 525, Discontinued: false, UnitsInStock: 10},
        {ProductID: 2, ProductName: "bar", Introduced: new Date(2014, 2, 25), UnitPrice: 1425, Discontinued: false, UnitsInStock: 3},
        {ProductID: 3, ProductName: "baz", Introduced: new Date(2008, 10, 2), UnitPrice: 1431275, Discontinued: true, UnitsInStock: 0}
    ];
    var sampleData2 = [
        {ProductID: 4, ProductName: "foo 2 - string data", Introduced: (new Date(2014, 8, 19)).toString(), UnitPrice: 600, Discontinued: false, UnitsInStock: 11},
        {ProductID: 5, ProductName: "bar 2 - JS date", Introduced: new Date(2014, 8, 19), UnitPrice: 600, Discontinued: false, UnitsInStock: 11}
    ];

    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (e) {
                    e.success(sampleData);
                }
            },
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        Introduced: { type: "date" },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: [
                { field: "ProductName", title: "Mobile Phone" },
                { field: "Introduced", title: "Introduced", format: "{0:yyyy/MM/dd}", width: "200px" },
                { field: "UnitPrice", title: "Price", format: "{0:$#,.##}", width: "120px" },
                { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" }
            ]
        });

        $("#changeData").click(function(){
            $("#grid").data("kendoGrid").dataSource.data(sampleData2);
        });
    });
</script>

</body>
</html>

Regards,
Dimo
Telerik

 

 

[Coty]

Thanks for the great response and explanation.  My issue is indeed that my datasource initializes with a javascript date, and my second datasource has a date set to string.  (So my bug is happening before the data hits the grid as stated above)  I haven't figured out WHY that is happening yet, both AJAX calls go to the same controller, same function, same LINQ statement.  Even Fiddler shows the same date\format being returned from the server to the Client.  But for some reason the client is converting one date to a string even though it's the same data being sent to the server, using the same script and function.  The only difference is the one call precedes the other.  

I can solve my issue by looping through my datasource and casting the string to a date - so that is what I will do for now, just would rather not have to do that  obviously.

 Again, thanks for the great response/help.

Coty