DataBound to remote data

[Dr.YSG]

I have a Grid bound to a remote JSON data source. Works great.

But when I try to bind the chart below to the same datasource, The entire application stops working (I only see  the blue background of the page).

1. Is there a way to turn off autobinding (like a grid) so that I can step through and see what is going on?
2. How would I do a late binding (given that I have the handle  = $(#chart).kendoChart().

Did I do something wrong in creating this chart?

function buildChart() {
    $("#chartPane").kendoChart({
        title: {
            text: "Type by Distributor"
        },
        dataSource: {
            data: queryData
        },
        seriesDefaults: {
            type: "column"
        },
        series: [{
            field: "size",
            name: "size"
        }],
        categoryAxis: {
            field: "distributor",
            labels: {
                rotation: -90
            }
        }
    });
}

[Alexander Valchev]

Hi Steven,

Your code snippet looks ok, however I cannot see the definition of the dataSource - please verify that you have defined the right schema and transport objects.

As for your other questions, it is possible to turn off the auto binding through autoBind: false option of the chart. You could read the dataSource later, using the following code:

$("#chart").data("kendoChart").dataSource.read();

I hope this information helps.

Kind regards,
Alexander Valchev
the Telerik team

[Dr.YSG]

Thank you alex,

I am going to post both the grid and the datasource, Since I don't think the datasource provides enough info about the structure of the data.

function buildQuery() {

    queryData = new kendo.data.DataSource({

        type: "json",

        pageSize: 4,

        transport: {

            read: {

                url: "http://ysg4206/CatalogService/CatalogService.svc/SearchBoxADO",

                dataType: "json"

            }

        },

        schema: {

            data: "results",

            total: "count"

        },

        error: function (e) {

            alert("search data error happened: " + e)

        },

        change: function (e) {

            newData(e);

        }

    });

}

function buildGrid() {

    $("#gridPane").kendoGrid({

        pageable: true,

        scrollable: true,

        selectable: "multiple, row",

        groupable: true,

        sortable: true,

        dataSource: queryData,

        columns: [{

            field: "idx",

            title: "ID"

        }, {

            field: "classification",

            title: "classification"

        }, {

            field: "creator",

            title: "creator"

        }, {

            field: "date",

            title: "date"

        }, {

            field: "elevation",

            title: "elevation"

        }, {

            field: "datum",

            title: "datum"

        }, {

            field: "size",

            title: "size"

        }, {

            field: "type",

            title: "type"

        }, {

            field: "description",

            title: "description"

        }, {

            field: "dirLocation",

            title: "dirLocation"

        }, {

            field: "distributor",

            title: "distributor"

        }, {

            field: "egplDate",

            title: "egplDate"

        }, {

            field: "handling",

            title: "handling"

        }, {

            field: "product",

            title: "product"

        }, {

            field: "bbox",

            title: "bbox"

        }, {

            field: "uniqID",

            title: "uniqID"

        }

        ]

    });

    catalogGrid = $("#gridPane").data("kendoGrid");

}

One thing that I have not seen in the documentation (but might be scattered in the examples) is how to manually fetch new data from the server, and then do a refresh of all viewers (grid and chart). This is what I am doing right now, but I am confused on when to bind to values to attributes on the GRID and when I can just set them:

function doSearch() {

    var bounds = googleMap.getBounds().toString();

    searchBox = { requestBox: bounds };

    queryData.read(searchBox);

    $("#recCount").text(queryData.total());

    catalogGrid.dataSource = queryData;

}

 

function newData(e) {

    $("#recCount").text(queryData.total());

    //catalogGrid.dataSource = queryData;

    // catalogGrid.bind("dataSource", queryData);

    catalogGrid.refresh();

[Alexander Valchev]

Hi Steven,

I believe the problem is caused by the way you pass the dataSource object to the chart widget. 

//your grid configuration
dataSource: queryData //correct

//your chart configuration
dataSource: {
    data: queryData //wrong - queryData is a dataSource, not an array of objects
}

As a general information, please note that you did not defined the model of the schema. Although it might work without it, it is recommended not to omit this configuration - it describes the model of the data, type of the fields, etc. That information is important for features like filtering, sorting and editing.

Greetings,
Alexander Valchev
the Telerik team

[Dr.YSG]

Well, I no longer get the complete crash problem. I.,e, by setting autoBind: false, and changing the datasource as suggested the chart (and grid) now populate each time I do a read().

The Grid is working fine.

The Chart is not working correctly. I have 500 records (or so) in the DataSource. The schema is:

        schema: {
            data: "results",
            total: "count"
        },

and data is of the form
[

{ "elevation":0,"handling":"Limited Distribution","idx":5782539,"product":"xx44023",
"size":298235,"type":"JPG","source":"google", ....} ]

I.e. there are about 16 fields, mostly text, a few numbers, and two dates (currently string).

I have not really seen any examples (and documentation is thin) about how to describe the model for 
this sort of schema.

What I can tell you is that without the model, what I see is a X-Y column chart, where the Y axis is
the size (seems correct) but the X (or category axis) has 500 rotated labels (there are really on 16
distinct values).

I would love to also do some charting that did some aggregates. I have.
The documentation at: http://www.kendoui.com/documentation/framework/datasource/methods.aspx is also
weak about how to create a aggregate and then map that to chart series value.

Things I am looking to do is simple charts of counts of imageType=JPG, PNG, etc. (the type field), counts
of images by source (a text field) etc.)

[Alexander Valchev]

Hello Steven,

You can find an information and examples explaining how to define the schema configuration in the corresponding documentation. In your case you have to simply identify the type of the fields (string, number, date) - for example:

schema: {
    model: {
        fields: {
            elevation: { type: "number" },
            handlign: { type: "string" },
            //... etc
            type: { type: "string" }
        }
    }
}

As for your other questions, I am afraid that currently charts cannot be bind to dataSource aggregate fields out of the box. As a workaround I suggest to create the series array manually (using dataSource aggregates) and pass it to the chart configuration. In this jsFiddle you can find an example illustrating the suggested approach.

Regards,
Alexander Valchev
the Telerik team

[Dr.YSG]

My dates are not sorting properly in the grid. Did I do something wrong. (they go up, then down, and then back up. All other fields sort properly. The dates look fine, but the sorting is off.

model: {

    fields: {

        idx: { type: "string" },

        classification: { type: "string" },

        creator: { type: "string" },

        date: { type: "date" },

        elevation: { type: "number" },

        datum: { type: "string" },

        size: { type: "number" },

        type: { type: "string" },

        description: { type: "string" },

        dirLocation: { type: "string" },

        distributor: { type: "string" },

        egplDate: { type: "date" },

        handling: { type: "string" },

        product: { type: "string" },

        uniqID: { type: "string" }

    }

}

[Alexander Valchev]

Hello Steven,

Your model configuration looks OK, can you confirm that the date fields contains a valid JavaScript date objects?

Could you please provide more information about the problem. I am not sure that I understood it - the date fields are sorting ascending and descending properly, but not returning to unordered state on the third click?

Kind regards,
Alexander Valchev
the Telerik team

[Dr.YSG]

Sorry for not being clear.

When I sort the by the date column, the rows are still not sorted by date.

Row 1: the year is 1911
Row 2: the year is 2008
Row 3: the year is 2005
Row 4: the year is 2011

etc.
Changing from ascending to descending resorts, but the dates are still all in bogus order.

I don't have an easy way of clipping a column, but let me tell you another detail. The JSON data is being sent from a windows 7 WCF data service. At first I tried this with the DateTime values converted to .ToString()

Here is some of the JSON captured in Fiddler:

... "date":"8\/3\/2006 3:24:16 AM","datum":"WGS_1984", ...
... "date":"8\/3\/2006 3:24:11 AM","datum":"WGS_1984", ...
...  "date":"3\/4\/1911 4:44:22 AM","datum":"WGS_1984", ...

Sorry I can't send you the full JSON, there are things that are not for public distribution


Actually at first I tried sending the DateTime values (serialized by the WCF JSON serializer) directly. This is the form of JSON it sent
for date values:

"date":"\/Date(1154589867000-0400)\/","datum":"WGS_1984",

But even though the model says that date is a date, it is still failing.

And in this case, the Grid also cannot properly display the date. it shows it as /Date(1154589867000-0400 which is less pleasing that convering to the string.

I realize that sorting a date as string is not going to lead to good results, but the DateTime serialized to to JSON is not working correctly for me out of the box. I suspect I am missing a template somewhere.

[Alexander Valchev]

Hi Steven,

Since the WCF date format is not explicitly converted, you need to do that manually in the parse function of the schema. Once you've got a valid JavaScript date objects in the dataSource, the sorting functionality should be working as expected.

Greetings,
Alexander Valchev
the Telerik team

[Dr.YSG]

It was a lot easier, and less processor intensive given the size of the grid, to do the datetime formatting on the server:

date = reader.GetDateTime(2).ToString("s"),

This returns a ISO 8601 date:

"2011-10-10T14:48:00 (date and time)

[Sumit]

Hello,

1. I have problem with search.
I am getting data from remote DS and my search is not at all working.

Can you please provide me any example where if I clieck on search button it must show me the result in grid?

2. When I am trying to display date it does not dispaly in grid.
I had tried different different format but did not worked.
Below are the fomates I tried but we no luck,
{ type: "Date", title: "Release Date"}
{ type: "Date", title: "Release Date", format: "{0:MM/dd/yyyy}" },
{ type: "Date", title: "Release Date", template: '#= kendo.toString(ReleaseDate,"MM/DD/YYYY") #' }
There 2 different Date type fields Release Date and Due Date and value comes in grid is "null".
All the fields other then dates are coming in grid with no issues.

I am new to Kendo UI and HTML as well.
your help will be much appreciated.

Thanks,
Sumit Purothi.

[Engifaar]

How to get distinct value from datasource in grid kendoGrid?