Questions on Kendo UI for jQuery Forum

4 answers

154 views

Hi,

I'm kinda new to Kendo UI so its possible I've missed it in the discussions here.

We're building a PoC with Kendo UI and MVC3 in Visual Studio 2010. What I noticed today is that an 'inline' edit in the Kendo Grid leads to different results in IE9 and FireFox. When I edit a line in IE9, update it to the server the data is persisted correctly in the DB and the screen show the new value. After a refresh however the old data is back. Closing IE9 all together and restarting the App gives me the data from DB correctly.

If I do the same in FireFox after a refresh the data is shown correctly.

When I empty the cache in IE9 before the refresh the behavior is as expected (showing the correct information from the DB).

Here's some of my code:
The Update Method in the Controller

public HttpResponseMessage Update(int id)

{

HttpResponseMessage response = new HttpResponseMessage();

using(var entity = VMProjectRegel.GetById(this, Id))

{

entity.Aantal = Convert.ToInt32(Request["Aantal"]);

entity.Prijs = Convert.ToDecimal(Request["Prijs"]);

entity.BTW = Convert.ToDecimal(Request["BTW"]);

entity.CreatedOn = Convert.ToDateTime(Request["CreatedOn"]);

entity.CreatedBy = Convert.ToInt32(Request["CreatedBy"]);

entity.ChangedOn = Convert.ToDateTime(Request["ChangedOn"]);

entity.ChangedBy = Convert.ToInt32(Request["ChangedBy"]);

ORMSession.SaveChanges();

response.StatusCode = HttpStatusCode.OK;

}

return response;

}

The view:

<script src="@Url.Content("~/DataSources/ProjectOnderhoudDataSource.generated.js")" type="text/javascript"></script>

<div id="projectEditForm">

<input id="DatumAanvang" data-bind="value: selectedProject.DatumAanvang" />

<hr />

<div id="projectRegelGrid" />

<script type="text/javascript">

