Questions on Kendo UI for jQuery Forum

2 answers

506 views

Checkbox events not firing the second time.

Hi,

I have a TreeView for a filter on a dashboard, and it's not processing the click on the checkbox the second time. I've attached a screen shot with more details.

I'm not sure what I have wrong.
Creating the TreeView:

/* Topics illustrated in this file:

* How to define a custom widget

* How to configure options from base

* How to define and access custom options

* How to capture scope

* How to manipulate the DOM of "this"

* How to expose custom methods

* How to expose an event handler delegate

*/

define([

'jquery',

'underscore',

'utils/helpers',

'text!views/schoolFilterItem.html',

'kendoui/kendo.treeview.min',

], function ($, _, Helpers, schoolFilterItemTemplate) {

var schoolData;

// This defines a Kendo widget object

var TreeView = kendo.ui.TreeView.extend({

init: function (element, options) {

// Assigning this to another variable name captures the context of init, which is "this TreeView"

var me = this;

options.dataSource = {

transport: {

read: function (options) {

$.getJSON(Helpers.toServicesUrl("/GetfltSchoolByDistrict"),

{

// If you tried to use "this" in here, it would refer to the dataSource instead of the TreeView

userName: me.options.userName,

districtId: me.options.districtId,

schoolCodes: me.options.schoolCodes

},

function (data) {

options.success([]);

schoolData = data.GetfltSchoolByDistrictResult.RootResults;

schoolData = [

{

text: "Schools",

expanded: false,

items: _(schoolData)

.chain()

.groupBy("SchoolTypeName")

.map(function (groupItems, groupKey) {

return {

SchoolTypeName: groupKey,

items: groupItems,

expanded: false

}

})

.value()

}

];

me.dataSource.data(schoolData);

});

}

},

schema: {

model: {

children: "items"

}

};

options.dataBound = function (e) {

me.element.find("input:checkbox:first").prop("disabled", true);

me.element.find("input:checkbox").on("change", function (e) {

var parentItems = $(e.target).parents(".k-item");

var node = parentItems.eq(0);

var parentNode = parentItems.eq(1);

// Toggle children to match parent

node.find("input:checkbox").prop("checked", e.target.checked);

// Update parent's state

var parentCheckBox = parentNode.find("input:checkbox:first");

if (!parentCheckBox.prop("disabled")) {

var hasChecked = parentNode.find(".k-group input:checked").length > 0;

var hasUnchecked = parentNode.find(".k-group input:not(:checked)").length > 0;

parentCheckBox.prop("checked", hasChecked);

parentCheckBox.prop("indeterminate", hasChecked && hasUnchecked);

}

// The rest is unchecking other SchoolTypes if a different SchoolType is checked. If "this" is unchecked, no further action required.

if (!e.target.checked)

return;

var dataItem = me.dataItem(node);

if (!dataItem.SchoolTypeName) {

e.target.checked = false;

return;

}

me.element.find("input:checked").each(function () {

var eachDataItem = me.dataItem($(this).closest(".k-item"))

if (eachDataItem.SchoolTypeName !== dataItem.SchoolTypeName) {

this.checked = false;

this.indeterminate = false;

//lah testing adding something here.

// me.schoolTypeChanged(e);

me.onSchoolChange(e);

}

//gmo when school names don't match

if (eachDataItem.SchoolName !== dataItem.SchoolName) {

this.checked = false;

me.onSchoolChange(e);

}

});

}

kendo.ui.TreeView.fn.init.call(this, element, options);

},

options: {

// This is what determines the name of the custom method, e.g. .kendoSchoolFilterTreeView

name: "TreeViewSchoolFilterSingle",

// Declare new options with default values. Options must be declared here in order to be accepted and passed through to init().

userName: "",

districtId: 0,

schoolCodes: function () { return "" },

// Anything else you pass in options will get passed to the base widget

dataTextField: ["text", "SchoolTypeName", "SchoolName"],

checkboxes: true

},

getSelectedSchoolType: function () {

var me = this;

return _(this.element.find("input:checked").closest(".k-item"))

.chain()

//                                              .map(function (item) { return ktvSchoolFilter.dataItem(item).SchoolType; })

.map(function (item) { return me.dataItem(item).SchoolType; })

.filter(function (item) { return item; })

.value()[0];

},

// This is how to get the selected school from the radio group

getSelectedSchoolCodes: function () {

var me = this;

return _(this.element.find("input:checked").closest(".k-item"))

.chain()

//                                              .map(function (item) { return ktvSchoolFilter.dataItem(item).SchoolCode; })

.map(function (item) { return me.dataItem(item).SchoolCode; })

.filter(function (item) { return item; })

.value()

.join(",");

},

onSchoolChange: function (e) {

return;

},

schoolTypeChanged: function (e) {

return;

}

});

// This is what registers the custom widget and adds the kendo* method to the jQuery object

kendo.ui.plugin(TreeView);

});

How it's used in my program, including several variations on binding.

ktvSchoolFilter = $("#schoolFilterTree").kendoTreeViewSchoolFilterSingle({

userName: WSIPCContext.UserName,

districtId: WSIPCContext.DistrictId,

schoolCodes: WSIPCContext.SchoolCodes,

onSchoolChange: schoolCodeChanged,

change: schoolCodeChanged,

schoolTypeChanged: schoolCodeChanged,

checkbox: {

onClick: schoolCodeChanged

}

}).data("kendoTreeViewSchoolFilterSingle");

//This code allows the grade level and risk categories to change when a checkbox

//is selected, not just the label.

ktvSchoolFilter.dataSource.bind("change", schoolCodeChanged);

ktvSchoolFilter.dataSource.bind("select", schoolCodeChanged);

ktvSchoolFilter.dataSource.bind("selecting", schoolCodeChanged);

ktvSchoolFilter.dataSource.bind("navigate", schoolCodeChanged);

ktvSchoolFilter.bind("change", schoolCodeChanged);

ktvSchoolFilter.bind("select", schoolCodeChanged);

ktvSchoolFilter.bind("selecting", schoolCodeChanged);

ktvSchoolFilter.bind("navigate", schoolCodeChanged

TreeView

answered on 11 Oct 2013

3 answers

188 views

Kendo UI Grid JQuery Error using IE7

A jquery(1.9.1) error '0x80020003 - JavaScript runtime error: Member not found.' is occurring when testing Kendo 2013.1.319 grid with Internet Explorer 7.  Below is the error along with code that is erroring out.

JQuery Code:
set:function(e,n,r){
          var i=e.getAttributeNode(r);
          return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}}
where:
e.innerhtml = <A tabIndex=-1 class=k-header-column-menu href="http://localhost:50002/Report.html#" jQuery19103527182669029985="43" tabindex="-1"><SPAN class="k-icon k-i-arrowhead-s"></SPAN></A><A class=k-link href="Date/Timehttp://localhost:50002/email2LeadReport.html#">Date/Time</A>
n = ""
r = "aria-sort"

Grid

answered on 11 Oct 2013

2 answers

93 views

[Solved] Set cancel option on a grid that has already been initialized

Is there a way to set the cancel option on a grid that has already been initialized?

I'm using the serverside MVC wrapper and have this:
.Events(events => events.Cancel("function() {alert('hi');}"))

Clientside I tried:
$("#grdTest").kendoGrid({ cancel: function () { alert("canceled"); } });
and
$kendoGrid = $("#grdTest").data("kendoGrid");
$kendoGrid.options.cancel = function () {
alert('Canceled');
};

Grid

answered on 11 Oct 2013

6 answers

192 views

MVVM not working with scrollview

Hi Guys,

Need your help. I followed the example here http://demos.kendoui.com/mobile/scrollview/index.html#/ but unable to display the data in the mvvm.
I think i didn't setup the template the correctly? was able to setup a mvvm bind to listview successfully though.
Thanks.

var feedsModel= kendo.observable({
feeds:[
{posttitle: "title1",
postcontent: "content1"},
{posttitle: "title2",
postcontent: "content2"},
],
selectedpost:"none",
});
<div data-role="view" id="post" data-layout="post-layout" data-title="Post" data-stretch="true" data-model="feedsmodel"></div>
<div data-role="scrollview"
data-source="feeds"
data-template="scrollview-binding-template"
data-content-height="100%"
data-enable-pager="false">
</div>
<script id="scrollview-binding-template" type="text/x-kendo-template"> <div> <p class="title">#: posttitle #</p></div></script>

ScrollView (Mobile)

answered on 11 Oct 2013

1 answer

51 views

Editor removes src attribute in IE8

I'm using the javascript version of the KendoUI Editor. I've tried loading the editor with this in the text field:
<img src="someimagehere.png" alt="" />

After the editor loads, the html says the field has this:
<img alt="" />

This only happens when I'm working in IE8. What's happening?

Editor

answered on 11 Oct 2013

1 answer

190 views

[Solved] Splitter script error on window resize on IE 9 - when splitter is removed from DOM and added again dynamically

Hi,

In a MVC4 application I am working, I have some menu links, clicking on these links, I load the relevant page as an ajax partial view below the menu links.
One of the partial views contains a splitter. When I load this partial view containing splitter and navigate to other partial views clicking on other links, and if I come back to the view with the splitter partial view - on window resize the scripts throw an error saying that 'offsetWidth' is null. This happens on IE 9.0 only

Environment
Browser: IE 9.0
Kendo Version: 2013.2.918.340

I have put up a simple mvc4 application demonstrating that.
Steps to reproduce :
1) Click on the link 'Load splitter view below' (Loads a view with splitter beneath the link)
2) Click on the link 'Load non splitter view below' (Replaces the splitter view with a non splitter view)
3) Click on the link 'Load splitter view below' (Loads the splitter view again)
4) Resize the browser window, then the script breaks saying 'offsetWidth' is null. Resizing the window is triggering resize event on splitter, where it is breaking

