<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication3._default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Griglia</title>   
        <script type="text/javascript" src="Scripts/KendoUi/jquery.min.js"></script>
    <script src="Scripts/KendoUi/kendo.all.min.js" type="text/javascript"></script>
        <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
         <style>
                #clientsDb {
                    width: 692px;
                    height: 393px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('../Images/clientsDb.png') no-repeat 0 0;
                }
            </style>
            
</head>
<body>
    <form id="form1" runat="server">
    <div id="example" >
            
             <div id="clientsDb">

                <div id="grid"></div>

            </div>
    </div>
        <script type="text/javascript">
           
            $(function () {
                $("#grid").kendoGrid({                    
                    dataSource: {                       
                        schema: {
                            data: "Comuni", total: "TotalCount", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.                           
                            model: { // define the model of the data source. Required for validation and property types.
                                id: "CapComId",
                                fields: {
                                    CapComId: { editable: false, nullable: true },
                                    CapComCod: { validation: { required: true} },
                                     CapComCom: { validation: { required: true} }
                                }
                            }
                         },                                          
                        
                        transport: {
                            
                            read: {
                                url: "default.aspx/ListaComuni", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
                                contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                                type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                            },
                            parameterMap: function (data, operation) {
                                if (operation != "read") {
                                    // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                    return JSON.stringify({ comuni: data.models})
                                }
                            }
                        },
                         serverPaging: true,                           
                         serverFiltering: true,
                         pageSize:6
                    },
                    height: 300,
                    groupable: true,
                    scrollable: true,
                    sortable: true,
                    pageable: true,
                    columns: [{
                        field: "CapComCod",
                        width: 90,
                        title: "Cap"
                    }, {
                        field: "CapComCom",
                        title: "Comune"
                    }
                        ]
                });
            });

    </script>
    </form>
</body>
</html>