Cannot create, update or destroy records in grid with web services

[Ricardo Pinto]

Hello!

I'm starting to work with kendo but I'm having some trouble setting up a grid with inline edit mode and crud operations.

The read method is working and the grid is populated on page load with the two records fetched by the web service getallevents.
However, the other operations fail with the following messages:

Create

{"Message":"Invalid web service call, missing value for parameter: \u0027events\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)\r\n at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Object target, IDictionary`2 parameters)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

the data I get in browser is: 

{"eventid":null,"contextid":null,"eventname":"sd","eventdescription":"sd","eventprice":3}

Update and Destroy

{"Message":"Cannot convert object of type \u0027EventReady.kdEvent\u0027 to type \u0027System.Collections.Generic.IDictionary`2[System.String,System.Object]\u0027","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

the data I get in browser is:

{"__type":"EventReady.kdEvent","contextid":56,"eventid":2,"eventname":"Evento Teste","eventdescription":"Testedsds","eventprice":3}

Here is my ascx:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Events.ascx.vb" Inherits="EventReady.Events.Events" %>

<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<%@ Register TagPrefix="sas" Assembly="CoreReady.Web.UI" Namespace="CoreReady.Web.UI" %>

 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

    <asp:Label ID="PageBlockID" runat="server" Visible="false"></asp:Label>

    <asp:Label ID="lblEventID" runat="server" Visible="false"></asp:Label>

    <asp:Panel ID="pnlList" runat="server">

        <div id="grid">

        </div>

        <script>

            <!--my script-->

        </script>

    </asp:Panel>

</telerik:RadAjaxPanel>

Here is my script:

<script>

 

            Sys.Application.add_load(LoadGrid);

 

            function LoadGrid() {

                $("#grid").kendoGrid({

                    dataSource: {

                        transport: {

                            read: {

                                url: "_portal/_widgets/eventready/events/wsev.asmx/getallevents",

                                contentType: "application/json; charset=utf-8",

                                type: "POST",

                                data: { ctxid: "<asp:literal id='lblContextID' runat='server' />" }

                            },

                            create: {

                                url: "_portal/_widgets/eventready/events/wsev.asmx/createevent",

                                contentType: "application/json; charset=utf-8",

                                type: "POST"

                            },

                            update: {

                                url: "_portal/_widgets/eventready/events/wsev.asmx/updateevent",

                                contentType: "application/json; charset=utf-8",

                                type: "POST"

                            },

                            destroy: {

                                url: "_portal/_widgets/eventready/events/wsev.asmx/destroyevent",

                                contentType: "application/json; charset=utf-8",

                                type: "POST"

                            },

                            parameterMap: function (options, operation) {

                                if (operation !== "read" && options.models) {

                                    return { events: kendo.stringify(options.models) };

                                }

                                else {

                                    return kendo.stringify(options);

                                }

                            }

                        },

                        schema: {

                            data: "d",

                            model: {

                                id: "eventid",

                                fields: {

                                    contextid: { editable: false, nullable: true },

                                    eventid: { editable: false, nullable: true },

                                    eventname: { type: "string" },

                                    eventdescription: { type: "string" },

                                    eventprice: { type: "number" }

                                }

                            }

                        }

                    },

                    height: 400,

                    sortable: true,

                    pageable: true,

                    toolbar: ["create"],

                    columns: [

                            {

                                field: "eventname", title: "Evento", width: "200px"

                            },

                            {

                                field: "eventdescription", title: "Descrição", width: "200px"

                            },

                            {

                                field: "eventprice", title: "Preço", format: "{0:c}", width: "200px"

                            },

                            { command: ["edit", "destroy"], title: " ", width: "210px" }

                    ],

                    editable: "inline"

                });

            };

         

        </script>

Here is my kdevent class:

Public Class kdEvent

 

    Public Sub New()

 

    End Sub

 

    Public Sub New(contextid As Integer, eventid As Integer, eventname As String, eventdescription As String, eventprice As Double)

        Me.contextid = contextid

        Me.eventid = eventid

        Me.eventname = eventname

        Me.eventdescription = eventdescription

        Me.eventprice = eventprice

    End Sub

 

    Private _contextid As Integer

    Public Property contextid As Integer

        Get

            Return _contextid

        End Get

        Set(ByVal value As Integer)

            _contextid = value

        End Set

    End Property

 

    Private _eventid As Integer

    Public Property eventid As Integer

        Get

            Return _eventid

        End Get

        Set(value As Integer)

            _eventid = value

        End Set

    End Property

 

    Private _eventname As String

    Public Property eventname As String

        Get

            Return _eventname

        End Get

        Set(value As String)

            _eventname = value

        End Set

    End Property

 

    Private _eventdescription As String

    Public Property eventdescription As String

        Get

            Return _eventdescription

        End Get

        Set(value As String)

            _eventdescription = value

        End Set

    End Property

 

    Private _eventprice As Double

    Public Property eventprice As Double

        Get

            Return _eventprice

        End Get

        Set(value As Double)

            _eventprice = value

        End Set

    End Property

 

 

End Class

And finally my web services:

Imports System.Web.Services

Imports System.Web.Services.Protocols

Imports System.ComponentModel

Imports xPortalReady

 

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

<System.Web.Script.Services.ScriptService()> _

<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _

<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<ToolboxItem(False)> _

Public Class wsev

    Inherits System.Web.Services.WebService

 

    <WebMethod()> _

    Public Function getallevents(ByVal ctxid As Integer) As List(Of kdEvent)

 

        Dim dbEvent As New CoreReadyDAL.EventReady.EventReadyDataContext(xPortalReady.BasePage.getAppConnectionString(5, ctxid))

 

        Dim listEvents As New List(Of kdEvent)()

 

        Dim allEvent = (From ev In dbEvent.Events _

                            Where ev.Context_ID = ctxid _

                            Select ev)

        If Not allEvent Is Nothing AndAlso allEvent.Count > 0 Then

            For Each ev In allEvent

                listEvents.Add(New kdEvent(ctxid, ev.Event_ID, ev.Event_Name, ev.Event_Description, ev.Event_Price))

            Next

        End If

 

        Return listEvents.ToList

 

    End Function

 

    <WebMethod()> _

    Public Function createevent(ByVal events As List(Of kdEvent)) As List(Of kdEvent)

 

        Dim dbEvent As New CoreReadyDAL.EventReady.EventReadyDataContext(xPortalReady.BasePage.getAppConnectionString(5, events.Take(1).SingleOrDefault.contextid))

 

        Dim listEvents As New List(Of kdEvent)()

 

        For Each newEv In events

            Dim newEvent As New CoreReadyDAL.EventReady.Event

            newEvent.Context_ID = newEv.contextid

            newEvent.Event_Name = newEv.eventname

            newEvent.Event_Description = newEv.eventdescription

            newEvent.Event_Price = newEv.eventprice

            dbEvent.Events.InsertOnSubmit(newEvent)

            listEvents.Add(newEv)

        Next

 

        dbEvent.SubmitChanges()

 

        Return listEvents.ToList

 

    End Function

     

    <WebMethod()> _

    Public Sub updateevent(ByVal events As List(Of kdEvent))

 

        Dim dbEvent As New CoreReadyDAL.EventReady.EventReadyDataContext(xPortalReady.BasePage.getAppConnectionString(5, events.Take(1).SingleOrDefault.contextid))

 

        Dim listEvents As New List(Of kdEvent)()

 

        For Each newEv In events

            Dim currentEvent = (From e In dbEvent.Events _

                            Where e.Event_ID = newEv.eventid _

                            Select e).SingleOrDefault

            If Not currentEvent Is Nothing Then

                currentEvent.Event_Name = newEv.eventname

                currentEvent.Event_Description = newEv.eventdescription

                currentEvent.Event_Price = newEv.eventprice

            End If

        Next

         

 

        dbEvent.SubmitChanges()

 

    End Sub

 

    <WebMethod()> _

    Public Sub destroyevent(ByVal events As List(Of kdEvent))

 

        Dim dbEvent As New CoreReadyDAL.EventReady.EventReadyDataContext(xPortalReady.BasePage.getAppConnectionString(5, events.Take(1).SingleOrDefault.contextid))

 

        Dim listEvents As New List(Of kdEvent)()

 

        For Each ev In events

            Dim currentEvent = (From e In dbEvent.Events _

                            Where e.Event_ID = ev.eventid _

                            Select e).SingleOrDefault

            If Not currentEvent Is Nothing Then

                dbEvent.Events.DeleteOnSubmit(currentEvent)

            End If

        Next

         

 

        dbEvent.SubmitChanges()

 

    End Sub

 

End Class

I have tried lots of changes to the script and web services, but with no success.

Can you please help me with this issue?

Thanks in advance,

Ricardo.

[Nikolay Rusev]

Hello,

There are a couple of examples demonstrating how to utilize Grid editing in various scenarios:
https://github.com/telerik/kendo-examples-asp-net
https://github.com/telerik/kendo-examples-asp-net-mvc

Greetings,
Nikolay Rusev
the Telerik team

[Ricardo Pinto]

Hello Nikolay!

Thanks for your answer!

It just happens that I used one of these examples as a roadmap for my scenario:
grid-web-service-crud

And I have tried a lot of possibilities but with no success.

I think the issue might be related with the "schema" / "data" configuration and the "stringify" methods.
Anything else I could change in my syntax?

Thanks again for your support,

Ricardo.

[Nikolay Rusev]

Hello Ricardo,

Unfortunately I am not sure what is causing this exception. For your convenience I am attaching on more sample app that implements scenario similar to yours.

Greetings,
Nikolay Rusev
the Telerik team

[Cyndie]

Did you ever resolve this issue?  I'm having a similar problem where create, update and destroy do not work, but I'm not getting any error messages.  Read works fine.

[Victor]

I downloaded the sample, but it does not work as:
1) Web Service does not have any methods defined (no code behind .asmx file) 
2) Transport properties (CRUD) of dataSource in grid setting are ignored and there are no any errors displayed on any action performed in grid