$(function ()

{

$("#DatumAanvang").width(220).kendoDatePicker();

ProjectOnderhoudDataSource.bind("change", function (data)

{

ProjectOnderhoudViewModel.set("selectedProject", this.view()[0]);

});

ProjectOnderhoudDataSource.read();

kendo.bind($("#projectEditForm"), ProjectOnderhoudViewModel);

ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId = 1;

$("#projectRegelGrid").kendoGrid

({

columns:

[

{ field: "Aantal", title: "Aantal" },

{ field: "Prijs", title: "Prijs" },

{ field: "BTW", title: "BTW" },

{ field: "CreatedOn", title: "Datum aangemaakt", template: '#= kendo.toString(CreatedOn, "dd MMMM yyyy") #' },

{ field: "ChangedOn", title: "Datum gewijzigd", format: "{0:dd MM yyyy}" },

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

],

editable: "inline",

deletabled: true,

pageable: true,

sortable: true,

dataSource: ProjectOnderhoudProjectRegelListDataSource,

pageSize: 3,

serverPaging: false

});

</script>

</div>

Regards
Paul.

Data Source

answered on 04 Oct 2012

0 answers

97 views

how to apply editor for separate lines (see att.)

Please advise, for example please see attachment. Is it possible to type in a text in text input(s), then select portion of text and apply editor styles such as bold, text color etc.?

Thank you for your input.

Editor

asked on 04 Oct 2012

4 answers

614 views

KendoGrid edit and destroy ajax call

Hello,

I'm using KendoGrid to populate the data and also doing CRUD functionality. But my problem is that I'm not able to update/Delete entities as I'm not able to make ajax call .

Kindly suggest me where I'm going wrong .

Thanks,

$("#GridTestJS").kendoGrid({

columns: [{ title: "Fontfamily", field: "Fontfamily" },

{ title: "FontPreviewImage", field: "FontPreviewImage" },

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

editable: "popup",

dataSource:

{

transport:

{

read: { url: "/Test/GetFontDetails" },

update: { url: "/Test/updateFontDetails",

data: {}

},

destroy: { url: "/Test/destroyFontDetails" }

}

},

selectable: "row"

});

public JsonResult GetFontDetails()

{

var Allfonts = context.Fonts.ToList();

return Json(Allfonts, JsonRequestBehavior.AllowGet);

}

public JsonResult updateFontDetails(Font obj)

{

var Allfonts = context.Fonts.ToList();

return Json(Allfonts, JsonRequestBehavior.AllowGet);

}

public JsonResult destroyFontDetails(Font obj)

{

var Allfonts = context.Fonts.ToList();

return Json(Allfonts, JsonRequestBehavior.AllowGet);

}

Grid

answered on 04 Oct 2012

0 answers

129 views

Datasource for a WebApplication. ASP.NET

Hey,
I got a web application written in c# language and I wanted to include a kendo chart in it. No problems in getting the chart running with sample data. The issue occured when I need to bind the data with a list, which is converted into a valid JSON string, but its located on the server side in my chartpage.aspx.cs page and kendo chart is in the chartpage.
aspx page. Please could someone help me with descent samples, I guess I need to make an AJAX call but not sure.
regards,
neil

Charts

asked on 04 Oct 2012

1 answer

306 views

[Solved] Grid column template breaks Create action

I have a column field named Email in a datasource of Users. When I apply a template to the field (i.e. "<a href="mailto:#=Email#">#=Email#</a>"), and I click the Add new record button on the toolbar, I get an error stating that the field named Email is undefined. When I remove the template, the create action works like it should.

Here is the code that recreates the error:

/// <reference path="_references.js" />

var users = [

{ Id: '0', FirstName: 'Bruce', MiddleName: 'Ethan', LastName: 'Fletcher', Email: 'fake.email@nowhere.com', BirthDate: '1/3/1986' },

{ Id: '1', FirstName: 'Sally', MiddleName: 'Mary', LastName: 'Holland', Email: 'fake.email@nowhere.com', BirthDate: '7/12/1990' }

];

$(function () {

var userViewModel = new kendo.data.Model.define({

id: 'Id',

fields: {

Id: { editable: false, defaultValue: '9999' },

FirstName: { editable: true, nullable: false, validation: { required: true} },

LastName: { editable: true, nullable: false, validation: { required: true} },

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

Email: { editable: true, nullable: false, type: 'email', validation: { required: true} },

BirthDate: { editable: true, nullable: false, type: 'date' }

}

});

var userDataSource = new kendo.data.DataSource({

data: users,

schema: {

model: userViewModel

},

pageSize: 5

});

$('#user_grid').kendoGrid({

dataSource: userDataSource,

toolbar: [{ name: 'create'}],

columns: [

{ field: 'FirstName', title: 'First Name' },

{ field: 'MiddleName', title: 'Middle Name' },

{ field: 'LastName', title: 'Last Name' },

{ field: 'Email', title: 'Email Address', template: '<a href="mailto:#=Email#">#=Email#</a>', encoded: false }, // !! apply a template to break create !!

{ field: 'BirthDate', title: 'Birth Date', format: '{0:MM/dd/yyyy}' },

{ command: [{ name: 'edit', text: '' }, { name: 'destroy', text: ''}], title: '', width: '86px' }

],

pageable: {

refresh: true

},

editable: 'popup'

});

Grid

answered on 04 Oct 2012

1 answer

815 views

Binding E-mail field to href / mailto

Is there a way to bind an observable e-mail address to the href attribute of an element? I tried the following:
<a data-bind="{attr:{href:Email},text:Email}"></a>

But of course this lacks the needed "mailto:".

I know in Knockout you can do it like this:
<a data-bind="{attr:{href:'mailto:'+Email},text:Email}"></a>

I tried that in Kendo and it failed with an "Unrecognized string" error.

What's the best way to handle this type of binding in Kendo's MVVM setup?

MVVM

answered on 04 Oct 2012

1 answer

335 views

Unable to remove item from kendo dropdownlist programmatically

The following two methods for trying to programatically remove an item from a kendo dropdownlist were taken directly from Kendo forums but did not work. Both methods caused the dropdownlist to vanish entirely from the UI. The dropdownlist is defined in the header of a kendo grid control. I have verified that the _selectedLoosePartIndex value is good. Have to say that so far this product has cost me weeks of additional programing time trying to do the most simple tasks imaginable. I have no idea why it is such a popular product. I really do not believe that you guys have even attempted to thoroughly test the API in real world applications.

//Method one:

var data = $('#AvailableLooseParts').kendoDropDownList().data("kendoDropDownList").dataSource.data();

data = data.splice(_selectedLoosePartIndex, 1);

$('#AvailableLooseParts').kendoDropDownList().data("kendoDropDownList").dataSource.data(data);

// Method two:

var ddl = $('#AvailableLooseParts').data("kendoDropDownList");

var itemToRemove = ddl.dataSource.at(_selectedLoosePartIndex);

ddl.dataSource.remove(itemToRemove);

ddl.select(0);

DropDownList

answered on 04 Oct 2012

3 answers

177 views

Virtual scrolling for hierarchy Grid doesn't work properly

Virtual scrolling for hierarchy Grid doesn't work properly
Amend example http://demos.kendoui.com/web/grid/hierarchy.html to use virtual scrolling:
scrollable: {
virtual:true
}
Scroll down to the last record in the Grid. Try to open details.
Details grid is hidden, not possible to scroll down to view it.

Grid

answered on 04 Oct 2012

3 answers

1.2K+ views

Paging/filtering in query string and other parameters in body?

I have a fairly complex report I am creating that requires posting a bunch of JSON to a server. I have this up and running just fine with a data source. What I'm trying to do is to add server-side paging, into this process and am unsure how to proceed.

I thought it might make sense to put the paging in the query string of the URL that I'm posting the JSON to, but I can't figure out how to get the data source to accomplish this. I have turned on the server paging and set the page size properly. Does Kendo see that my read endpoint is a "POST" endpoint and just ignore adding anything to the query string? Is there a way to force it to add the current page size and page to the read URL?

Data Source

answered on 04 Oct 2012

0 answers

155 views

Nested DataModels

I'm trying to generate a popup for a grid that gets populated with a model that has nested models as properties.
I know the nested properties will not automatically show up in the edit popup (to my knowledge).
I tried using a custom template for the edit popup containing the additional fields that I require but this doesn't seem to work as-well.
Is it even possible to bind a hierarchical model to a (grid) popup up or must I create my own separate page for such scenarios?

Grid

asked on 04 Oct 2012