Questions on Kendo UI for jQuery Forum

0 answers

84 views

Hi,

I'm using KendoUI Gauge with Knockout, and it works fine. But when the value is greater than the max value, I'd like to update the max value to my actual value.
I'm using this documentation Kendo-Knockout
I build a simple demo to ilustrate: Example

How could I do something like that using Knockout?
Thanks.

EDITED:
Forget about that. I was trying to update a single property from my ScaleOptions object, but when I recreate the entire object, it works.

myViewModel.ScaleOptions().max = newValue;

myViewModel.ScaleOptions({

min: 0,

max: newValue,

ranges: [{

from: 0,

to: 40

}, {

from: 40,

to: 80

}, {

from: 80,

to: newValue

}]

});

Gauges

asked on 25 Mar 2013

1 answer

103 views

ComboBox api

Hello!
Tell me, please, what is the right way to determine is ComboBox.dataSource of existing ComboBox binded with data on server (ServerBinding) or ComboBox.dataSource has ClientBinding settings? Thanks

ComboBox

answered on 25 Mar 2013

1 answer

82 views

"Select" event doesn't fire when using keyboard

http://demos.kendoui.com/web/multiselect/events.html

If you use your mouse to select an item, the "select" event fires. If you use your keyboard, it does not fire. Is there a workaround for this?

Nick

MultiSelect

answered on 25 Mar 2013

1 answer

621 views

How to Decode Html

enter code hereHow to see Bold , italic etc text?I have this in my create view:
@(Html.Kendo().EditorFor(model => model.Content))
In my cotroller this :
Content = HttpUtility.HtmlDecode(opininonmodel.Content)
,i try with Server.HtmlDecode , but still see html tags not what they make.

In index View where result should show I have this :
@foreach (var item in Model)
{
@Html.DisplayFor(modelItem => item.Content)
}

Editor

answered on 25 Mar 2013

2 answers

60 views

html generated by kendoui grid

I was wondering if it would be possible to change the html that is generated by the kendoui grid, right now everything is done with tables and was hoping to avoid the use of tables within the site.

Grid

answered on 25 Mar 2013

2 answers

107 views

CORS and IE problem

