Newbie Grid binding question.

[Greg]

Hello 

Firstly, excuse any errors in the code. JQuery is new to me.

The data is coming back from the server in Json(result). Now I need to bind it to the grid (and obviously the way I am trying to do it is not working). Do I need to specify a schema for the dataSource? Can this not be "read" from the Json data?

<script>
    $(document).ready(function () {
        function CallParameters() {
            this.StringDate;
            this.Contractid;
            this.InvoiceNo;
        }


        function GetDays() {
            var url = "/Invoice/GetBusinessDays/";
            var callParameters = new CallParameters();
            callParameters.StringDate = $("#monthpicker").val();
            callParameters.ContractID = $("#ContractID").val();
            callParameters.InvoiceNo = $("#InvoiceNumber").val();


            $.post(url, callParameters, function (data, textStatus) {
                GetDaysCallComplete(data);
            });
        }


        function GetDaysCallComplete(result) {
            var ds = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "json"
                    }
                }
            });
            ds.data.add(result);
            $("#grid").data("kendoGrid").dataSource.read();
        }


        $("#bizdays").click(function (event) {
            event.preventDefault();
            GetDays();
        });






        // create DatePicker from input HTML element
        $("#invoicedate").kendoDatePicker({
            value: new Date(),
            format: "dd MMM yyyy",
            animation: {
                open: {
                    effects: "fadeIn", duration: 300, show: true
                }
            }
        });


        $("#monthpicker").kendoDatePicker({
            value: new Date(),
            // defines the start view
            start: "year",
            // defines when the calendar should return date
            depth: "year",
            // display month and year in the input
            format: "MMMM yyyy"
        });




        $("#grid").kendoGrid({


            autoBind: false,
            dataSource: ds,
            height: 500,
            scrollable: true,
            selectable: true,


            columns: [{
                field: "RowDetail",
                width: 90,
                title: "Detail"
            }, {
                field: "RowQty",
                width: 90,
                title: "Qty"
            }, {
                width: 90,
                field: "ItemPrice",
                title: "Item Price"
            }, {
                width: 90,
                field: "RowTotal",
                title: "Row Total"
            }
            ]
        });
    });
</script>

[Dimo]

Hello Greg,

The ds variable is local for the GetDaysCallComplete function, so it is not available elsewhere. In addition, there is no need to define transport for the Kendo UI datasource if you are supplying the data via datasource.data.

A schema is required in all scenarios, except for the plain default read-only Grid configuration, which has sorting, filtering and editing turned off.

If you are not confident with jQuery and general Javascript, I strongly encourage improving your knowledge, otherwise working with Kendo UI will turn out difficult. Also take a look at the DataSource and Grid demos and documentation.

http://docs.kendoui.com/getting-started/framework/datasource/overview

http://docs.kendoui.com/getting-started/web/grid/overview

Greetings,
Dimo
the Telerik team

[Greg]

Hi Dimo

Thanks for the reply - I see the ds scope issue now. I will try adding the Schema and see if I can get binding to work - I must say that I don't find the documentation very enlightening. I spent hours trawling through all the documentation and found very little on MVC. Other than having to study the API in detail, where could i have learnt about the need for the Schema in all remote binding scenarios? Maybe I'm missing some links to docs. What would be much more intuitive for the user would be if the datasource could "derive" its schema from the model being passed to the datasource.

Thanks

Greg

[Greg]

OK - finally got a basic binding working - still need a lot of polishing, but hope it helps someone starting out with the basics.

<script>

 

    $(document).ready(function () {

 

        var returnedData;

        var ds = new kendo.data.DataSource({

            //schema: {

            //    model: {

            //        fields: {

            //            RowDetail: { type: "string" },

            //            RowQty: { type: "number" },

            //            ItemPrice: { type: "number" },

            //            RowTotal: { type: "number" }

            //        }

            //    }

            //}

        });

 

        function CallParameters() {

            this.StringDate;

            this.Contractid;

            this.InvoiceNo;

        }

 

        function GetDays() {

            var url = "/Invoice/GetBusinessDays/";

            var callParameters = new CallParameters();

            callParameters.StringDate = $("#monthpicker").val();

            callParameters.ContractID = $("#ContractID").val();

            callParameters.InvoiceNo = $("#InvoiceNumber").val();

 

            $.post(url, callParameters, function (data, textStatus) {

                GetDaysCallComplete(data);

            });

        }

 

        function GetDaysCallComplete(result) {

            returnedData = result;

            alert(returnedData);

            ds.data(returnedData);                     

        }

 

        $("#bizdays").click(function (event) {

            event.preventDefault();

            GetDays();

        });

 

 

 

        // create DatePicker from input HTML element

        $("#invoicedate").kendoDatePicker({

            value: new Date(),

            format: "dd MMM yyyy",

            animation: {

                open: {

                    effects: "fadeIn", duration: 300, show: true

                }

            }

        });

 

        $("#monthpicker").kendoDatePicker({

            value: new Date(),

            // defines the start view

            start: "year",

            // defines when the calendar should return date

            depth: "year",

            // display month and year in the input

            format: "MMMM yyyy"

        });

 

 

        $("#grid").kendoGrid({

 

            autoBind: false,

            dataSource: ds,

            height: 500,

            scrollable: true,

            selectable: true,

 

            columns: [{

                field: "RowDetail",

                width: 90,

                title: "Detail"

            }, {

                field: "RowQty",

                width: 90,

                title: "Qty"

            }, {

                width: 90,

                field: "ItemPrice",

                title: "Item Price"

            }, {

                width: 90,

                field: "RowTotal",

                title: "Row Total"

            }

            ]

        });

    });

</script>