martes, 30 de septiembre de 2014

dropdownlist dataSource option label

<%@ 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 id="template" type="text/x-kendo-template">  
    <span>        
        #= data.ins_apellido_paterno #  #= data.ins_apellido_materno #  #= data.ins_nombre #
    </span> 
</script>

<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>Ver</a>'
    };

    $(function () {
        var intructoresDataSource = new kendo.data.DataSource({
            transport: {
                create: {
                    url: "/Servicio.svc/instructores",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                read: "/Servicio.svc/instructores",
                update: {
                    url: "/Servicio.svc/instructores",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                parameterMap: function (data, operation) {
                    if (operation == "update" || operation == "create") {
                        return kendo.stringify(data);
                    }
                    return data;
                }
            },
            schema: {
                data: "Data",
                total: "Count",
                model: {
                    id: "idinstructor",
                    fields: {
                        idinstructor: { editable: false, defaultValue: 0 },
                        ins_nombre: { editable: true, nullable: false, validation: { required: { message: "{0} es requerido"}} },
                        ins_apellido_paterno: { editable: true, nullable: false, validation: { required: { message: "{0} es requerido"}} },
                        ins_apellido_materno: { editable: true, nullable: false, validation: { required: { message: "{0} es requerido"}} }
                    }
                }
            },
            pageSize: 15,
            serverPaging: true
        });


        $("#cbInstructor").kendoDropDownList({
            dataTextField: "ins_apellido_paterno",
            dataValueField: "idinstructor",
            dataSource: intructoresDataSource,
            select: onSelect,
            optionLabel: {
                idinstructor: "",
                ins_apellido_paterno: "",
                ins_apellido_materno: "",
                ins_nombre: "Seleccionar...."
            },
            template: kendo.template($("#template").html()),
            valueTemplate: kendo.template($("#template").html())
        });
        function onSelect(e) {
            var dataItem = this.dataItem(e.item.index());           
            //alert(e.item.index());
            alert(dataItem.idinstructor + ":" + dataItem.ins_apellido_paterno);

            var entityGrid = $("#capacitacionGrid").data("kendoGrid");
            //            entityGrid.dataSource.transport.options.read.url = "/Servicio.svc/capacitacion" + query;
            //            entityGrid.dataSource.page(1);
            //            e.preventDefault();
            return false;
        };
        ///////////////////////////////////////////////////////////////////////
        var apiCapacitacionUrl = "/Servicio.svc/capacitacion",
        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 },
                        cap_detalle: { editable: false }
                    }
                }
            },
            pageSize: 15,
            serverPaging: true
        });

        $("#capacitacionGrid").kendoGrid({
            columns: [
            { field: "cap_detalle", title: "Descripción" },
            capacitacionCommand
        ],
        dataSource: capacitacionDataSource,
            pageable: {
                refresh: true,
                messages: {
                    display: " {0}-{1} de {2} elementos",
                    empty: "No hay elementos"
                }
            },
            sortable: true
        });

        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 },
                        idcurso: { editable: false }
                    }
                }
            },
            pageSize: 15,
            serverPaging: true
        });

        $("#planificacionGrid").kendoGrid({
            columns: [
            { field: "idcurso", title: "Curso" },
            planificacionCommand
            ],
            dataSource: planificacionDataSource,
            pageable: {
                refresh: true,
                messages: {
                    display: " {0}-{1} de {2} elementos",
                    empty: "No hay elementos"
                }
            },
            sortable: true
        });
    });
</script>
</asp:Content>

No hay comentarios:

Publicar un comentario