Hello everybody,
I continue with my KendoUI evaluation. With the help of Rosen (thank you again) I fixed the PUT, DELETE verbs problem (you can see it in this thread), but that solution only worked in Chrome, I found a more complex solution here (http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api-rc-version.aspx) and then I have finally make my project work in all browsers but IE.
Debugging with Fiddler I realized that the browser didn't send the HTTP request. With the help of this article (http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx) and this javascript (https://github.com/dkastner/jquery.iecors/blob/master/jquery.iecors.js) I transformed the XHR request to a XDR one, and now the bowser issues the request correctly and receives the answer in JSON format, but the grid doesn't show the registers (others browsers like Opera, FireFox and Safari work OK).
You can reproduce this behaviour downloading my test project from (https://github.com/ragare62/AriUserManagement) and loading AriUMSolution, starting AriUMWebApi and AriUMWebHtml. If you load UserGrid.shtml you can see what I'm talking about.
Again, any help would be appreciate, I think I'm near to the end but I can't fix this problem.
By the way, I'm experiencing a bug in this forum and I can't read my own threads after post them. I return to the previous page when I try to read them, I can read other threads without problem.
Best regards.

Data Source

answered on 25 Mar 2013

9 answers

1.8K+ views

kendo grid: what script files do I include?

Im looking at alot of examples and also the documentation and cant find a clear explanation of what script files are required.

Therefore im getting the following script crash error.

Unhandled exception at line 10, column 1735 in http://localhost:10312/Scripts/kendo/2012.2.710/kendo.grid.min.js
0x800a138f - Microsoft JScript runtime error: 'ui' is null or not an object

Im currently including the following script files:

kendo.grid.min.js,
kendo.web.js,
jquery-1.8.0.min.js

And im trying out the simple table example on the docs page at kendo.

Entire page code below:

<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/kendo/2012.2.710/kendo.grid.min.js"></script>
<script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>

<table id="grid">
<thead>
<tr>
<th data-field="title">Title</th>
<th data-field="year">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star Wars: A New Hope</td>
<td>1977</td>
</tr>
<tr>
<td>Star Wars: The Empire Strikes Back</td>
<td>1980</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
$(document).ready(function () {
$("#grid").kendoGrid();
});

</script>

Grid

answered on 25 Mar 2013

16 answers

915 views

Datasource, using JSP, Javascript and Java action

I was wondering if any one had a working example of loading data onto a grid using a Java action?

The following is a code snippet of something I did a while back using DHTMLX Grid and Dojo.

So, inside my JSP I call the Java action that returns the data in XML format like so:

<script>

var mysubgrid;

mysubgrid = new dhtmlXGridObject('gridbox');

function doInitSubGrid(rowID)

{

var leadsSourceRecId = rowID ;

var URL = "" ;

var query = "pLeadsSourceRecId=" + leadsSourceRecId ;

mysubgrid = new dhtmlXGridObject('mysubgrid_container');

mysubgrid.setImagePath("../dhx/codebase/imgs/");

mysubgrid.setHeader("LEADS MASTER LIST,#cspan,#cspan,#cspan,#cspan,#cspan") ;

mysubgrid.attachHeader("Status, Source, Date, Name, Email, Home Phone");

mysubgrid.attachHeader("#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter");

mysubgrid.setInitWidths("80,100,100,170,170,100");

//mysubgrid.setColAlign("left,left,left,left,left,left")

mysubgrid.setSkin("light");

mysubgrid.setColSorting("str,str,str,str,str,str");

mysubgrid.setColTypes("ro,ro,ro,ro,ro,ro");

mysubgrid.attachEvent("onRowSelect",doOnRowSelectedSubGrid);

mysubgrid.init();

// HERE IS WHERE I CALL MY JAVA ACTION: GetLeadsGridDataStr.action

           // I PASS A PARAMETER CALLED pLeadsSourceId

mysubgrid.loadXML("GetLeadsGridDataStr.action?pLeadsSourceRecId=" + leadsSourceRecId) ;

}

</script>

The data is then rendered on the DHTMLX Grid.

Does Anybody have an example like this one using Kendo?

Data Source

answered on 25 Mar 2013

1 answer

127 views

DropDown/Select list work as tabstrip

I have problem with making drop down or select list in the same way as tabstrip, so after change value it refreshes view with proper param.

Tried folowing code, but this is not causing view refresh:

<select name="weekChooser" onchange="javascript:handleSelect(this);">

<option id="choose0" value="#chartView?period=13">CW13 - 26/03/2012</option>

<option id="choose1" value="#chartView?period=14">CW14 - 02/04/2012</option>

</select>

<script type="text/javascript">

function handleSelect(elm)

{

window.location = elm.value;

}

</script>

where view is defined like :

<div data-role="view" id="chartView" data-title="Some Title" data-layout="databinding" data-init="initChart" data-show="refreshChart">

<div>

</div>

Can anybody help with this?

General Discussions

answered on 25 Mar 2013

8 answers

888 views

Grid throws an Javascript error on error returned from server

Hello everybody,

I have a Grid placed on a view page in MVC application. The code looks like this:

@{

ViewBag.Title = "Grid";

}

@section scripts {

<script type="text/javascript">

var wnd;

var myModel = kendo.data.Model.define({

id: "PrimaryKey",

fields: {

PrimaryKey: { type: "number", editable: false, nullable: false },

FirstField: { type: "string" },

SecondField: { type: "string" }

}

});

var myDataSource = new kendo.data.DataSource({

type: "json",

transport: {

read: {

url: "@Url.Action("List")",

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

type: "POST"

},

create: {

url: "@Url.Action("Create")",

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

type: "POST"

},

update: {

url: "@Url.Action("Update")",

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

type: "POST"

},

destroy: {

url: "@Url.Action("Delete")",

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

type: "POST"

},

parameterMap: function (data, type) {

if (type == "read") {

if (data.filter) {

data = $.extend({ sort: null, filter: data.filter.filters[0] }, data);

} else {

data = $.extend({ sort: null, filter: null }, data);

}

return JSON.stringify(data);

} else {

return JSON.stringify({ model: data });

}

},

batch: false,

pageSize: 3,

serverPaging: true,

serverFiltering: true,

serverSorting: true,

schema: {

errors: function (response) {

if (response.Errors) {

alert(response.Errors);

myDataSource.cancelChanges();

}

},

aggregates: function (response) {

response.Aggregates;

},

data: function (response) {

return response.Data;

},

total: function (response) {

return response.TotalRecordCount;

},

model: myModel

}

});

$(document).ready(function () {

isCreating = false;

$("#grid").kendoGrid({

dataSource: myDataSource,

height: 250,

selectable: true,

pageable: true,

toolbar: [

{ name: "create", text: "New item" }

],

columns: [

{

field: "PrimaryKey",

title: "Primary Key",

attributes: {

style: "text-align: center"

},

width: 100

},

{

field: "FirstField",

title: "First Field",

attributes: {

style: "text-align: center"

}

},

{

field: "SecondField",

title: "Second Field",

attributes: {

style: "text-align: center"

},

width: 180

},

{

command: [

{

name: "edit",

text: { // sets the text of the "Edit", "Update" and "Cancel" buttons

edit: "Edit me",

update: "Save",

cancel: "I give up"

}

},

{ text: "Delete", click: ShowConfirmation }

],

// sets the title and the width of the commands column

title: " ",

width: "180px"

}

],

editable: {

mode: "popup",

update: true

},

edit: function (e) {

if (isCreating) {

e.container.kendoWindow("title", "New item");

isCreating = false;

} else {

e.container.kendoWindow("title", "Item updated");

}

});

wnd = $("#confirmationBox")

.kendoWindow({

title: "Brisanje stavke",

animation: false,

modal: true,

width: "370px"

}).data("kendoWindow");

$(".k-grid-add").on("click", function () {

isCreating = true;

});

$("#confirmationOKButton").click(function (e) {

DoAjaxDelete();

return false;

});

$("#confirmationCancelButton").click(function (e) {

wnd.close();

return false;

});

function ShowConfirmation(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

wnd.center().open();

$("#deleteID").val(dataItem.SIzborID);

}

function DoAjaxDelete() {

$.ajax({

type: "POST",

url: "@Url.Action("Delete")",

data: $("#deletePopup").serialize(),

success: function (response) {

if (response == "OK") {

//osvježimo grid

var first = myDataSource.get($("#deleteID").val());

myDataSource.remove(first);

myDataSource.sync();

//zatvorimo popup

wnd.close();

}

else {

alert('Delete failed for the following reason: ' + response);

}

});

}

</script>

}

<h2>Grid</h2>

<p> </p>

<div id="grid"></div>

<div id="confirmationBox" style="display:none">

<form id="deletePopup">

<input type="hidden" id="deleteID" name="deleteID"/>

<p class="confirmationQuestion" style="padding:10px 0"><span class="exclamationIcon" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to delete this?</p>

<a class="k-button" id="confirmationOKButton">Sure</a>

<a class="k-button" id="confirmationCancelButton">Get me out of here</a>

</form>

</div>

What I am trying to do here are two things:
1. I am not using standard confirmation box and I want to show a Kendo modal popup with my message. I did this via custom command button that shows Kendo window widget and based on chosen button fires a AJAX call for server to do the processing. If everything is OK, delete the row in data source and sync the datasource.
2. I am doing CRUD operations via JSON POST calls.

For both these things I have set up my server logic to work according to schema specification, i.e. return Data serialized object for Create/Edit/List operations and returning Error object if there is any kind of error. My error definition does this myDataSource.cancelChanges();, as I thought this would cancel any operation that it was trying to perform.

I am experiencing strange behavior. When I am doing the Create operation and fill the form and submit it, if there is a server-side validation that fails, I am returning an Error object which should fire the error event for datasource. It does and it goes OK.

I have noticed a strange behavior in sense that when I click for the second time to create the item and fill the form again with information that would return validation error it shows the alert message again but this time It gets stuck in JavaScript error: TypeError: d is undefined in following part of the unminified kendo.web.js file:

getter: function(expression, safe) {

return getterCache[expression] = getterCache[expression] || new Function("d", "return " + kendo.expr(expression, safe));

},

Any help on this is very welcome. Thanks.

Dragan

Grid