Questions on Kendo UI for jQuery Forum

1 answer

85 views

I have a situation where I am wanting to observe the behavior of a view model as I am populating a form. I can do this with defining a lot of fields that look kind of like the model, and binding to them, but that is kind of messy.

I am currently accomplishing this with the following code;

(function ($) {

$.printJSON = function(value){

return JSON.stringify(value, undefined, 2);

}

})(jQuery);

var viewModel = kendo.observable({

// other fields etc

update: function (e) {

e.preventDefault();

$("#json_result").html($.printJSON(this));

}

});

<div style="width: 400px; float: left; padding-left: 15px;" >

<button data-bind="click: update" value="Update" >Update</button>

<pre id="json_result">

</pre>

</div>

So you click the button, and it runs the function to draw the view model JSON to the screen, all nice and formatted.

But this still requires a button click. While that isn't that big of a problem for me, since this isn't something I need for a lot of situations, is there any way to actually do this and have it update when the view model changes in any way? I tried to just bind to the function and it never updates without an explicit call, I tried binding right to the view model, and that didn't work either.

MVVM

answered on 04 Nov 2013

1 answer

80 views

databound templated listview with external links

Hi,

We have a listview in kendo ui mobile using the flat theme bound to an array of items.
Each item in the list has an external URL that needs to be opened when the item is clicked on.

This works but the problem is that if the list is scrolled through the link that was touched opens as soon as the scrolling stops.
It should not open the link when doing a scrolling action only from the tap.

Other list views that navigate to internal views do not have this issue - the scrolling is just detected as a scroll action and the navigation is only done when the item is tapped.

here is the data template for the list

<a class="faqListQuestion" href="${url}" data-rel="external" >${title}<br /><span class="notificationDates">${date}</span></a>

</script>

Is there something wrong with my template or some other workaround for this issue?

Thanks
Gavin

General Discussions

answered on 04 Nov 2013

2 answers

166 views

Sending values to action

Hi,

how do I send the current multiselect values to an asp.net mvc 4 action, as a IEnumerable<int>?

I have:

