Questions on Kendo UI for jQuery Forum

10 answers

305 views

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

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>

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

Grid

answered on 18 Jul 2013

4 answers

2.9K+ views

Kendo Grid Template Input onChange

Hello,

Is it possible to to change the value(recalculate) the cell of the "Total" column in the grid while the user types in a "Quantity"(input)? This is a shopping list grid, there is a "Price" (bound column) and I need to calculate the Total dynamically based on the Quantity that the user will input. Maybe I'm doing it wrong, can you please point me to the right direction? Thanks,

var gridResult = $("#grid").kendoGrid({

dataSource: {

type: "aspnetmvc-ajax",

// type: "json",

transport: {

read: "Home/Products_Read"

},

schema: {

data: "data",

total: "total",

model: {

id: "products",

fields: {

Code: { editable: false },

Number: { editable: false },

Name: { editable: false },

Supplier: { editable: false },

Price: { editable: false, type: "number" },

Quantity: { editable: true, type: "number" },

Total: { editable: true, type: "number" }

}

},

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

selectable: "row",

sortable: true,

pageable: true,

columns: [

{ field: "Number", title: "Number", width: "100px" },

{ field: "Name", title: "Name" },

{ field: "Supplier", title: "Supplier", width: "100px" },

{ field: "Price", title: "Price", width: "100px", format: "{0:n}" },

{ field: "Quantity", title: "Quantity", width: "100px", template: '<input data-role="numerictextbox" data-bind="value: Quantity" data-max-value="100" class="quantityTextArea" />' },

{ field: "Total", title: "Total", width: "100px", template: "#= Price #" }

],

rowTemplate:

'<tr data-uid="#= Code #">' +

'<td><span>${Number}</span></td>' +

'<td><span>${Name}</span></td>' +

'<td><span>${Supplier}</span></td>' +

'<td><span>${Price}</span></td>' +

'<td><input data-role="numerictextbox" data-bind="value: Quantity" data-max-value="100" class="quantityTextArea" /></td>' +

'<td>#=Price*Quantity#</td>' +

'</tr>'

});

Grid

answered on 18 Jul 2013

5 answers

320 views

Touch Gesture Support for Kendo UI Web

Hi,

The website I am creating is responsive and displays on mobile, tablets and PCs. I'd like to know if KendoUI web has support for touch gestures such as:

Tap
Hold - e.g. to load a context menu or something similar
swipe left
swipe right
swipe up
swipe down
pinch
rotate-left
rotate-right

At the moment I am looking at Hammer.js - http://eightmedia.github.io/hammer.js/

I would much prefer if Kendo supported these features.

Can you please let me know if :
1. Kendo UI Web does support these gestures?
2. Can I somehow use Kendo UI Mobile and Web at the same time to support these features?
3. Will these features be supported in the future for UI Web?

Thanks

General Discussions

answered on 18 Jul 2013

1 answer

71 views

Small documentation error (fomatting)

In the documentation, at http://docs.kendoui.com/api/web/editor , there are two spots where the tool is incorrectly spelled "fomatting", instead of the obvious "formatting". Just so you guys know.

Editor

answered on 18 Jul 2013

2 answers

108 views

Q2 Mobile Theme Support - How to Enable

How do we enable the use of themes for the mobile kendo application? I downloaded the Q2 bits, upgraded my mobile application, however I don't know how to tell the application to not automatically detect a platform. I know how to override the platform... is there a special value to use for the platform option for the kendo mobile application? I didn't find anything for this in the documentation: http://docs.kendoui.com/getting-started/mobile/application

app = new kendo.mobile.Application($(document.body), {

initial: "rootView",

transition:'slide',

loading: '<h1 class="loading-message">Loading...</h1>',

platform: null

});

General Discussions

answered on 18 Jul 2013

1 answer

96 views

Closing a kendo ui mobile view

How can i close a kendo ui mobile view and also unload all its content. This view contains a youtube video that needs to be stopped / unload once a user click on the back button at the top of the view or on android using the physical back button on the device?Here is the code to my view, but i can't seems to get the view to close. When i use the back button the view goes away but it content does not unload.

<div data-role="view" id="showpostlayout" data-layout="defaultlayout" data-reload="true">

<div data-role="header">

<div data-role="navbar"><a data-click="closePost" data-role="button" data-align="right">Close</a> </div>

</div>

<div id="mypost">

</div>

<script>

function closePost() {

$("#showpostlayout").kendoMobileModalView("close");

}

</script>

General Discussions

answered on 18 Jul 2013

7 answers

389 views

html5 video on data-role="view"

Hello,

I'm using the beta version of kendoui and i've made this code:

<div data-role='view'>
<video>
<source src="video.mp4" type="video/mp4" />
</video>
</div>

this code works perfectly on my computer browsers like (chrome,safari, firefox). The problem is, it wont work on my ipad safari.

is this a bug or my mistake?

really having a trouble here. hoping for your response. thanks.

Application

answered on 17 Jul 2013

2 answers

1.0K+ views

Setting grid height correctly

Hi,
We create the grid and fill it with data dynamically at the page startup.

We first create a div like that:

$grid = $("<div></div>");

then we set the height:

$grid.filter('div').css("height", '300px')

then set all other parameters (datasource, column,...). After initialising the grid:

$grid.kendoGrid({});

The gird height do not fill all the container DIV height. If I use paging or filter, sorting, the grid reseized and fill the container DIV
I try to call this function after initialisation:

ConstV7.prototype.resizeGrid = function(grid) {

var gridElement = grid,

dataArea = gridElement.find(".k-grid-content"),

gridHeight = gridElement.innerHeight(),

otherElements = gridElement.children().not(".k-grid-content"),

otherElementsHeight = 0;

otherElements.each(function () {

otherElementsHeight += $(this).outerHeight();

});

dataArea.height(gridHeight - otherElementsHeight);

}

This function work perfectly if I set a breakpoint before calling it. The grid resized and fill the container DIV. But if I let the code run normally, I got the same problem like if the function was called too erlied.
Any suggestion?

Grid

answered on 17 Jul 2013

3 answers

169 views

Scale Labels in units

Is there a way to represent the scale labels in kilos say 100k, 200k, 1m in the radial Gauge ?
Since I have to display pointer value 2985653 and scale labels are large.

Gauges

answered on 17 Jul 2013

5 answers

105 views

Paging not working

I am trying to figure out why why both paging and filters are not working (sorting is fine). But I am focusing on paging first.

I think I have two different paging problems:
1) If I click on any of the 4 paging arrows nothing happens and no javascript code is triggered.
2) If I type 2 + ENTER, the parameterMap function executes, but options.pageSize is 1 instead of 2.

I can provide more info if needed.

Thanks in advance for any help,
Simon

Grid

answered on 17 Jul 2013