pass a parameter to a datasource

Thread is closed for posting
9 posts, 1 answers
  1. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 04 Jan 2012 Link to this post

    I am having some troubles passing value from a grid to a function that builds a kendo datasource.

    My function asks for parm that is the selected rows first cell.

    I have this so far
    function createGrid(parm) {
               
              console.log("parm value = " + parm);
               
              var sharableDataSource = new kendo.data.DataSource({
                  transport: {
                      read: {
                          url: "/GetInfo/",
                          data:{dataParm:parm}
                      },
                       
              schema:
              {
    dataParm:parm

             }
              }});

    Im using mvc3 as my server service however when I add a breakpoint to the controller the parameter is always null.
    The console.log is returning the value I am expecting to see in the controller however the parameter isn't sent to the server.

    What am I doing wrong?

    Any tips would be appreciated! 
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 04 Jan 2012 Link to this post

    Hi,

    Unfortunately, the provided information is not sufficient in order to track the cause for the described behavior. Therefore, could you please provide a small sample in which the observed behavior can be observed locally?

    Regards,
    Rosen
    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. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 04 Jan 2012 Link to this post

    Hi Rosen,

    I am using mvc3. I created a new project with my home view looking like

    @{
        ViewBag.Title = "Home Page";
    }
     
    <h2>@ViewBag.Message</h2>
     
    <div id="grid"></div>
    <div id="grid2"></div>
    <script>
        $(document).ready(function () {
     
            var movies = [
                            { "rank": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption" },
                            { "rank": 2, "rating": 9.2, "year": 1972, "title": "The Godfather" },
                            { "rank": 3, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
                            { "rank": 4, "rating": 8.9, "year": 1966, "title": "Il buono, il brutto, il cattivo." },
                            { "rank": 5, "rating": 8.9, "year": 1994, "title": "Pulp Fiction" },
                            { "rank": 6, "rating": 8.9, "year": 1957, "title": "12 Angry Men" },
                            { "rank": 7, "rating": 8.9, "year": 1993, "title": "Schindler's List" },
                            { "rank": 8, "rating": 8.8, "year": 1975, "title": "One Flew Over the Cuckoo's Nest" },
                            { "rank": 9, "rating": 8.8, "year": 2010, "title": "Inception" },
                            { "rank": 10, "rating": 8.8, "year": 2008, "title": "The Dark Knight" }
                        ];
     
             $("#grid").kendoGrid({
                            dataSource: {
                                data: movies
                            },
                            height: 360,
                      
                    selectable: "row",
                      change:selectRow,   
                            columns: [ {
                                    field: "rank",
                                    width: 90,
                                    title: "Rank"
                                } , {
                                    field: "title",
                                    width: 90,
                                    title: "Title"
                                }
                            ]
                        });
     
     
                        });
     
                        function selectRow(e) {
                            var selected = $.map(this.select(), function (item) {
                                return $(item.cells[0]).text();
                            });
                            console.log("selected row cell 0 :" + selected);
                            createGrid(selected);
                        }
        function createGrid(selectedCell) {
            var sharableDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Home/GetInfo/",
                        data: { number: selectedCell }
                    }
                }
            });
     
     
     
            $("#grid2").kendoGrid({
                dataSource: sharableDataSource,
                sortable: true
     
     
            });
        }
     
    </script>

    My controller that is called is pretty basic

    public ActionResult GetInfo(string number)
           {
               var names = new string[] {"Bob", "Sarah", "Jane"};
               return Json(names, JsonRequestBehavior.AllowGet);
           }
    my number parameter is always shown as null.

    Does this provide enough info?

    Thanks
  5. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 05 Jan 2012 Link to this post

    Hello,

    Looking at the provided sample it seems that you are passing an array but expecting single value. Thus the following change should correct the issue:

    var sharableDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Home/GetInfo/",
                data: { number: selectedCell[0] }
            }
        }
    });

    However, I have noticed that you are creating new Grid and DataSource on every row selection, which should be avoided. More appropriate implementation is to use a single grid and just refresh the data based on the selection in the parent grid. Similar to the following:


    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 09 Jan 2012 Link to this post

    Sorry for the late reply but thanks Rosen!

    If the sharableDatasource was returning a viewmodel how would I be able to render that in the grid.

    My json is returning a view model so when a user clicks on the grid I want to be able to populate the grid with all ratings but I also somehow want to display the MovieModel data
    {
        "MovieData": {
            "MovieModel": {
                "id": 1,
                "rating": 9.2,
                "year": 1994,
                "title": "The Shawshank Redemption"
            },
            "RatingsModel": [
                {
                    "id": 1,
                    "comment": "Good"
                },
                {
                    "id": 1,
                    "comment": "So so"
                },
                {
                    "id": 1,
                    "comment": "Awesome!!"
                },
                {
                    "id": 1,
                    "comment": "Rubbish"
                }
            ]
        }
    }

    How would I use your example with a vm?

    Would I use the kendo template for the details information?

    Thanks Rosen!
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 10 Jan 2012 Link to this post

    Hi Shane,

    As you may know, the DataSource expects the data which it will represent to be an array. Thus, you should use the schema to define where this collection of data is within the response from the server using the data setting. Note that after DataSource is populated from the response, the rest of the server result will be discarded. Thus, accessing other parts of the response through the DataSource is not possible.

    In your scenario you may consider using a external AJAX request (for example through jQuery.ajax) use the MovieModel portion (i.e. by rendering a template) and populate the DataSource locally with the RatingsModel part.

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Mangesh
    Mangesh avatar
    16 posts
    Member since:
    Sep 2011

    Posted 31 Jan 2012 Link to this post

    Hi,

    I'm also facing the same problem i.e. parameter passes is always null. In my case, I have 2 date pickers (Range selectors), After selecting dates and clicking on submit button, I'm passing those dates values as parameter.

    Following is my code :-

    <label for="start">
                        Start date:</label>
                    <input id="start" />
                    <label for="end" style="margin-left: 3em">
                        End date:</label>
                    <input id="end" />
                    <button id="undo" class="k-button">
                        Submit</button>
                    <div id="grid">
                    </div>


    var dataSource3 = new kendo.data.DataSource({
                        type: "json",
                        transport: {
                            read: {
                                type: "POST",
                                url: "GetDocumentType.asmx/GetDocs",
                                contentType: 'application/json; charset=utf-8',
                                datatype: "json",
                                data: {
                                             startDate:  $("#start").data("kendoDatePicker").value(),
                                             endDate: $("#end").data("kendoDatePicker").value()
                                      } // data

                            }, //read
                            parameterMap: function (options) {
                                return JSON.stringify(options);
                            } // parameterMap
                        }, // transport
                        serverFiltering: true,
                        serverSorting: true,
                        pageSize: 10,
                        schema: {
                            data: "d",
                            total: function (result) {
                                result = result.d || result;
                                return result.length;
                            } //total
                        } // schema
                    }); //datasource



    $("#undo").click(function () {
                        dataSource3.read();      
                    }); // undo button click


    Why doesn't it take values of datepickers?

    Regards,
    Mangesh
  9. raj
    raj avatar
    5 posts
    Member since:
    Nov 2011

    Posted 03 Feb 2012 Link to this post

    Hello
         I have a requirement where I ll do a $.ajax call and then store the ajax call response to a kendo datasource...like below
       $.ajax({
                    url: url,              
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (responsedatas) {
                         ///I got datas here..If i put debugger im able to see the datas
                          var KendoSource = new kendo.data.DataSource({ data: responsedatas});
                           $("#grid").kendoGrid({
                        dataSource: {
                            data: KendoSource
                        },
                        height: 360,
                        groupable: false,
                        scrollable: false,
                        sortable: false,
                        pageable: false,
                        columns: [{
                            field: "ContactID",

                            title: "ContactID"
                        }]
                    });
                    }
                });

    If i do the above code...My grid doesn't have datas... If i give the responsedatas directly to the grid data..IM able to get the grid properly..But i wanna use kendosource..I was testing this kendosource to work..I have lots of requirements on kendosource...


  10. RamaKrishna P
    RamaKrishna P avatar
    7 posts
    Member since:
    Jun 2010

    Posted 29 Apr 2013 Link to this post

    I am also having the same problem with chart control...
Back to Top
Kendo UI is VS 2017 Ready