Questions on Kendo UI for jQuery Forum

1 answer

129 views

I see UI component demos. Are there any application demos? They would be most welcome both to show how the UI components fit into an overall application, and to show suggested patterns for a real enterprise web app.
Thanks.

General Discussions

answered on 09 Aug 2012

0 answers

147 views

One validation message for several fields

It looks like my other post didn't save for some reason? Anyway, let me try typing this out again!

So I'm looking for a way to have severa inputs in a form use the same validator message. This is my scenario - I have 8 input fields all requiring 1 - 100 to validate correctly. I find it unnecessary to have 8 validator messages all say the same thing, so I'm looking for a way to have one message on the top of the form that says "must be 1 - 100." However, I can't get this to work without the "data-for" attribute.

I could theoretically "hack" this by creating 8 validator messages, positioning them absolutely, so they would stack, looking like one message. That's a bit "hacky" and I'm hoping to do this the proper way.

Any recommendations would be greatly appreciated. Thanks in advance for your time.

Validation

asked on 09 Aug 2012

0 answers

1.0K+ views

clearSelection()

It would be nice if clearSelection() took an argument, so that I could just deslect a few rows. Right now I find that I am having to first clear all and then select, which does not perform well when the number of rows selected is over 25, and I want to deselect one (that has a column with the contents of valueOf(data.idx).

grid.select("only the desired records") did not work, i.e. if there were three previously selected, and this new list was length two, then all three would remain selected. So I have to clearSelection().

var jFilter = ":not(:contains('{0}'))";

var records;

jFilter = jFilter.format(data.idx);

records = GridData.grid.tbody.find(">tr.k-state-selected[data-uid]").filter(jFilter);

GridData.grid.clearSelection();

GridData.grid.select(records);

Grid

asked on 09 Aug 2012

6 answers

127 views

IE8 & Line Chart

Hello, I'm having a strange issue. I'm using the DataViz controls (both Gauge and Chart) for a dashboard application. Everything works great, except for 1 thing. The Line Charts do not work in IE8 for me. IE9 works fine, as does every other browser. Unfortunately, many of our employees are running Windows XP and are locked out of installing 3rd party browsers, so IE8 is the defacto browser I have to get this working in. Your source examples work fine in IE8, so I'm a bit dumbfounded.

I'm receiving no error in Firebug's console in Firefox, but running IE9 in IE8 Standards mode using developer tools, gives me an error of:
SCRIPT87: Invalid argument.
kendo.dataviz.min.js, line 8 character 75326

Not sure what that means...

Anyhow, any help would be greatly appreciated. I have attached screen captures to (possibly) aid in an answer. I had to blur out labels that would identify our company, but it's still easy to see what's going on. Thanks in advance for any help!

Charts

answered on 09 Aug 2012

3 answers

244 views

Two category axis on Categorical chart (or workaround)

Hello!

Story:
I want to compare two sets of data created for two periods of time (periods have same length).
As I find out in the kendo doc I can create two X axis for scatter chart. This is the thread that inspire me
The best result I could get is (you can try this here: http://jsfiddle.net/yXXCM/):
https://www.dropbox.com/s/2qbdhz8ek5keh0j/day-large-no-hours.PNG (is it possible to inline the images into the post?)
It is quite nice I would say. I is not perfect as labels are not match dots on the chart (that is because the label is not a day, it is a day + some hours: http://jsfiddle.net/RK26K/).
( You can notice labels' template for the second x axis (template: "#= kendo.toString(new Date(value + 1728000000), 'hh:mm dd MMM') #"). The "magic number" 1728000000 is a difference between periods calculated on the server. It is surely a hack, but it is the only way I found :) )

But unfortunately this chart looks really nasty for small period of time and for week/month charts:
https://www.dropbox.com/s/xqkcwr2l94tklr5/day-small.PNG
https://www.dropbox.com/s/qamzyx3pqsix4jv/week.PNG
https://www.dropbox.com/s/98lg7asn4b2tb3w/month.PNG
Just look on 3 junes, 3 July and no August (the third dot) of months chart.

Question:
Actually, the problem is that X/Y chart is not the one that can help me.
I definitely need a categorical chart. Category is a day or a week or a month in my case. But looks like categorical carts doesn't support two categories axis. Is that true?

Could anyone help me with that %&^$^& cart? :)
Probably there is a workaround for my problem.

Thanks,
Andrei.

Charts

answered on 09 Aug 2012

0 answers

312 views

Grid Retrieve

IF I use:

@(Html.Kendo().Grid<WebSiteHotelRazor.Models.ReportesModeloVentas>()
The grid doesn't return data but if I use:

If I use this it works
@model IEnumerable<WebSiteHotelRazor.Models.ReportesModeloVentas>
@(Html.Kendo().Grid(Model)

What am I missing?

Code that works:

@{
ViewBag.Title = "Reporte";
}

@model IEnumerable<WebSiteHotelRazor.Models.ReportesModeloVentas>

<h1>Reporte de Ventas Año 2011</h1>

<p>
@(Html.Kendo().Grid(Model)

    .Name("GridAGQ")
    .Columns(columns =>
    {
        columns.Bound(p => p.Ano).Width(50).Title("Año").HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.PRODUCTO).Width(200).Title("Producto").HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.DESCRIPCION_PRODUCTO).Width(300).Title("Descripción del Producto").HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_ENERO).Width(150).Title("Enero").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_FEBRERO).Width(150).Title("Febrero").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_MARZO).Width(150).Title("Marzo").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_ABRIL).Width(150).Title("Abril").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_MAYO).Width(150).Title("Mayo").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_JUNIO).Width(150).Title("Junio").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_JULIO).Width(150).Title("Julio").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_AGOSTO).Width(150).Title("Agosto").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_SEPTIEMBRE).Width(150).Title("Septiembre").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_OCTUBRE).Width(150).Title("Octubre").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_NOVIEMBRE).Width(150).Title("Noviembre").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_DICIEMBRE).Width(150).Title("Diciembre").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
        columns.Bound(p => p.SUBTOTAL_TOTAL).Width(150).Title("Total").Format("{0:#,###.00}").HtmlAttributes(new { @style = "text-align:right;font-weight:bold" }).HeaderHtmlAttributes(new { @style = "text-align:center;font-weight:bold" });
    })
    .Groupable()
    .Scrollable()
    .Filterable()
    .Pageable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .Read(read => read.Action("Products_Read", "Grid"))
    )
        )
        </p>
        <p>
        <input id="Submit1" type="submit" value="submit" /></p>

