Questions on Kendo UI for jQuery Forum

2 answers

699 views

Using a template with hashtag notation syntax

I'm trying something very similar like this example which I found online and is working:

http://jsfiddle.net/OnaBai/S7K4r/

The only difference is that I use the "hashtag notation" for the template. In the following example, I only changed one minor thing in the template (I added hashtags around the first label: #:text1#):

#:text1#

http://jsfiddle.net/w5P9U/4/

The problem here is that an exception "Uncaught ReferenceError: text1 is not defined" is thrown when initializing the window. This is reasonable, as the window isn't bound to any dataItem at that moment, although I don't understand why a similar exception isn't thrown when using the "data-bind" syntax.

Anyways, I tried a lot of different things to avoid this to no avail.

E.g.: Not setting the template at initialization, but setting it after the dataItem has been bound:

kendoWindow.content({
template: $("#record-jsp").html()
});

also

kendoWindow.content({
data: record,
template: $("#record-jsp").html()
});

didn't work.

Is it possible to use the hashtag notation in this scenario?

Window

answered on 24 Apr 2013

2 answers

272 views

(BUG/Limitation) Templates cannot include any script tag.

Short and sweet: Please show me how I can nest templates.

Example of what I want to do:
I want to dynamically include in a jQuery Tipped tooltip a select tag

<select id="example">

and then call

$("#example").select2();

on that tag. I am struggling to come up with a clean way to do this.

Full-blown JSFiddle:
The following JSFiddle demonstrates that script tags cannot be nested in KendoUI templates: http://jsfiddle.net/johnzabroski/NHG3d/10/

Analysis:
I know why this doesn't work (see below), but I can't figure out a clean alternative.

I even tried a hack [ http://www.willmaster.com/blog/javascript/nested-javascript.php ] to inject a script tag into the template via document.write(string): http://jsfiddle.net/johnzabroski/uy86N/7/

This isn't even clean, and it did not work.

After I built this demonstration, I thought it would be a good idea to check what the HTML5 specification says [1], and also ran my markup [3] through the W3C's experimental HTML5 validator [2]. It is not really clear from the HTML5 spec what the behavior should be. The spec mentions something about nested scripting tags in the parsing model overview [ http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#overview-of-the-parsing-model ], but then does not go on to define what that means. Meanwhile, the grammar for script tags seems to suggest you cannot nest script tags directly as I have done below [3]. This is confirmed by how Chrome parses my JSFiddle examples. After the first closing script tag, it treats the whole as closed, and then treats the Hello, World! DIV as if it was outside the script tag.

[1] http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#scriptingLanguages
[2] http://validator.w3.org/check
[3]
<!DOCTYPE html>
<head>
</head>
<body>
<script type="text/plain" id="example">
<script type="text/javascript">

</script>
<div>Hello, World!</div>
</script>
</body>

Templates

answered on 24 Apr 2013

3 answers

330 views

Remote Datasource not Populating DropDownList

I have the following code:
   <script type="text/javascript">
        $(function() {
            var url = urltogetdata;
            $("#products").kendoDropDownList({
                dataTextField: "name",
                dataValueField: "name",
                dataSource: {
                    transport: {
                        read: {
                            url: url,
                            contentType:'application/javascript; charset=utf-8',
                            type:'GET',
                            dataType:'jsonp'
                        },
                        schema: {
                            data: "result"
                        }
                    }
                }
            });
        });
</script>
<asp:HiddenField ID="webServer" runat="server" />
<asp:HiddenField ID="cred" runat="server" />
<input id="products" style="width: 250px" />

When I hit the url directly an excerpt of the response is:
{"result":[{"name":"228 - Sal ","entityIdentifier":{"id":23}},{"name":"230 - Fitters Truck","entityIdentifier":{"id":24}},{"name":"2300 - Duane Agnew","entityIdentifier":{"id":20}}, etc....

When I run this the ddl just spins and nothing happens. Why?

Also, if I want to bind the dataTextField to name and the dataValueField to the entityIdentifiers id property how would I do this?

Thanks.

DropDownList

answered on 24 Apr 2013

1 answer

280 views

Grid fixed footer

Hello,

I am looking for an example on how to add a fixed footer to a kendo ui web grid that does not have a pager.
My grid displays hours and at the bottom of each column I would like to add a count of hours.
I would use aggregates but I do not believe that these appear as fixed. By fixed I mean I want to be able to scroll the grid and have the footer visible at all times ( just like the header )

Any help would be appreciated.

Grid

answered on 24 Apr 2013

2 answers

185 views

Using Fontawesome instead of a skin

What do you think the best way to go about adding fontawesome to the panelbar is?

I need the caret icons on the expand\collapse arrows
k-icon k-i-arrow-s k-panelbar-expand

Or is it just not really possible because you'd have to handle all the expand\collapse click events?

Thoughts?...

PanelBar

answered on 24 Apr 2013

1 answer

65 views

Trouble making a filter

Hello, I am having a problem, I'm working with HTML, jquey and use GRID, I want to filter different than the default, where I for example put an input value and by clicking on a button that can filter on value. I mean?

I be doing the most good, I guided in this example:
http://jsfiddle.net/MG89G/479/

Arrive to copy and paste everything as is but it tells me:

"Uncaught TypeError: Can not read property 'dataSource' of undefined"

No dataSource if that allocation is right or who is wrong, but I need to do so.
I think it may be bad references, use these:

href="../../stylesheets/kendo.common.min.css" <link rel="stylesheet" type="text/css" />
href="../../stylesheets/kendo.default.min.css" <link rel="stylesheet" type="text/css" />
src="../../javascripts/jquery.min.js" <script type="text/javascript"> </ script>
src="../../javascripts/kendo.all.min.js" <script type="text/javascript"> </ script>

I hope I can help, thanks.

Grid

answered on 24 Apr 2013

1 answer

150 views

DatePicker Date Limits

Hello,

I was wondering if there was a reason behind the 1900-2099 limit on dates in the DatePicker.

Thanks

DatePicker

answered on 24 Apr 2013

3 answers

128 views

Custom grid filters

$(document).ready(function () {

$('.AdvancedSearch input:checkbox').change(function () {

ApplyFilters();

});

ApplyFilters();

});

function updateFlagSearchFilters(field, operator, value) {

var grid = $("#Grid");

var newFilter = { field: field, operator: operator, value: value };

var dataSource = grid.data("kendoGrid").dataSource;

var filters = null;

if (dataSource.filter() != null) {

filters = dataSource.filter().filters;

}

if (filters == null) {

filters = [newFilter];

}

else {

var isNew = true;

var index = 0;

for (index = 0; index < filters.length; index++) {

if (filters[index].field == field) {

isNew = false;

break;

}

if (isNew && value != "" && value != "0" && value != "False") {

filters.push(newFilter);

}

else if (!isNew){

filters.splice(index, 1);

}

dataSource.filter(filters);

};

function ApplyFilters() {

var pt2Checked = $('#Pt2').is(':checked');

if (pt2Checked) {

updateFlagSearchFilters("Pt2", "eq", "true");

}

else {

updateFlagSearchFilters("Pt2", "neq", "");

}

};

Hey guys,

As you can see i tried to make a custom grid filter, but somehow i can't get the Splice for removing filters to work. Is anyone having the same issue? Adding a filter is no problem, but i'm using the column filters as well so i don't want to clear all filters for unchecking a checkbox.

I would really appreciate all help on this, thanks in advance!

Max

Grid

answered on 24 Apr 2013

2 answers

73 views

mobile view

It doesnt work. even the alert function isnt called. im using safari.

<!DOCTYPE html>

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="view" id="foo">

<a href="#protected" data-role="button">Go to protected</a>

</div>

<div data-role="view" id="protected" data-before-show="redirectBack">

I am a protected view

</div>

<script>

var app = new kendo.mobile.Application();

function redirectBack(e) {

alert('s');

e.preventDefault();

app.navigate("#foo");

}

</script>

</body>

</html>

General Discussions

answered on 24 Apr 2013

5 answers

65 views

Editor format tools delays execution on empty lines ???

Why are some of the formatting options applied to an empty line (<p></p> or <p><span></span></p>) delayed and added to the pending formats until a character is added? If I want to apply a font size to an empty line, but leave that line empty the format is never applied because it is added to the pending formats and if I don't add any text to that line then the format never gets applied. How can I change this functionality?

I've tried overriding the willDelayExecution method to return always return false on the fontSize tool for example when I have a <p><span></span></p>, but the fontSize doesn't get applied even when the Range's startContainer is the text node inside the span element. Your anchor marker element gets added after the text node and I'm not sure if that's what the problem is.

Please help because this is a much needed. My users can't change the font sizes of empty lines for consistent layout through out the document.

Editor

answered on 24 Apr 2013