I also tried to recreate the sample with my Web Service (defined methods), but it exhibited the same behavior - transport is not hitting the Web Service, though I can hit it directly.

Can anyone finally help with that?

[Nikolay Rusev]

Hello Victor,

The web site from my last replay is actually working. The code for the service is actually in /App_Code/Products.cs.

There are also numerous examples showing CRUD operations  with various server implementations:
https://github.com/telerik/kendo-examples-asp-net-mvc
https://github.com/telerik/kendo-examples-asp-net

Regards,
Nikolay Rusev
Telerik

[Victor]

Nikolay,

I was able to setup sample in VS 2012 environment and seems my previous issues were related to SQL server express and Entity Model settings rather than Kendo grid.

Now Display, Create and Delete operation are working fine.
However now the Update operation causes error box to pop up stating that Data property is not set/valid.
Ignoring error in fact commits changes on screen and database, but it would be obviously nice to avoid it for end users.

Please refer attached file for screen shots and details.
Your help would be highly appreciated.

Thanks,
Victor Karlovich

[Nikolay Rusev]

Hello Victor,

From the doc file we are not able to determine what is causing you the error. You might be missing the Data field from the response?

If you send us a runnable sample we'll be able to assist you further.

Regards,
Nikolay Rusev
Telerik

[Victor]

Nikolay,

The project was compiled from the files you referred without alteration of original code.
I zipped the project for your review (change extension to 7z).

I also went through all other samples you suggested.
Unfortunately none of them shows plain utilization of SQL server stored procedure that may return dataset, data table, xml, or any other type.

Seems that the key is to cast/map any result returned from data source components (including SQL SP)  into DataSourceResult type/object and specifically its property Data (IEnumerable).

So far my attempts to map the result of SP into that property failed.

The issue boils down to the same Data property in schema definition of the grid on JavaScript side:

1.     This version  schema: {data: "d.Data",…} produces “error 0x800a138f - JavaScript runtime error:
         Unable to get property 'Data' of undefined or null reference” in this line of code 
         function anonymous(d) {return d.d.Data}

2.     This version schema: {data: "d",…} returns blank result

Can you please provide any sample of using SP and rules on type and mapping to Data property of server DataSourceResult object and converting it into Data property of response object on client side?

Thanks,
Victor Karlovich

[Nikolay Rusev]

Hello Victor,

I've updated the Update method of the service to return proper response. You can find it as a sample in attached to this post.

Unfortunately we don't have example showing binding with stored procedures.

Regards,
Nikolay Rusev
Telerik