Questions on Kendo UI for jQuery Forum

3 answers

770 views

I want to change grid font color of the grid based on the jsp data from database. How I will put condition on the changing grid color dynamically from jsp page.
For example,
I have 2 types of records and as per condition i want to change the color of one record in blue and other one in red.
Please help me.

Grid

answered on 09 Aug 2012

0 answers

91 views

handling saveChanges

Hello,

I am using the built-in toolbar save command and batch editing. When a user edits some rows and clicks the save button, I need to find which rows were edited. How do I go about doing this? There is no documentation that explains the event passed to the saveChanges function.

Grid

asked on 09 Aug 2012

1 answer

129 views

Any complete application samples

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