Can you please see if this is a real issue or if I am missing out anything here ?

Splitter

answered on 11 Oct 2013

1 answer

217 views

MVC Grid not populating from datasource

Hi All,

I'm new to KendoUI so please bear with me. I've a Kendo gird on a view as below:

(I've taken out the extra CRUD lines for clarity as I've not got as far as implementing them yet).

@using Kendo.Mvc.UI

@using MvcApplication2.Models

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

@(Html.Kendo().Grid<MerchantStore>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.MerchantStoreId);

columns.Bound(p => p.Name);

columns.Bound(p => p.Address1);

columns.Bound(p => p.TelephoneNumber);

columns.Command(command => { command.Edit(); command.Destroy(); });

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

// .HtmlAttributes(new { style = "height:1430px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.MerchantStoreId))

.Read(read => read.Action("Read", "Home"))

)

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function() {

message += this + "\n";

});

}

});

alert(message);

}

</script>

I'm trying to hook up the controller to return a json result provided by a wcf webservices. As below:

public ActionResult Read([DataSourceRequest]DataSourceRequest request)

{

var client = new WebClient();

return View("Index", Json(

client.DownloadString("http://localhost:11462/Service1.svc/rest/ListMerchantStore" +

"?merchantId=10000"), JsonRequestBehavior.AllowGet));

}

