This is a migrated thread and some comments may be shown as answers.

Edit/Delete button functions not working on inline or popup editing

14 Answers 660 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Russ
Top achievements
Rank 1
Russ asked on 01 Jul 2013, 08:36 PM
I've created a grid using the Kendo Web.  When using a datasource tied to a JavaScript array, the Edit/Update and Delete buttons appeared to function.  When I changed the datasource to pull from a Transport, the Edit button appears to work, but the Update button does not close the window and complete the edit.  Delete puts up the confirmation prompt and removes the line from the display, but I can't see any evidence that the HTTP call to the server is made. 

If I hook the Grid SAVE event to a function, I can see that the function gets called.

I've simplified the code down to "only" 126 lines and have included it below.

Am I missing something obvious?  If not, how would I proceed to troubleshoot this issue?

Thanks for looking at this.

001.<html>
002.<head>
003.<link  rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" />
004.<link  rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" />
005.</head>
006.<body>
007.<script src="http://code.jquery.com/jquery-1.9.1.js" ></script>
009.<script>
010.$(document).ready(function(){
011./* -- Begin Doc ready --*/
012.var dataSource = new kendo.data.DataSource(
013.{
014.    transport:
015.    {
016.        read:
017.        {
018.            url: "http://apvs26/HttpServices/api/SchedulingShiftDays",
019.            type: "GET",
020.            dataType: "json",
021.            data: function( e )
022.            {
023.                console.log("data"); return{
024.                  shift: "rbj01"
025.                };
026.            }
027.        },
028.        update:
029.        {
030.            url: function() { console.log("update invoked"); return "http://apvs26/HttpServices/api/SchedulingShiftDays";},
031.            type: "POST",
032.            dataType: "json",
033.            data: function( e )
034.            {
035.                console.log("update"); return{
036.                  shift: "rbj01"
037.                };;
038.            }
039.        },
040.        destroy:
041.        {
042.            url: "http://apvs26/HttpServices/api/SchedulingShiftDays",
043.            type: "DELETE",
044.            dataType: "json",
045.            data: function( e )
046.            {
047.                console.log("delete"); return{
048.                  shift: "rbj01"
049.                };;
050.            }
051.        }, 
052.        create:
053.        {
054.            url: "http://apvs26/HttpServices/api/SchedulingShiftDays",
055.            type: "PUT",
056.            dataType: "json",
057.            data: function( e )
058.            {
059.                console.log("create"); return{
060.                  shift: "rbj01"
061.                };;
062.            }
063.        },         
064.        parameterMap: function( data, operation )
065.        {
066.            console.log('Map called w/' + data ); console.log( 'operation=' + operation );
067.            var filter="$filter=";
068.            for(var property in data)
069.            {
070.                filter += property + " eq '" + data[property] + "'";
071.            }
072.            console.log('Resulting filter: ' + filter);
073.            return filter;
074.        },
075.        schema:
076.        {
077.            model:
078.            {  
079.                id: "DayNumber",
080.                fields:
081.                {
082.                    DayNumber: { type: "number" },
083.                    Hours: { type: "number" },
084.                    StartTime: { type: "string" },
085.                    EndTime: { type: "string" },
086.                    DayName: { type: "string" },
087.                    Description: { type: "string" }
088.                },
089.                set: function(e) {console.log( "set" ); }
090.            }
091.        }
092.    }
093.});
094. 
095.$("#grid").kendoGrid({
096.    dataSource: dataSource,
097.    pageable: false,
098.    scrollable: false,
099.    toolbar: ["create"],
100.    columns: [
101.        { field: "DayNumber", title: "Day", width: "9%"},
102.        { field: "DayName", title:"Name", width: "15%" },
103.        { field: "StartTime", title: "Start Time", width: "8%"},
104.        { field: "EndTime", title:"End Time", width: "8%"},
105.        { field: "Hours", title:"Hours", format: "{0:n}", width: "9%"},
106.        { field: "Description", title:"Description" },
107.        { command: ["edit", "destroy"], title: "Actions", width: "18%" }
108.        ],
109.    editable: "inline"
110.    //,save: onSave
111.});
112. 
113.function onSave(e)
114.{
115.    console.log("in onSave()");
116.    return;
117.}
118. 
119./* -- End Doc Ready -- */
120.});
121.</script>
122.<div id="gridcontainer">
123.    <div id="grid"></div>
124.</div>
125.</body>
126.</html>

