Questions on Kendo UI for jQuery Forum

1 answer

492 views

How do I display virtual model entities as grid fields?

Hi,

I am using MVC 4, reposistory pattern and EF 4.3, I am trying to display virtual objects that are in my models.

For example in a products model you may have:

public int ProductID {get;set;}
public string Title {get;set;}
public int CategoryID {get;set;}
public double Price {get;set;}
public bool Discontinued {get;set;}
public virtual Category Category {get;set;}

The the category model may be:

public int CategoryID {get;set;}
public string Name {get;set;}

So in my properties CRUD grid I want the user to see the Products.Category.Name rather than the Products.CategoryID.

I also want a dropdown for users to select the Category name from and this would update the products model with the CategoryID.

The problem I get when I reference Products.Category.Name is that the grid displays "UnDefined" in the category column.

Please can someone show me both the controller actions and the view as an example of how this should be achieved.

I am using Razor views.

Many thanks,

Andy

Grid

answered on 20 Jul 2012

2 answers

276 views

Sync remote datasource with switch

Hi there,

I'm new to kendo and just exploring the almighty MVVM. Since I guess I grasped the fundamentals I wanted go a bit further.
I set up a small environment which let's me query data from a remote database (a PHP-script). Binding this data to a kendo.observable works!

Now, in a detail view, I want to provide a switch, that changes the status of the corresponding record.
Here's the template of the detail view:

<div data-role="content">

<aside>

<p>Hello, I'm the Detail's page (Product)</p>

</aside>

<h2 data-bind="text: product.desc"></h2>

<p data-bind="text: product.price"></p>

<p data-bind="text: isChecked"></p>

<p>visible <input id="visibilitySlider" data-role="switch" data-bind="checked: isChecked" /></p>

</div>

When fetching the data the isChecked method is executed (which simply returns true or false, depending on the database value)

var productDetailModel = kendo.observable({

isChecked: function() {

var product = this.get('product');

if(typeof product != 'undefined')

{

return (product.status == 1)?true:false;

}

productDS.sync();

}

})

I though simply calling DS.sync() would synchronize the model data with the server data, but a test console.log() isnt't even called upon clicking the slider (which I thought reacts to the checked-binding)

Here are my model and the used DS

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

id: 'id'

});

var productDS = kendo.data.DataSource.create({

transport: {

read: {

url: '/get.php',

dataType: 'jsonp',

data: {

type: 'products'

}

},

update: {

url: '/set.php',

type: 'POST'

}

},

schema: {

model: Product

},

requestStart: function() {

app.showLoading();

},

pageSize: 10

});

So my question is: How do I keep the data from the (hopefully correctly defined) Model in sync with the server data (everytime s.o. changes the slider)

Thx

MVVM

answered on 20 Jul 2012

1 answer

126 views

TreeView.treeviewFromNode breaks extensions

In the newest release (kendoui.complete.2012.2.710.commercial.zip), the following method breaks anyone whose extended TreeView:

function treeviewFromNode(node) {
return $(node).closest("[data-role=treeview]").data("kendoTreeView");
}

We have a "kendoTTreeView,"

TreeView

answered on 20 Jul 2012

1 answer

116 views

Listview not filling

I have a listview that was filling fine until I changed the template to include and <a href="jj"> tag. If I remove the href the listview fills. Is this a bug or is there a workaround?

Sample Code:

The following works and fills the listview as expected:

<script id="department_template" type="text/x-kendo-tmpl">
<li><a onclick="GetCategoriesFor('${Value}')">${Value}</a></li>
</script>

If however I add an href (this is the ONLY change made in the page) it fails to fill the listview

<script id="department_template" type="text/x-kendo-tmpl">
<li><a href="#categories" onclick="GetCategoriesFor('${Value}')">${Value}</a></li>
</script>

Templates

answered on 20 Jul 2012

1 answer

199 views

Passing headers while uploading

Trying to figure out a way to add headers to upload request. any help please?

Upload

answered on 20 Jul 2012

3 answers

183 views

Backbutton bottom Gap

Kendo UI mobile CSS v2012.2.710
tested on iPhone 4s IOS 5.1.1 and Chrome v19.0.1084.46 on Win7

There's always a gap at bottom, any solution?

Also, the input will be doubled on Android while on focus.

Demo: http://jsbin.com/ageruw/7

General Discussions

answered on 20 Jul 2012

1 answer

527 views

DateTime problem with odata and datasource

Hello to everyone, I'm getting trouble with odata and datasource. I've an entity wich has a lot of date time fields wich are exposed by a grid. When I try to make an update i got this error:

400 Bad Request

The field xxxx cannot be converted to DateTime etc etc...... string is not a valid date time value.
Looking to POST request I've seen that the key /value pairs have this format:
"Expiry_Date":"/Date(-6847804800000)/"
I got this exception:
"type": "System.FormatException", "stacktrace": " in System.DateTimeParse.Parse(String s, DateTimeFormatInfo dtfi, DateTimeStyles styles)\r\n in System.Convert.ToDateTime(String value, IFormatProvider provider)\r\n in System.String.System.IConvertible.ToDateTime(IFormatProvider provider)\r\n in System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)\r\n in System.Data.Services.Serializers.JsonDeserializer.ConvertValues(Object value, String propertyName, Type typeToBeConverted, DataServiceProviderWrapper provider)"

Below there is the datasource and grid definitions:

