pass a parameter to a datasource

[Shane P]

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! 

[Rosen]

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

[Shane P]

Hi Rosen,

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

@{

    ViewBag.Title = "Home Page";

}

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>

 

<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

[Rosen]

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

[Shane P]

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!

[Rosen]

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

[Mangesh]

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

[raj]

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...

[RamaKrishna P]

I am also having the same problem with chart control...