14 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 03 Jul 2013, 02:08 PM
Hi Russel,

 
From the provided information it's not clear for us what is the reason for this behavior - could you please provide runable sample where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Russ
Top achievements
Rank 1
answered on 03 Jul 2013, 02:47 PM
This is a runnable sample, except that you can't get to our server for the JSON data. :-) 

I would have shifted to a Twitter feed as used in the Kendo Dojo and changed the data in the columns to match before submitting this, but that public JSON source seems to have dried up as they seem to now require authentication.  Would you suggest a public JSON data feed to consume for an example?
0
Vladimir Iliev
Telerik team
answered on 05 Jul 2013, 08:44 AM
Hi Russell,

 
For convenience I created small jsBin example which use the KendoUI demo service to load the grid with data. 

Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Russ
Top achievements
Rank 1
answered on 05 Jul 2013, 03:19 PM
Thank you for that, I will certainly be able to use that datasource in any future samples i provide.  Strangely enough, though, your sample behaves like mine in that I click edit, change a field and click Update and nothing happens.

However, I solved the mystery of the issue in the code above, I just haven't had a chance to post about it since returning from holiday.

The issue is that the Schema object is declared inside the Transport, inside of outside the transport in the datasource itself.  Because of this there is no model, and obviously no ID within the model to use as a key.  No key, no change.

It would be lovely if some sort of error/event/message or SOMETHING would drop a hint as to why the change event wasn't doing anything  An initialzer debug mode or something to squawk about unexpected objects perhaps.


0
Vladimir Iliev
Telerik team
answered on 08 Jul 2013, 08:02 AM
Hi Russell,

 
I would suggest to share your idea about the error messages at KendoUI UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases. 

Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
rajnikant
Top achievements
Rank 1
answered on 25 Sep 2014, 06:41 AM
heyy 
Russ

i am facing this same problem with my kendoui grid in mvc.
as u said u sloved "The issue is that the Schema object is declared inside the Transport, inside of outside the transport in the datasource itself.  Because of this there is no model, and obviously no ID within the model to use as a key.  No key, no change."

so i didn't get this words...can u explain it in details..?
thnx.....

0
Vladimir Iliev
Telerik team
answered on 25 Sep 2014, 09:33 AM
Hi Rajnikant,

Russell means that the dataSource configuration was invalid, which leads to no valid model ID defined. If you are experiencing the same issue I would suggest to open a new support thread and provide the current grid and dataSource configuration that you are using. This would help us poinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Georges
Top achievements
Rank 1
answered on 12 Dec 2018, 02:38 PM

I'm still having the same problem, even with the model defined correctly ...

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="default" content="Uniface 10" />
    <link rel="stylesheet" type="text/css" href="../css/uniface.css" />
    <link rel="stylesheet" href="../css/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="../css/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="../css/styles/kendo.default.mobile.min.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/kendo.all.min.js"></script>
  </head>
  <body class="u">  <!-- class "u" enables some minor pre-styled CSS rules in ../css/uniface.css -->

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
var myDs = new kendo.data.DataSource({
type : "odata-v4",
transport: { 
read: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "get",
dataType : "json"
},
create: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "post",
dataType : "json"
},
update: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "put",
dataType : "json"
},
destroy: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "delete",
dataType : "json"
}
},
// batch:true,
schema: {
model: {
id : "CUSTOMERID",
fields: {
CUSTOMERID: { type: "number" },
TYPE: { type: "string" },
STATUSCD: { type: "string" },
                            CREATIONDT: { type: "string" },
                            FIRSTNAME: { type: "string" },
                            MIDDLENAME: { type: "string" },
                            LASTNAME: { type: "string" },
                            LEGALNAME: { type: "string" }
}
}
},
// pageSize: 20
});

            $("#grid").kendoGrid({
dataSource : myDs,
pageable : false,
scrollable : false,
toolbar : ["create"],
                columns: 
[{
                    field: "CUSTOMERID",
                    title: "Customer Id"
                }, 
{
                    field: "TYPE",
                    title: "Customer Type"
                }, 
{
                    field: "STATUSCD",
title: "Status Code"
                }, 
{
                    field: "CREATIONDT",
title: "Creation Date"
                },
{
                    field: "FIRSTNAME",
title: "First Name"
                },
{
                    field: "MIDDLENAME",
title: "Middle Name"
                },
{
                    field: "LASTNAME",
title: "Last Name"
                }, 
{
                    field: "LEGALNAME",
title: "Legal Name"
},
{
command: ["edit", "destroy"],
title: "&nbsp;", 
width: "250px"
                }],
editable : "inline"
            });
        });
    </script>
