Questions on Kendo UI for jQuery Forum

8 answers

891 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

183 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

99 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

8 answers

409 views

Cannot Get Paging to Work

I've finally managed to get a datasource working, and bound to a grid. However, whatever I try, I cannot get paging to work, it always displays the complete dataset.

The code is:-

<table id="Table1" style="height: 450px">

<thead>

<tr>

<th data-field="surName">Surname</th>

<th data-field="foreName">Forename</th>

<th data-field="dOB">DoB</th>

</tr>

</thead>

<tbody>

<tr>

<td>Smith</td><td>John</td><td>21/5/2001</td>

</tr>

</tbody>

</table>

<script type="text/javascript">

var s = new GetPats();

var result = s.getpatlist('Benz');

//Data source

var localDataSource = new kendo.data.DataSource({ data: result, pagesize: 10, page:1 });

$("#Table1").kendoGrid({

columns: [{ field: "surName", title: "Surname" }, { field: "foreName", title: "Forename" }, { field: "dOB", title: "Date of Birth", template: '#= kendo.toString(dOB,"dd MMMM yyyy") #'}],

dataSource: localDataSource,

groupable: true,

scrollable: false,

sortable: true,

pageable: true,

height: 450,

selectable: true

});

</script>

Whilst the data is fetched from a remote source, as far as the kendo datasource is concerned, it's using a locally held array. Sorting and group work well, but no matter waht I try, paging doesn't work, and the date re-formatting also doesn't work.

Thanks

Grid

answered on 24 Mar 2013

3 answers

310 views

ListView in ListView

Hello all,

To jump right in, is there a way to have a listview within a listview?

The use of this is something like this:

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>Bob Jones</li>

</ul>

</li>

<li> Assets

<ul data-role=listview">

<li>Lawn Mower</li>

<li>Leaf Blower</li>

<li>Hedge Clippers</li>

</ul>

</li>

</ul>

The Asset listview is populated dynamically (and could have any number of asset items), while the outter listview is static. This is just an example. In my case, I have multiple lists like the asset list that are also populated dynamically.

I have a hackish way to get it to work using one big template for the main listview, and inside it, I populate the inner lists something like this:

# for (var i = 0; i < assetList.length; i++) { #

<li>#= assetList[i] #</li>

# } #

It works, but as mentioned, it is hackish, and I figure Kendo has a way to do it. A google search for "listview in listview" yields next to nothing suprisingly.

I know there's the ObservableObject, ObservableArray, HeirarchalDataSource, and DataSource. To be honest, I've read the documentation for them, but there aren't any complex, or "real world" examples that shown advanced use of the components, so it kind of leaves you to have to try a lot of experimentation (and a LOT of guessing) in order to use it to it's full potential.

ListView

answered on 23 Mar 2013

6 answers

952 views

HTML content in tooltip?

I have a field in a grid which contains HTML marked-up content. I want this content to be shown in the tooltip for the column, but the HTML markup is shown. Is there a way of providing HTML markup content for a tooltip?

I'm setting the title attribute on the field as follows (simplified example):

  { width: 40, field: "Description", title: "Description", attributes: { title: 'x<b>yy</b>zz' } },

The tags in my title attribute here get shown in the tooltip rather than being interpreted as markup. Is there a way to tell it to render the content as HTML?

ToolTip

answered on 22 Mar 2013

2 answers

99 views

Selectable bugs

Simple grid using version 2012.2.831 in MVC 4:

        @(Html.Kendo().Grid<SurveyTracker.Models.TimelineGrid>()
            .Name("TimelineGrid")
            .Columns(columns =>
                {
                    columns.Bound(p => p.BeginDate).Format("{0:MM/dd/yyyy}").EditorTemplateName("Date");
                    columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}").EditorTemplateName("Date");
                })
            .DataSource(source => source
                .Ajax()
                .ServerOperation(false)
                .Model(model => model.Id(x => x.Id))
                .Read(x => x.Action("GetTimelines", "Home").Data("filterTimelines"))
                )
            .Pageable()
            .Selectable(x => x.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
            .Navigatable()
            .Events(x => x.Change("selectTimeline"))
            )

Three issues:
1) The grid is not selectable unless it has the .Navigatable() option specified. The demo doesn't mention that.
2) Biggest issue: Selecting a row doesn't fire the change event.
3) It selects the cell instead of the row.

Any ideas on why this is happening? It's pretty close to the demo code under Grid/Events for MVC.

Grid

answered on 22 Mar 2013

5 answers

96 views

Use widget in Grid

how can i use kendo dropdownlist or other widgets in a grid cell in edit mode ?

Grid

answered on 22 Mar 2013

4 answers

589 views

Formatting numbers as dates in a grid

Hi

In my rest resource, dates come over as numbers; time in milliseconds. I'd like to take these numbers and convert them to dates. I do this in other places using moment (my app uses moment + requirejs + backbonejs)

var m = moment(new Number(value)).format(this.dateTimeFormat);

where the format is here: dateTimeFormat : 'MMM D, YYYY [at] h:mm a',

However, anytime I do this I get an error referring to no such function toLowerCase exists.

Any ideas?

Grid

answered on 22 Mar 2013