jueves, 11 de septiembre de 2014

layout vistas en kendo

<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.Master" AutoEventWireup="true"
    CodeBehind="operadores.aspx.cs" Inherits="SCPServicio.admin.operadores" %>

<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">
    <div id="app">
        <div id="example" class="k-content">       
            <div class="toolbar">
                <label class="category-label" for="category">Buscar por apellido paterno:</label>
                <input type="search" id="category" style="width: 230px"/>
                <input id="reset" type="button" data-bind="click: buscar" class="k-button k-button-icontext" value="Mostrar todo"/>                           
            </div>
        </div>
        <div data-role="grid"
             data-bind="source: results"
             data-scrollable="true"        
             data-sortable="true"  <%--permitir ordenacion--%>               
             data-resizable="true"            
             data-columns="[            
                 { field: 'ope_apellido_paterno', title: 'Apellido Paterno' },
                 { field: 'ope_apellido_materno', title: 'Apelllido Materno' },
                 { field: 'ope_nombre', title: 'Nombre' },
                 { command: [{name:'edit', text:'Detalles'}], title: ' ' }
             ]">
        </div>
    </div>
    <div id="app1"></div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptsContent" runat="server">
   

    <script id="rowTemplate" type="text/x-kendo-template">
        <tr data-uid="#= uid #">
            <td><span data-bind="text: name"></span></td>
            <td><span data-bind="text: age"></span></td>            
        </tr>
    </script>      
    <script>  

        $(function () {

            var apiUrl = "/Servicio.svc/operador";
           

            var viewModel = new kendo.observable({
                results: [],
                buscar: fillGrid
            });

            function fillGrid() {
                $.ajax({
                    url: apiUrl,
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        viewModel.set("results", response.Data);
                    },
                    error: function (e) {
                        alert("Error al guardar operadores:\n");
                    }
                });
                return false;
            }

            kendo.bind($("#app"), viewModel);

            // Layout
            var layout = new kendo.Layout("<div id='maincontent'></div>");
            layout.render($("#app1"));

            // Views
            //var view = new kendo.View("<span>Prueba</span>");

            // Routers           
            window.router = new kendo.Router();
            window.router.route("/", function () {
                //layout.showIn("#maincontent", view);
                fillGrid();
            });

            window.router.start();

        });
    </script>
</asp:Content>

No hay comentarios:

Publicar un comentario