var dataSource = new kendo.data.DataSource({

type: "odata",

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize: 20,

batch: false,

schema: {

model: {

id: "No_",

fields: {

No_: { type: "string" },

Customer_WR_Code: { type: "string" },

Description: { type: "string" },

State: { type: "string" },

Creation_Date: { type: "date" },

Creation_Time: { type: "date" },

Closing_Date: { type: "date" },

Closing_Time: { type: "date" },

Cancelling_Date: { type: "date" },

Cancelling_Time: { type: "date" },

Expiry_Date: { type: "date" },

Appointment_Begin_Date: { type: "date" },

Appointment_Begin_Time: { type: "date" },

Appointment_End_Time: { type: "date" },

Appointment_End_Date: { type: "date" },

DateTime_Field_1: { type: "date" },

DateTime_Field_2: { type: "date" },

Date_Field_1: {type:"date"},

Date_Field_2: {type:"date"}

}

},

transport: {

read: "WCFDB.svc/View_Work_Request",

update: {

url: "WCFDB.svc/View_Work_Request",

type: "POST",

dataType: "json"

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

height: 550,

pageable: {

refresh: true,

pageSizes: true

},

reorderable: true,

editable: "inline",

sortable: true,

filterable: true,

columnMenu: true,

navigatable: false,

resizable: true,

toolbar: kendo.template($("#tmplToolBar").html()),

change: function (e) {

var grid = $("#grid").data("kendoGrid");

var model = grid.dataItem(grid.select());

refreshTab(model);

},

dataBound: function (e) { var item = e.sender.dataSource.at(0); refreshTab(item); },

selectable: "row",

columns: kendoGridColumns

});

Here the service:

[JSONPSupportBehavior]

public class WCFDB : DataService<WOMContainer>

{

// Questo metodo viene chiamato solo una volta per inizializzare i criteri a livello di servizio.

public static void InitializeService(DataServiceConfiguration config)

{

// TODO: impostare regole per indicare i set di entità e le operazioni del servizio visibili, aggiornabili e così via.

// Esempi:

config.SetEntitySetPageSize("*", 20);

config.SetEntitySetAccessRule("*", EntitySetRights.All);

config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

config.UseVerboseErrors = true;

}

................................

Data Source

answered on 20 Jul 2012

1 answer

241 views

List View edit template not binding correctly to date Picker

With the following template content for my list view...
<div class="list-view">
<input type="text" data-bind="value:shoppingList_main" name="shoppingList_main" required="required" validationMessage="required" />
<span data-for="shoppingList_main" class="k-invalid-msg"></span>
<br />
<input data-role="datepicker" type="text" data-bind="value:shoppingList_date" name="shoppingList_date" required="required" validationMessage="required" />
<span data-for="shoppingList_date" class="k-invalid-msg"></span>
<div class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\"><span class="k-icon k-update"></span>Save</a>
<a class="k-button k-button-icontext k-cancel-button" href="\\"><span class="k-icon k-cancel"></span>Cancel</a>
</div>
</div>

...
I get a date picker on my display and when I edit an item, it sets the display, and it sets the value in my datasource object, but the ajax request to the server doesn't send the date property...

Here is my datasource and list View js....

<script>
	jQuery(function () {
	shoppingLists_datasource = new kendo.data.DataSource({
	pageSize:4,
	schema:{
	model: {
	id: 'familyShoppingList_id',
	fields: {
	familyShoppingList_id: { editable: false, nullable: true },
	shoppingList_main: { editable: true},
	shoppingList_date: { editable: true}
	}
	}
	},
	transport:{
	read:{
	url:'/apps/wpd/apps/shopping/index.cfc?method=getShoppingLists',
	dataType: 'json'
	},
	create:{
	url:'/apps/wpd/apps/shopping/index.cfc?method=saveShoppingList',
	dataType: 'json'
	},
	update:{
	url:'/apps/wpd/apps/shopping/index.cfc?method=saveShoppingList',
	dataType: 'json'
	},
	destroy:{
	url:'/apps/wpd/apps/shopping/index.cfc?method=removeShoppingList',
	dataType: 'json'
	}
	}
	})
	})

	</script>

	<script>
	var shoppingLists_listView;
	jQuery(function () {
	shoppingLists_listView = jQuery("#shoppingLists").kendoListView({
	dataSource: shoppingLists_datasource,

	template: kendo.template($("#viewTemplate").html()),
	editTemplate: kendo.template($("#editTemplate").html())

	})

	.delegate(".k-edit-button", "click", function(e) {
	shoppingLists_listView.edit($(this).closest(".list-view"));
	e.preventDefault();
	})
	.delegate(".k-delete-button", "click", confirmDel)
	.delegate(".k-update-button", "click", function(e) {
	shoppingLists_listView.save();
	e.preventDefault();
	})
	.delegate(".k-cancel-button", "click", function(e) {
	shoppingLists_listView.cancel();
	e.preventDefault();
	})
	.data("kendoListView")
	})

	</script>

...

Any idea how to get this working round trip w/ the datePicker? For now I just required the field, and used a date pattern, but date picker would be a much better option

ListView

answered on 20 Jul 2012

0 answers

94 views

Focus issue in Grid

Hi
Greeting!!
I am facing an issue of focus in grid view, scenario like:

1. Developing an financial portal, there is a watch list and consists of scrips in grid.
2. Select grid and press any key for invoking new window and when window is closed then FOCUS shifted and does not go back to grid again,
Please help me to resolve the issue.

Thanks in advance

Regards
Manash

Grid

asked on 20 Jul 2012

0 answers

203 views

Focus issue in Tabstrip

Hi
Greetings!!
In Tabstrip we are facing an issue of focus, scenario is:

1. we have 3 tabstrip, A, B,C
2. by default focus is in Tab A,
3. when data pushed from backend to Tab B, then the focus is not shifting from A to B automatically, so unable to view the data displayed in Tab B because of no indication. So please help me to resolve the issue.

Thanks in advance.

Regards
Manash

TabStrip

asked on 20 Jul 2012