Questions on Kendo UI for jQuery Forum

1 answer

639 views

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

62 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

109 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.9K+ 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

938 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

141 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

918 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

answered on 25 Mar 2013

5 answers

185 views

Kendo grid with Virtual Scrolling

Hi Guys,

I have some problems about Virtual Scrolling of Kendo Grid, sometime total records of grid doesn't correct when I scroll it up and down. it show only 914 records but it must show 1000 records instead, but when I scroll it up then it will working fine. Many thanks for your help.

Grid

answered on 25 Mar 2013

2 answers

111 views

datasource schema parse data is not writable

I am attempting to use the parse function as described in the docs here:
http://docs.kendoui.com/api/framework/datasource#configuration-schema.parse-Function

I'm trying to convert a field in my data to a date like so:

parse: function(data) {
for(var i = 0; i < data.length; i++){
data[i].CreatedDate = new Date(data[i].CreatedDate);
}
return data;
}

However if I put a breakpoint on the line "return data" and inspect the data object, all of the CreatedDate properties are still strings. I tried various things before checking the property descriptor and finding that writable is false. I checked the property descriptor like so:

Object.getOwnPropertyDescriptor(data[0], "CreatedDate");

and the output was:

{
configurable: false,
enumerable :true,
value: "Mon Oct 13 1975 11:13:00 GMT+1000 (E. Australia Standard Time)",
writable: false
}

So no matter what changes I tried to make in the parse function, nothing would persist. I even tried data[i].CreatedDate = null so I know it hasn't got anything to do with converting strings to dates.

I created a quick jsbin.com but I couldn't replicate the result (so I don't see a point in including it here)- the property descriptors were writable = true. I'm not sure why the code in my icenium project is causing writeable to be false and I don't even know where to look to try and figure this out. It may have nothing to do with it but my data-source transport is reading from an SQLite database (unlike my jsbin test that used a local array), the code of which is based on the SQLite example project I found in icenium.

Any help would be much appreciated.

General Discussions

answered on 25 Mar 2013

1 answer

102 views

ajaxRequest Issue

Hi; I have seen all the ajaxRequest threads here and I've tried all the suggestions of using the API call but I'm not getting anywhere with this sample code...

<body>
<div id="example" class="k-content">
    <div id="vertical">
        <div id="header-pane">
            <div class="pane-content">
                <h3>Header pane</h3>
            </div>
        </div>
        <div id="menu-pane">
            <div class="pane-content1">
                <div id="topmenu">
                    <ul id="menu">
                        <li>
                            Products
                        </li>
                        <li>
                            Stores
                        </li>
                        <li>
                            Blog
                        </li>
                        <li>
                            Company
                        </li>
                        <li>
                            Events
                        </li>
                        <li> </li>
                        <li>Search combo box</li>
                        <li>Shopping Cart: $xxx.xx (Items)</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="center-pane">
            <div id="horizontal" style="height: 100%; width: 100%">
                <div id="left-pane">
                    <div class="pane-content">
                        <h3>Left pane</h3>
                        <p>Resizable and collapsible.</p>
                    </div>
                </div>
                <div id="middle-pane">
                    <div class="pane-content">
                        <h3>Center pane</h3>
                        <p>Resizable only.</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer-pane">
            <div class="pane-content">
                <p>Copyright © <SCRIPT>
                    
                </SCRIPT> My Products, All Rights Reserved.</p>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#vertical").kendoSplitter({
                orientation: "vertical",
                panes: [
                    { collapsible: false, resizable: false, size: "70px" },
                    { collapsible: false, resizable: false, size: "55px" },
                    { collapsible: false },
                    { collapsible: false, resizable: false, size: "55px" }
                ]
            });

            $("#horizontal").kendoSplitter({
                panes: [
                    { collapsible: true, size: "100px" },
                    { collapsible: false }
                ]
            });
        });
        $("#menu").kendoMenu();
        // get a reference to the splitter
        var splitter = $("#horizontal").data("kendoSplitter");
        // load content into the pane with ID, pane1
        splitter.ajaxRequest("#middle-pane", "http://localhost/terms_conditions.html");
    </script>
</body>
</html>

Would appreciate some suggestions.
Thanks

Splitter

answered on 24 Mar 2013