Bind JSON to Grid issue

6 posts, 0 answers
  1. Aleksejs
    Aleksejs avatar
    10 posts
    Member since:
    Aug 2010

    Posted 12 Sep 2012 Link to this post

    Hello guys!
    Basically, what I want is just to bind json formatted First and Last names to grid.
    Hers is my datasource : http://10.50.0.106/DLC/api/grid?format=json
    result ====>
    http://10.50.0.106/DLC/api/grid?format=json
    {"Result":{"FirstName":"coder","LastName":"coder"}}

    Here is how I'm trying to bind it to grid:

     $("#grid").kendoGrid({
                                    dataSource: {
                                        type: "jsonp",
                                        transport: {
                                            read: {
                                                url: "http://10.50.0.106/DLC/api/grid?format=json",
                                                dataType: "jsonp"

                                            }
                                        },
                                        pageSize: 1
                                    },
                                    schema: {
                                        model: {
                                            fields: {
                                                FirstName: { type: "string" },
                                                LastName: { type: "string" }
                                            }
                                        }
                                    },
                                    columns: [{
                                        field: "FirstName",
                                        width: 90,
                                        title: "First Name"
                                    }, {
                                        field: "LastName",
                                        width: 90,
                                        title: "Last Name"
                                    }]
                                });

    As result I see blank grid with headers.
    I receive no errors, warnings or exceptions. Can someone tell me what am I missing or doing wrong?
    This actually drives me crazy =)

  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 12 Sep 2012 Link to this post

    Hello Aleksejs:

    As far as I see in the format of the response you have FirstName and LastName inside a Result field. Is this correct?
    What do you receive from the server:
    1. one of these records with an array of Result on it?
    2. many of these records with one single Result each?
    3. one record with one result? 
    Any way the problem is that you are trying to display FirstName when it seems that you should be displaying Result.FirstName.
  3. Kendo UI is VS 2017 Ready
  4. Aleksejs
    Aleksejs avatar
    10 posts
    Member since:
    Aug 2010

    Posted 13 Sep 2012 Link to this post

    OnaBai, thanks for your reply.

    I have tested your guess about changing fields definition, but it didn't worked.
    But, you reminded me that I'm returning single object instead of list of them.

    And I simplified grid's definition, and added Schema definition now it looks like:
                $("#grid").kendoGrid({
                    dataSource: {

                        transport: {
                            read: {
                                url: "http://10.50.0.106/DLC/api/grid?format=json",
                                dataType: "jsonp"
                            }
                        }
                        ,
                        schema: {
                            data: "Result"
                        }
                    }
                });


    FINALLY, it works, somehow...
  5. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 13 Sep 2012 Link to this post

    Really not "somehow". Saying that schema.data is Result you are returning "just" what is in the Result field of your JSON answer. If you would have returned Result as an array of {"FirstName":"coder","LastName":"coder"}, something like:
    {
        "Result": [
            {"FirstName":"coder1","LastName":"coder1"},
            {"FirstName":"coder2","LastName":"coder2"},
            {"FirstName":"coder3","LastName":"coder3"}
        ]
    }
    It would have worked too!
    So, the important thing is that read should return an array that exactly maps into the data that you were about to use.

  6. Ravi
    Ravi avatar
    1 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2012 Link to this post

     Hi, 
    I am using asp.net mvc3 and getting a problem in grid.My grid is not binding data from data base as well as is not editing or updating data in database.
    Please help me out asap.
    thanks in advance.
    Code of view:

      <div id="example" class="k-content">
                <div id="grid"></div>
                
                <script>
                    $(document).ready(function () {
                        var crudServiceBaseUrl = "http://localhost:3160/api",
                            dataSource = new kendo.data.DataSource({
                                transport: {
                                    read: {
                                        url: crudServiceBaseUrl + "/DynamicPageEdit",
                                        dataType: "json"
                                    },
                                    update: {
                                        url: crudServiceBaseUrl + "/Products/Update",
                                        dataType: "jsonp"
                                    },
                                    destroy: {
                                        url: crudServiceBaseUrl + "/Products/Destroy",
                                        dataType: "jsonp"
                                    },
                                    create: {
                                        url: crudServiceBaseUrl + "/Products/Create",
                                        dataType: "jsonp"
                                    },
                                    parameterMap: function (options, operation) {
                                        if (operation !== "read" && options.models) {
                                            return { models: kendo.stringify(options.models) };
                                        }
                                    }
                                },
                                batch: true,
                                pageSize: 30,
                                schema: {
                                    model: {
                                        id: "DynamicPageEditId",
                                        fields: {
                                            PageName: { editable: true, nullable: true },
                                            PageDesc: { validation: { required: true} },
                                            PageTitle: { type: "nvarchar(300)", validation: { required: true, min: 1} },
                                            PageDesc: { validation: { required: true} },
                                            Keywords: { type: "nvarchar(300)", validation: { min: 0, required: true} }
                                        }
                                    }
                                }
                            });


                        $("#grid").kendoGrid({
                            dataSource: dataSource,
                            pageable: true,
                            height: 400,
                            toolbar: ["create"],
                            columns: [
                               
                                 { field: "PageName", title: "Page Name", width: "100px" },
                                 { field: "PageTitle", title: "Page Title", width: "100px" },
                                 { field: "PageDesc", title: "Page Description", width: "100px" },
                                 { field: "Keywords", title: "Keywords", width: "100px" },
                                 { command: ["edit", "destroy"], title: "&nbsp;", width: "210px"}],
                            editable: "inline"
                        });
                    });
                </script>
            
            
              </div>
            
                    
             Code of model:
          
     using System.Data.Entity;

    namespace myapp.Models
    {
        public class myappDB : DbContext
        {
           public DbSet<DynamicPageEdit> DynamicPageEdits { get; set; }
         
        }
    }
    Code of controller:
    public ActionResult DynamicPageEdit()
            {
                return View();
            }
    Table name in data-base:DynamicPageEdits  
    Fields Of table:
    PageName 
    PageTitle 
    PageDesc
    Keywords 
     





  7. Muhammad
    Muhammad avatar
    4 posts
    Member since:
    Nov 2010

    Posted 07 Nov 2012 Link to this post

    read: {
                                        url: crudServiceBaseUrl + "/DynamicPageEdit",
                type: "POST"

                                        //dataType: "json"
                                    },


    Add this code ur problem will  be solve
Back to Top
Kendo UI is VS 2017 Ready