This is a migrated thread and some comments may be shown as answers.

Newbie Grid binding question.

3 Answers 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 30 Sep 2012, 06:00 PM
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>

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 Oct 2012, 09:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greg
Top achievements
Rank 1
answered on 01 Oct 2012, 01:01 PM
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
0
Greg
Top achievements
Rank 1
answered on 01 Oct 2012, 07:30 PM
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>
Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Greg
Top achievements
Rank 1
Share this question
or