@(Html.Kendo().MultiSelect()

.Name("Fields")

.DataTextField("Name")

.DataValueField("Id")

.Value(ViewData["tagslist"] as IEnumerable<int>)

.Filter(FilterType.Contains)

.Placeholder("...")

.Events(e =>

{

e.Change("change_field");

})

.DataSource(source => {

source.Read(read =>

{

read.Action("ShowFields", "Folders");

});

})

And I want to send the selected id's to an action which updates a model bound treeview:

<div id="tree">

@(

Html.Kendo().TreeView()

.Name("treeview")

.ExpandAll(true)

.TemplateId("treeview-template")

.DragAndDrop(true)

.BindTo(Model)

.Events(events => events

.DragEnd("onDragEnd")

)

)

</div>

This is my action to create the new model for the treeview:

public ActionResult Index(IEnumerable<int> fieldTags,int id = 1 )

{

IEnumerable<TreeViewItemModel> kendoModel = new List<TreeViewItemModel>();

SopFolder kendoStartFolder = db.SopFolders.Where(r => r.Id == id).Take(1).Select(r => r).ToList()[0];

kendoModel = CreateKendoTree(kendoStartFolder, fieldTags);

var SopFields =

db.SopFields

.Select(r => new

{

Value = r.Id,

Text = r.Name

});

List<int> tagslist = new List<int>();

foreach(var tag in SopFields)

{

tagslist.Add(tag.Value);

}

ViewData["tagslist"] = tagslist;

if (Request.IsAjaxRequest())

{

return PartialView("_Tree", kendoModel);

}

return View(kendoModel);

}

So I need to do the following things:

1. Get the MultiSelect currently selected id's data passed to the server as an IEnumerable<int> into the index action with ajax request
2. Replace the content within the tree div with the new loaded treeview (if ajaxrequest, the action returns a partial view).

I am having trouble with number 1. Please give me some advice on how to solve this.

Thanks!

Best regards,
Marcus

MultiSelect

answered on 04 Nov 2013

1 answer

144 views

ListView contains ListView contains Grid

In my implementation, I have a Kendo ListView contains another inner ListView. Each item in the inner ListView is an editable Kendo Grid. So, it is ListView->ListView->Grid relationship. The data binding works and view looks good initially.

But our requirement is to allow user to add new Grid (new item) inside the inner ListView by clicking a button, so I assigned an editable template to the inner ListView (by doing .Editable(editable => editable.TemplateName("SomeEditorTemplate"))). But it didn't work, it throws "invalid template" exception. I found that if the item inside the inner ListView is a TextBox instead of a Grid, then it works.

So, my questions is:
Does Kendo ListView support this kind of scenario (ListView contains ListView contains Grid)? If so, how can I add a new Grid item inside the inner ListView? I will appreciate if you can post a sample project or sample code.

Thanks!

Jie

ListView

answered on 04 Nov 2013

2 answers

200 views

ColorPicker not working in IE 11

the fiddle:
http://jsfiddle.net/TdEZE/12/

This fiddle works in Chrome and FF, but not IE 11 (Win8.1).
Curiously, in my application the color picker does work when only using ' palette : "basic" ', but that does not work in this fiddle.

edit:
Just found out that kendoMenu is also broken in IE 11.
http://jsfiddle.net/Dkrhp/3/

ColorPicker

answered on 04 Nov 2013

2 answers

2.1K+ views

Passing parameters to DataSource

Hello,

First of all, sorry for asking the question which has been asked many times before! I looked around, and I seem to be doing everything right, but still getting no result.
Here's the problem: I have a Grid with DataSource with autoBind set to false. Upon a certain action, I'd like to pass additional parameters to DataSource, and to read the data. However, after setting the parameters, when "read" happens I can see in the "Network" tab in Dev Tools, that my additional parameters are not sent. I have tried to do it two different ways:

1. Set transport read data:

$('#lookupDataGrid').data('kendoGrid').dataSource.transport.read.data ={"UserLookupTableID":123};

console.log($('#lookupDataGrid').data('kendoGrid').dataSource.transport.read.data); // outputs correct object

$('#lookupDataGrid').data('kendoGrid').dataSource.read();

The network tab shows this (my additional parameter is not there):
.../lookup-tables/get-lookup-data?take=15&skip=0&page=1&pageSize=15

2. Change the read URL to include my parameter:

var url = '.../lookup-tables/get-lookup-data?UserLookupTableID=123;

$('#lookupDataGrid').data('kendoGrid').dataSource.transport.read.url = url;

$('#lookupDataGrid').data('kendoGrid').dataSource.read();

The network tab shows the same output as above!! It is as if the chances I'm making are ignored...

I'm stumped. Am I don't something wrong? Please let me know...

Data Source

answered on 04 Nov 2013

9 answers

230 views

JavaScript error with Kendo - ONLY when using IE10

I created a VS2012 project using the C# Kendo MVC web wizard (2013 MVC Q2) and ran the project without making any other changes. The app runs but I see the following exceptions in the Output window when I run the page in IE10 (v10.0.9200.16686):

Exception was thrown at line 4, column 9009 in http://localhost:6616/Scripts/kendo/2013.2.918/jquery.min.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 4, column 9238 in http://localhost:6616/Scripts/kendo/2013.2.918/jquery.min.js
0x800a139e - JavaScript runtime error: SyntaxError

The app appears to run but the exceptions are a bit disconcerting. Run the same project in Chrome or Firefox and there are no errors in the output window. Is this a problem with Kendo or with IE10?

General Discussions

answered on 04 Nov 2013

1 answer

76 views

When opening themebuilder all charts go blank

When I open themebuilder on top of my site all of the charts go blank to just seeing a generic axis. This happens as soon as I run the applet. Any suggestions on how to get this working?

Attached is a screenshot of what it looks like when i open themebuilder. Prior to opening it there are a series of mostly bar charts and pie charts.

Thanks
J

General Discussions

answered on 04 Nov 2013

1 answer

228 views

more with nested templates

I have used this before, and it worked, but for some reason it is ceasing to out of nowhere. I have a situation where I am using nested templates like this ...

using the following model, this doesn't display the second level results, for some reason. But SOMETIMES it does. I cannot reproduce the behavior consistently.

{

"Id": null,

"Name": "Test Item",

"Prototypes": [

{

"Id": "items/prototypes/shield",

"Name": "Shield",

"Mutations": [

{

"Name": "Shield",

"Measurement": 4,

"Statistic": {

"Id": "statistics/damage-reduction-physical",

"Name": "Damage Reduction/Physical"

}

},

{

"Name": "Shield",

"Measurement": 15,

"Statistic": {

"Id": "statistics/health",

"Name": "Health"

}

],

"Consumable": false,

"Equipable": true,

"Tags": [

{

"Id": "tags/shielding",

"Name": "Shielding",

"Description": "This is capable of somehow shielding the user, either with mitigation or abilities"

}

]

}

]

}

<div

data-role="listview"

style="margin: 0px;"

data-template="templates-admin-inherited-prototypes"

data-bind="source: Prototypes"></div>

<script type="text/html" id="templates-admin-inherited-prototypes">

<h2 data-bind="text: Name"></h2>

<div

data-template="templates-admin-inherited-mutation"

data-bind="source: Mutations"></div>

</script>

<script type="text/html" id="templates-admin-inherited-mutation">

${ Statistic.Name }

</script>

Templates

answered on 04 Nov 2013

8 answers

204 views

Issues with hiding tooltip for specific series for line chart

Hello ,

We are trying to to make the tooltip of one of the series visible as false ( dont show it ) on the shared tooltip on Kendo Line chart.
Somehow with the given help/examples it is not working .

Secondly whenever we mouse hover on the Legend the shared tooltip shows upto and stick , which we definitely dont want ..

Can you please look into these two issues.

Thanks

Attached the sample.

Charts

answered on 04 Nov 2013