Grid

asked on 09 Aug 2012

3 answers

104 views

random digit showing pager with new beta (and MVC Extensions)

I am experiencing a strange issue where there is a random extra digit in the pager. See screenshot.

Also here is the html generated if that helps.

<div class="k-pager-wrap k-grid-pager" data-role="pager">

<ul class="k-pager k-reset k-numeric">

<a class="k-link k-state-disabled" title="Go to the first page" href="#" data-page="1">

<a class="k-link k-state-disabled" title="Go to the previous page" href="#" data-page="1">

<ul class="k-pager-numbers k-reset">

<a class="k-link" title="Go to the next page" href="#" data-page="2">

<a class="k-link" title="Go to the last page" href="#" data-page="3">

<span class="k-pager-info k-label">1 - 10 of 28 items</span>

</div>

There appears to be a random UL with class='k-pager k-reset k-numeric' in the page? Any ideas.

I have added a second pager to the page via

$("#somepager").kendoPager( { dataSource: gridDatasource });

and that one is fine.

Grid

answered on 09 Aug 2012

0 answers

117 views

Grid Column Format

How to show numeric column data in hundred-comma(eg:- 5,31,745) separator in kendoGrid?
I am using this in columns defination of kendoGrid:-
{
field: "Total",
title: "Total Amount",
template: '#= kendo.tostring(Total,"##,#") #'
}

But it throw "Microsoft JScript runtime error: Invalid template:"

Grid

asked on 09 Aug 2012

0 answers

95 views

Grid Column Format

How to show numeric column data in hundred-comma(eg:- 5,31,745) separator in kendoGrid?

Grid

asked on 09 Aug 2012

0 answers

92 views

URGENT: Issues with Ordered/Unordered list Editor Demo

Hi everyone,

I am attempting to use the Editor control as an EditorTemplate for HTML as a test for a possible application where one important requirement is the possibillity to copy&paste elements from MS Word (most of the end users have this need).
As a huge fan of all the Telerik products, I downloaded the Kendo UI to try your amazing HTML Editor because I saw that all the requirements I needed related to copy&paste elements from MS Word were accomplished in your online demo page (http://demos.kendoui.com/web/editor/all-tools.html).
However, when I downloaded the Open SourceGPL v3 Web version of the page "all-tools.html" there are some elements that doesn't work when copied from MS Word (when they work in the online demo page).
The most important for me at this point to show to the possible client are the Ordered/Unordered list that worked online but not in the demo version.
This is a very important and urgent issue.Can anyone help me on this? Hope so!

Best Regards,
Gonçalo N.

Note: I also tested it on other browsers - Chrome 21.0.1180.60 m and I.E. 7,8 and 9

Editor

asked on 09 Aug 2012