DataBound to remote data

13 posts, 3 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 23 Mar 2012 Link to this post

    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
                }
            }
        });
    }
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 26 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 26 Mar 2012 Link to this post

    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: {
                    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();
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 27 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 29 Mar 2012 Link to this post

    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.)
    
    
    
    
    
    
    
    
  7. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 02 Apr 2012 Link to this post

    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" }
        }
    }
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 03 Apr 2012 Link to this post

    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.



  11. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 04 Apr 2012 Link to this post

    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)

  13. Sumit
    Sumit avatar
    2 posts
    Member since:
    Apr 2012

    Posted 04 Apr 2012 Link to this post

    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.
  14. Engifaar
    Engifaar avatar
    15 posts
    Member since:
    May 2012

    Posted 02 Jun 2012 Link to this post

    How to get distinct value from datasource in grid kendoGrid?
Back to Top
Kendo UI is VS 2017 Ready