Data not binding to grid

2 posts, 0 answers
  1. Lisa
    Lisa avatar
    1 posts
    Member since:
    Oct 2017

    Posted 12 Oct 2017 Link to this post

    I am attempting to load a local JSON data source to the Kendo grid. I have confirmed the data is available at the time the grid function is called, and there are no errors in the console. I've confirmed in the debugger that the data is present in the grid function as well. 

    My HTML:

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

    My scripting:

    function buildGrid() {
        $("#grid").kendoGrid({
             dataSource: {
              data: kendoGridData,
              pageSize: 20,
              schema: {
                data: "ExecutesqlJSON",
                model: {
                  fields: {
                      "CHILD__POSTN_KEY": {type: "number"},
                      "REGION_CD": {type: "string"},
                      "TERR_CD": {type: "string"},
                      "MKT_CD": {type: "string"},
                      "NAME": {type: "string"},
                      "RNT_AUTO_QUOTE_CNT": {type: "string"},
                      "RNT_PROPERTY_QUOTE_CNT": {type: "string"},
                      "RNT_AUTO_WITH_PROPERTY_QUOTE_PCT": {type: "string"},
                      "RNT_PROPERTY_BOUND_QUOTE_CNT": {type: "string"},
                      "RNT_PROPERTY_BOUND_QUOTE_PCT": {type: "string"},
                      "OWN_AUTO_QUOTE_CNT": {type: "string"},
                      "OWN_PROPERTY_QUOTE_CNT": {type: "string"},
                      "OWN_AUTO_WITH_PROPERTY_QUOTE_PCT": {type: "string"},
                      "OWN_PROPERTY_BOUND_QUOTE_CNT": {type: "string"},
                      "OWN_PROPERTY_BOUND_QUOTE_PCT": {type: "string"},
                      "TOT_AUTO_QUOTE_CNT": {type: "string"},
                      "TOT_PROPERTY_QUOTE_CNT": {type: "string"},
                      "TOT_AUTO_WITH_PROPERTY_QUOTE_PCT": {type: "string"},
                      "TOT_PROPERTY_BOUND_QUOTE_CNT": {type: "string"},
                      "TOT_PROPERTY_BOUND_QUOTE_PCT": {type: "string"},
                  }
                }
              }
            },
            height: 550,
            groupable: false,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [ {
              title: "Hierarchy Information",
                  columns: [
                    {field: "REGION_CD", title: "Region"},
                    {field: "TERR_CD", title: "Territory"},
                    {field: "MKT_CD", title: "Market"},
                    {field: "NAME", title: "Agency Name", width: 200}
                  ]
                },
                {
              title: "Prospects Who Rent",
                 columns: [
                   {field: "RNT_AUTO_QUOTE_CNT", title: "Auto Quotes"},
                   {field: "RNT_PROPERTY_QUOTE_CNT", title: "Bundled Renters Quotes"},
                   {field: "RNT_AUTO_WITH_PROPERTY_QUOTE_PCT",title: "Bundled %"},
                   {field: "RNT_PROPERTY_BOUND_QUOTE_CNT", title: "Renters Policies Bound"},
                   {field: "RNT_PROPERTY_BOUND_QUOTE_PCT",title: "Bound Renters %"}
                 ]
               },
               {
              title: "Prospects Who Own",
                 columns: [
                   {field: "OWN_AUTO_QUOTE_CNT",title: "Auto Quotes"},
                   {field: "OWN_PROPERTY_QUOTE_CNT",title: "Bundled Home/Condo Quotes"},
                   {field: "OWN_AUTO_WITH_PROPERTY_QUOTE_PCT", title: "Bundled %"},
                   {field: "OWN_PROPERTY_BOUND_QUOTE_CNT", title: "Home/Condo Policies Bound"},
                   {field: "OWN_PROPERTY_BOUND_QUOTE_PCT", title: "Bundled %"},
                 ]
             },
            {
              title: "Total",
              columns: [
                {field: "TOT_AUTO_QUOTE_CNT", title: "Auto Quotes"},
                {field: "TOT_PROPERTY_QUOTE_CNT", title: "Bundled Property Quotes"},
                {field: "TOT_AUTO_WITH_PROPERTY_QUOTE_PCT", title: "Bundled %"},
                {field: "TOT_PROPERTY_BOUND_QUOTE_CNT", title: "Property Policies Bound"},
                {field: "TOT_PROPERTY_BOUND_QUOTE_PCT", title: "Bundled %"}
              ]
            }
          ]
        });
      }

    Sample of JSON data:

    {  
       "ExecutesqlJSON":[  
          {  
             "CHILD__POSTN_KEY":60000048485051,
             "REGION_CD":"002",
             "TERR_CD":"3",
             "MKT_CD":null,
             "NAME":"JANE DOE",
             "LSP_NAME":null,
             "EMP_CD":"JDOE",
             "CHILD_POSTN_LEVEL__OPTION_CD":"TAM",
             "REPORT_DATE":"\/Date(1499832000000)\/",
             "RNT_AUTO_QUOTE_CNT":489,
             "RNT_PROPERTY_QUOTE_CNT":153,
             "RNT_AUTO_WITH_PROPERTY_QUOTE_PCT":31.2883,
             "RNT_PROPERTY_BOUND_QUOTE_CNT":39,
             "RNT_PROPERTY_BOUND_QUOTE_PCT":25,
             "OWN_AUTO_QUOTE_CNT":773,
             "OWN_PROPERTY_QUOTE_CNT":490,
             "OWN_AUTO_WITH_PROPERTY_QUOTE_PCT":63.3894,
             "OWN_PROPERTY_BOUND_QUOTE_CNT":106,
             "OWN_PROPERTY_BOUND_QUOTE_PCT":21,
             "TOT_AUTO_QUOTE_CNT":1262,
             "TOT_PROPERTY_QUOTE_CNT":643,
             "TOT_AUTO_WITH_PROPERTY_QUOTE_PCT":50.9509,
             "TOT_PROPERTY_BOUND_QUOTE_CNT":145,
             "TOT_PROPERTY_BOUND_QUOTE_PCT":22
          }
       ]
    }

     

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 16 Oct 2017 Link to this post

    Hello, Lisa,

    Thank you for providing the code.

    The configuration and the data format seems good.

    I made a Dojo example and it is working as expected:

    http://dojo.telerik.com/urOWa

    Just before loading the Grid, please log the kendoGridData in the console, to ensure that the data is available:

    function buildGrid() {
     console.log(kendoGridData)
        $("#grid").kendoGrid({
             dataSource: {
              data: kendoGridData,

    If the issue still occurs, please provide a fully runnable example reproducing the issue and I will gladly assist.



    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top