Questions on Kendo UI for jQuery Forum

3 answers

454 views

How to show images from database in a ListView.

Hi

I have a listview for students, and the images of the students are stored in the database. how do i render those in the listview?

Any help is appreciated.

Thanks,
Nick

ListView

answered on 25 Apr 2013

1 answer

130 views

Loading Content with AJAX problems.

I am running into a problem with the TabStrip and wondering if you guys have come across this issue, or even know a workaround for it.

When loading content in the tabstrip with AJAX you are able to quickly click between tabs before they are loaded. This causes all tabs clicked to be styled like they are active and actually appends the content it gets back from the AJAX call all on to the same tab.

Is there a way to stop this? I have some example code if necessary but I am able to replicate the problem using your "Loading content with AJAX" demo at http://demos.kendoui.com/web/tabstrip/ajax.html

http://imageshack.us/photo/my-images/20/tabstripproblem.jpg/
I have attached the screenshot as well from your demo page showing the problem. The exact same thing is happening in our code.

Any ideas?

-b

TabStrip

answered on 25 Apr 2013

2 answers

759 views

[Solved] 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

319 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

364 views

[Solved] 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

305 views

[Solved] 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

206 views

[Solved] 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

88 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

171 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

161 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