Telerik Forums / UI for JSP
This is a migrated thread and some comments may be shown as answers.

Grid / Update / Delete does not work properly

3 Answers 539 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lucas
Top achievements
Rank 1
Lucas asked on 16 Jul 2015, 09:08 AM
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.​

3 Answers, 1 is accepted

Sort by
0
Lucas
Top achievements
Rank 1
answered on 16 Jul 2015, 01:28 PM
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.

0
Lucas
Top achievements
Rank 1
answered on 16 Jul 2015, 05:01 PM

 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 .. 

0
Alexander Popov
Telerik team
answered on 20 Jul 2015, 08:45 AM
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!
 
Tags
Grid
Asked by
Lucas
Top achievements
Rank 1
Answers by
Lucas
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or