Capacitaciones Version 1

<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.Master" AutoEventWireup="true" CodeBehind="capacitaciones.aspx.cs" Inherits="SCPServicio.capacitacion.capacitaciones" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="SidebarContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    var listInstructores = <%= gridValuesInstructores%>;   
</script>
<h1>Capacitaciones</h1>
<h2>Programadas</h2>
    <div id="form-container">
       <div class="selector"> 
           <select id="cbInstructor" style="width: 400px;"></select>
       </div>
    </div>
    <div id="capacitacionGrid"></div>
<h2>Por programar</h2>
    <div id="planificacionGrid"></div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptsContent" runat="server">
<script type="text/javascript">
    "use strict";
    var capacitacionCommand = {
        field: "",
        title: "",
        template: '<a class="k-button k-button-icontext k-grid-edit" href="/capacitacion/ver.aspx?id=#= idcapacitacion #"><span class="k-icon k-edit"></span>Ver</a>'
    };
    var planificacionCommand = {
        field: "",
        title: "",
        template: '<a class="k-button k-button-icontext k-grid-edit" href="/capacitacion/finalizarplanificacion.aspx?id=#= idplanificacion #"><span class="k-icon k-edit"></span>Programar</a>'
    };

    $(function () {

        $("#cbInstructor").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: listInstructores,
            optionLabel: "Seleccionar...",
            valuePrimitive: "true",
            select: onSelect
        });

        function onSelect(e) {
            var dataItem = this.dataItem(e.item.index());
            if (dataItem.value === "")
                return false;
            alert(dataItem.value + ":" + dataItem.text);

            var entityGrid = $("#capacitacionGrid").data("kendoGrid");
            entityGrid.dataSource.transport.options.read.url = "/Servicio.svc/vistaplacap/idinstructor/" + dataItem.value;
            entityGrid.dataSource.page(1); //read implicito           
            return false;
        };
        ///////////////////////////////////////////////////////////////////////
        //datasources y grid de capacitacion
        var apiCapacitacionUrl = "/Servicio.svc/vistaplacap/idinstructor/-1",
        apiPlanificacionUrl = "/Servicio.svc/planificacion";
        var capacitacionDataSource = new kendo.data.DataSource({
            transport: {
                create: {
                    url: apiCapacitacionUrl,
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                read: apiCapacitacionUrl,
                update: {
                    url: apiCapacitacionUrl,
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                destroy: {
                    url: apiCapacitacionUrl,
                    type: "DELETE",
                    contentType: "application/json; charset=utf-8"
                }
            },
            schema: {
                data: "Data",
                total: "Count",
                model: {
                    id: "idcapacitacion",
                    fields: {
                        idcapacitacion: { editable: false, defaultValue: -1 },
                        flo_nombre: { editable: false },
                        cur_nombre: { editable: false },
                        cap_fecha: { type: "date" },
                        pla_fecha: { type: "date" }                        
                    }
                }
            },
            pageSize: 15,
            serverPaging: true
        });

       
        $("#capacitacionGrid").kendoGrid({
            columns: [
                { field: "flo_descripcion", title: "Flota" },
                { field: "cur_nombre", title: "Curso" },
                { field: "cap_fecha", title: "Fecha", format: "{0:dd-MM-yyyy}" },                              
                capacitacionCommand
            ],
            dataSource: capacitacionDataSource,
            pageable: {
                refresh: true,
                messages: {
                    display: " {0}-{1} de {2} elementos",
                    empty: "No hay elementos"
                }
            },
            sortable: true
        });

        //datasources y grid de planificacion
        var planificacionDataSource = new kendo.data.DataSource({
            transport: {
                create: {
                    url: apiCapacitacionUrl,
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                read: apiCapacitacionUrl,
                update: {
                    url: apiCapacitacionUrl,
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                destroy: {
                    url: apiCapacitacionUrl,
                    type: "DELETE",
                    contentType: "application/json; charset=utf-8"
                }
            },
            schema: {
                data: "Data",
                total: "Count",
                model: {
                    id: "idplanificacion",
                    fields: {
                        idplanificacion: { editable: false, defaultValue: -1 },
                        flo_descripcion: { editable: false },
                        cur_nombre: { editable: false },
                        pla_fecha: { type: "date" }
                    }
                }
            },
            pageSize: 15,
            serverPaging: true
        });

        $("#planificacionGrid").kendoGrid({
            columns: [
                { field: "flo_descripcion", title: "Flota" },
                { field: "cur_nombre", title: "Curso" },               
                { field: "pla_fecha", title: "Fecha", format: "{0:dd-MM-yyyy}" },
                planificacionCommand
            ],
            dataSource: capacitacionDataSource,
            pageable: {
                refresh: true,
                messages: {
                    display: " {0}-{1} de {2} elementos",
                    empty: "No hay elementos"
                }
            },
            sortable: true
        });
    });
</script>
</asp:Content>