</div>

<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>

  </body>
</html>

0
Tsvetomir
Telerik team
answered on 14 Dec 2018, 02:34 PM
Hi Georges,

Based on the provided grid and data source, I created a Dojo sample in which the Edit and Delete functionalities work as expected. Note that I have changed the columns' declarations and the data source. 

https://dojo.telerik.com/uVUguRUL 

Also, can you ensure that the returned data items from the service are in JSON format and not in JSONP? Nevertheless, if there is not a match, the editing and deleting might not behave as expected because the grid will not manage to match the currently edited record with the one in the data source. 

If the issue persists, please modify provided Dojo sample and I will dig into the issue and eventually provide a possible solution.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Georges
Top achievements
Rank 1
answered on 14 Dec 2018, 04:02 PM

Hi Tsvetomir.

I fixed the problem with the PUT and POST (related to a empty service output - thank for your help)

However the DELETE doesn't work at all; the request has an empty content, as seen in Fiddlr. I don't use jsonp datatype.

 

 

0
Tsvetomir
Telerik team
answered on 18 Dec 2018, 08:31 AM
Hi Georges,

After clicking on the Delete button of the Kendo UI Grid, can you check out the Network tab of the DevTools of the browser and ensure that the request is sent to the correct URL?



Also, you can subscribe to the remove event and there, via the event arguments, you can check if a model is getting ready to be removed. You can also set a debugger there and see what are the arguments.

remove:function(e){
                alert(e.model.ProductName)
            }

Furthermore, if there is a JavaScript error thrown, the grid might not behave as expected. Can you check out the console for errors?

Can you also compare the project I have sent in my previous response and compare it to the one on your side and check out what are the crucial differences?

For your convenience, I am pasting the link here:

https://dojo.telerik.com/uVUguRUL

If the issue persists, please modify the Dojo sample and sent it back to me. This will enable me to investigate and debug the issue locally.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Georges
Top achievements
Rank 1
answered on 18 Dec 2018, 12:23 PM

Problem solved. Set the selectable property to true. There is a request sent but the body is empty.

0
Georges
Top achievements
Rank 1
answered on 18 Dec 2018, 01:39 PM

Hi Tsvetomir.

I already did the investigation using Fiddlr. A request is issued, but the body is empty.

I solved the problem : the Grid "selectable" property must be set to "true". This is not documented correctly in your doc.... which brings me to another point : I found a lot of components hard to use because of the lack of a complete and consistent documentation. Is the only source the one provided online ?

I'll try the training the coming weeks ...

You can close the call.

0
Tsvetomir
Telerik team
answered on 20 Dec 2018, 09:16 AM
Hi Georges,

I have noticed that in the provided DataSource declaration, the type is set to "odata-v4" and in the transport settings explicitly the type is set to JSON. That said, the two are not compatible. 

The selectable property does not have anything common with the data source of the grid. Hence, setting this option to true will not affect the rendering of the grid. Also, in order to see the model, you have to configure the parameterMap option of the grid. Please find the example below and check the request that is sent. The model can be seen at the bottom of the request located in the Network tab of the Developer tools. 

https://dojo.telerik.com/uquHOLuR

As per the documentation, it is separated into two sections. The first one is the API Reference of the widgets in which all of the settings and properties of the widgets can be found. The second is the Documentation in which certain things are described in-depth for better understanding. It is always a great idea to skim through both of the resources in order to obtain the big picture.

Furthermore, there are demos created for most of the use-cases which help the developer to get a better understanding of how is the widget set up and a configuration provided which can be used as a base. 

Live Demos

The training which is provided by Progress is a great opportunity for the developers who are getting started with the components. It is a kickstarter and sets the base and intends to save time with getting to know the widgets of the specific Suite. 

I hope these clarifications prove helpful.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Russ
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Russ
Top achievements
Rank 1
rajnikant
Top achievements
Rank 1
Georges
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or