Grid / Update / Delete does not work properly

4 posts, 0 answers
  1. Lucas
    Lucas avatar
    3 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 Link to this post

    01.
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    02.<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
    03. 
    04.<!DOCTYPE html>
    05.<html>
    06.    <head>
    07.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    08.        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    09.        <title>Configuración de Salas</title>
    10.        <link rel="stylesheet" href="resources/styles/kendo.common.min.css" />
    11.        <link rel="stylesheet" href="resources/styles/kendo.bootstrap.min.css" />
    12.        <link rel="stylesheet" href="css/estilo.css" />
    13.         
    14.        <script src="resources/js/jquery.min.js"></script>
    15.        <script src="resources/js/kendo.all.min.js"></script>
    16.        <script src="resources/js/cultures/kendo.culture.es-ES.min.js"></script>
    17.        <script src="resources/js/messages/kendo.messages.es-ES.min.js"></script>
    18.    </head>
    19.    <body>
    20.        <kendo:responsivePanel name="responsive">
    21.            <div id="top"></div>
    22.             
    23.            <div>
    24.                <kendo:menu name="menu"/>
    25.                <kendo:button name="logout" class="k-primary">Logout</kendo:button>
    26.            </div>
    27.             
    28.            <div>
    29.            <kendo:grid name="grid" pageable="true" filterable="true">
    30. 
    31.                    <kendo:grid-editable mode="inline" confirmation="¿Estas seguro de borrar este registro?"/>
    32. 
    33.                    <kendo:grid-columns>
    34.                        <kendo:grid-column title=" ">
    35.                            <kendo:grid-column-command>
    36.                                <kendo:grid-column-commandItem name="edit"/>
    37.                                <kendo:grid-column-commandItem name="destroy"/>
    38.                            </kendo:grid-column-command>
    39.                        </kendo:grid-column>
    40.                        <kendo:grid-column title="Identificador de Sala" field="idSala" filterable="true"/>
    41.                        <kendo:grid-column title="Nombre de la Sala" field="nombre" filterable="true"/>
    42.                    </kendo:grid-columns>
    43. 
    44.                    <kendo:dataSource pageSize="10" batch="false" autoSync="true">
    45. 
    46.                        <kendo:dataSource-schema>
    47.                            <kendo:dataSource-schema-model id="model">
    48.                                <kendo:dataSource-schema-model-fields>
    49.                                    <kendo:dataSource-schema-model-field name="idSala" type="string" editable="false"/>
    50.                                    <kendo:dataSource-schema-model-field name="nombre" type="string" />
    51.                                </kendo:dataSource-schema-model-fields>
    52.                            </kendo:dataSource-schema-model>
    53.                        </kendo:dataSource-schema>
    54. 
    55.                        <kendo:dataSource-transport>
    56.                            <kendo:dataSource-transport-read url="api/salas" dataType="json" type="GET" contentType="application/json"/>
    57.                            <kendo:dataSource-transport-parameterMap>
    58.                                <script>
    59.                                        function parameterMap(options,type) {                          
    60.                                                return JSON.stringify(options);                        
    61.                                        }
    62.                                </script>
    63.                            </kendo:dataSource-transport-parameterMap>
    64. 
    65.                                <kendo:dataSource-transport-destroy url="api/salas" dataType="json" type="DELETE" contentType="application/json"/>
    66.                            <kendo:dataSource-transport-update url="api/salas" dataType="json" type="POST" contentType="application/json"/>
    67.                            <kendo:dataSource-transport-create url="api/salas" dataType="json" type="PUT" contentType="application/json"/>
    68.                             
    69.                                 
    70.                        </kendo:dataSource-transport>
    71. 
    72.                    </kendo:dataSource>
    73.                </kendo:grid>
    74.            </div>
    75.        </kendo:responsivePanel>
    76.    </body>
    77.     
    78.    <script>
    79.        $(function (){
    80.            $("#logout").kendoButton({
    81.                icon: "lock"
    82.            });
    83.             
    84.            $.get("api/menu", function(data){
    85.                $("#menu").kendoMenu({dataSource: data });
    86.            });
    87.        });
    88.    </script>
    89.</html>

     

    In the following example , there are the following problems:

    1. The delete button does not ask for confirmation. PUT generates rather than a DELETE.
    2. When updating generates a PUT rather than POST .
    3. If I remove <kendo:dataSource-transport-create> nothing works .​ Only GET (READ)
    4. <kendo:dataSource-transport-parameterMap>​ I've also moved from after the last <kendo:dataSource-transport-...> site and has the same behavior.

    I 'm testing with the trial version .

    Thank you for any help.​

  2. Lucas
    Lucas avatar
    3 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 in reply to Lucas Link to this post

    01.<%@page contentType="text/html" pageEncoding="UTF-8"%>
    02.<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
    03. 
    04.<!DOCTYPE html>
    05.<html>
    06.    <head>
    07.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    08.        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    09.        <title>Configuración de Salas</title>
    10.        <link rel="stylesheet" href="resources/styles/kendo.common.min.css" />
    11.        <link rel="stylesheet" href="resources/styles/kendo.bootstrap.min.css" />
    12.        <link rel="stylesheet" href="css/estilo.css" />
    13.         
    14.        <script src="resources/js/jquery.min.js"></script>
    15.        <script src="resources/js/kendo.all.min.js"></script>
    16.        <script src="resources/js/cultures/kendo.culture.es-ES.min.js"></script>
    17.        <script src="resources/js/messages/kendo.messages.es-ES.min.js"></script>
    18.    </head>
    19.    <body>
    20.        <form>
    21.            <div id="grid">
    22.            </div>
    23.        </form>
    24.    </body>
    25.     
    26.    <script>
    27.         $(document).ready(function () {
    28.              
    29.             var dataSource = {
    30.                type: 'json',
    31.                transport: {
    32.                    read: {
    33.                        url: "api/salas",
    34.                        dataType: "json",
    35.                        type: "GET"
    36.                    },
    37.                    destroy: {
    38.                        url: "api/salas",
    39.                        dataType: "json",
    40.                        type: "DELETE"
    41.                    },
    42.                    update: {
    43.                        url: "api/salas",
    44.                        contentType: 'application/json',
    45.                        dataType: "json",
    46.                        type: "POST"
    47.                    },
    48.                    create: {
    49.                        url: "api/salas",
    50.                        contentType: 'application/json',
    51.                        dataType: "json",
    52.                        type: "PUT"
    53.                    },
    54.                    parameterMap: function(options, operation) {
    55.                        if (operation !== "read" && options.models) {
    56.                            return {models: kendo.stringify(options.models)};
    57.                        }
    58.                    }
    59.                },
    60.                pageSize: 20,
    61.                schema: {
    62.                    model: {
    63.                        id: "SalasID",
    64.                        fields: {
    65.                            idSala: { type: 'string' },
    66.                            nombre: { type: 'string' }
    67.                        }
    68.                    }
    69.                }
    70.            };
    71.              
    72.             $("#grid").kendoGrid({
    73.                 dataSource: dataSource,
    74.                 pageable: true,
    75.                 height: 200,
    76.                 width: 1000,
    77.                 filterable: true,
    78.                 columns: [
    79.                     { command: ["edit", "destroy"], title: " ", width: "250px" },
    80.                     {field: "idSala", title: "Id. Sala" },
    81.                     {field: "nombre", title: "Nombre" }
    82.                ],
    83.                editable: "inline"
    84.             });
    85.        });
    86.    </script>
    87.</html>

     

    Like Kendo UI code fails.

  3. UI for ASP.NET AJAX banner
  4. Lucas
    Lucas avatar
    3 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 in reply to Lucas Link to this post

     update: {
                            url: "api/salas", dataType: "json", type: "POST",
                            complete: function(e) {
                                $("#grid").data("kendoGrid").dataSource.read();
                            }  
                        },

    What is the equivalent in ASP? this is what is wrong with me .. 

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 Jul 2015 Link to this post

    Hi Lucas,

    I would recommend subscribing to the DataSource's requestEnd event instead. The same could also be achieved by using a Custom DataSource and specifying the functions for CRUD operations manually. For example: 
    .DataSource(dataSource => dataSource       
        .Custom()   
        .Transport(transport =>
        {
            transport.Read("GridRead"); //JavaScript function which performs the Ajax request and its event handling
            transport.ParameterMap("parameterMap");
        })
    )


    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
UI for ASP.NET AJAX banner