but I just get an empty grid. The json looks like:

{"d":[{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":null,"Address3":null,"CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":null,"MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10213,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":null,"StatusId":0,"TelephoneNumber":null,"TownCity":"City"},{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":"Add2","Address3":"Add3","CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":"a@a.a","MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10214,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":"","StatusId":1,"TelephoneNumber":"123456","TownCity":"City"}]}

Please can someone kindly point out where i'm going wrong.

Many Thanks

Data Source

answered on 11 Oct 2013

2 answers

343 views

View scrolling locks up, unlocks on drawer show+hide

I've distilled the problem into a jsfiddle here: http://jsfiddle.net/dTBN6/6/

You can reproduce the problem by doing the following steps :

Click the "To page 2" button
Resize your window so content is long enough to allow scrolling
Scroll down a bit
Open drawer and go back to page 1
Click the "To page 2" button again
Attempt to scroll - the view's scrolling is locked
Open drawer. Then close it.
Attempt to scroll - it works
Repeat from step 4

If you access page 2 via the link in the drawer, scrolling does not lock up.

What gets triggered when the drawer is shown / hidden that causes the scrolling to unlock?
Can I trigger this manually in page two's "show" event handler?
Is there anyway to fix this?

General Discussions

answered on 11 Oct 2013

1 answer

317 views

Append HTML on any Kendo control appears without design

Hello
I have the following drawer

<div data-role="drawer" id="left-drawer" data-title="Global Menu">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

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

<li>Global Menu

<ul>

<li data-icon="share"><a href="#drawer-home" data-transition="none">Inbox</a></li>

<li data-icon="share"><a href="#drawer-starred" data-transition="none">Starred Items</a></li>

</ul>

</li>

<li>Sub Menu

<ul id="ResultDiv2">

</ul>

</li>

</ul>

</div>

<div data-role="view" id="about" data-layout="drawer-layout" data-title="About">

about dummy text

</div>

<script>

new kendo.mobile.Application();

</script>

When you bind the drawer from inside Document.Ready everything is working fine and the design appears correctly, but if you bind the drawer on any event like click then the design will not appear correctly.

Here is my code

$(document).ready(function () {

After();

});

function After() {

var template = kendo.template('<li data-icon="share" onclick="After();"><a href="#:url#" data-transition="none"><span></span>#:name#</a></li>');

var data = [

{ url: '#about', name: 'Menu' },

{ url: '#about', name: 'Customer' },

{ url: '#about', name: 'Generate again'}];

var result = kendo.render(template, data);

//alert(result);

$("#ResultDiv2").append(result);

}

you can check that on the following website
IN4ELECTRONICS

Regards

General Discussions

answered on 11 Oct 2013

4 answers

94 views

Using Knockout templates in Kendo UI Mobile Control Templates

We've got quite a significant investment in Knockout templates and I'm wondering if anyone had figured out a way to be able to use Knockout templates in place of the regular Kendo templates? I know we can re-do them, but we want to re-use if at all possible, and would like to be able to stick with knockout for elsewhere in the UI.

In case no-one has any solid experience on this, whacky ideas would also be gratefully received - we're willing to experiment.

General Discussions

answered on 11 Oct 2013