Questions on Kendo UI for jQuery Forum

1 answer

337 views

How create a group chart in the CategoryAxis and DataSource?

Hi,
I have a little problem when the data is shown.
I want a chart with the hours of service of a company, I have three fields, HOURS_SERVICE, TYPE_SERVICE, COMPANY.

The chart must show the hours of each type of service by company, I've tried this:
I attach two files: the first is the chart that I want and the second is the chart that's showing with Kendo

My View:

@model IEnumerable<SIS_CSC.ViewMoldels.HorasTrabajadasTecnicosViewModel>

<div>

<h2 align="centre"> REPORTE DE SERVICIOS POR EMPRESA</h2>

@(Html.Kendo().Chart(Model)

.Name("Chart")

.Title("Gráfico de horas de servicio de los clientes por tipo de trabajo")

.DataSource(datasource => datasource

.Read(read => read.Action("LeerExt_GraficoServicio", "Consultas").Data("getParameter"))

.Group(group => group.Add(model => model.TIPO_SERVICIO))

)

.CategoryAxis(axis => axis

.Categories(model => model.EMPRESA)

.Title("Cliente")

.Labels(label => label.Rotation(-90))

.MajorGridLines(major => major.Visible(false))

)

.SeriesDefaults(

seriesDefaults => seriesDefaults.Column().Stack(true)

)

.Series(series => {

series.Column(model => model.TOTAL_HORAS)

.Name("");

})

.Legend(legend => legend

.Position(ChartLegendPosition.Right)

)

.ValueAxis(axis => axis.Numeric()

.Title("Horas de servicio")

.Labels(labels => labels

.Format("{0}")

.Skip(1)

.Step(1)

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0,00}")

.Template("#= series.name #: #= value #")

)

</div>

<script type="text/javascript">

function getParameter() {

return {

txtFechaInicio: $("#txtFechaInicio").val(),

txtFechaFin: $("#txtFechaFin").val(),

};

}

function BindChart() {

$("#Chart").data("kendoChart").dataSource.read();

$("#Chart").data("kendoChart").redraw();

//$("#Chart").data("kendoChart").refresh();

}

</script>

My Controller: The datasource

public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)

{

return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));

}

Charts

answered on 24 Jan 2014

1 answer

217 views

Directions?

Do the kendo map controls provide a way for the user to ask directions to a location? Or open the location in Google maps or Bing?

Map

answered on 24 Jan 2014

11 answers

115 views

Drawer+Phonegap+Android4.3 Touch Problem

Hello,

I am developing an application for android, and found a strange effect on one of the devices. Touching of the Drawer's menu leads to two actions:
First: Drawer receives the event and begins to hide.
Second: View gets Touch event.
It's not very convenient, because the user does not expect it to happen.
I made a video recording, where you can see it.
Test button increments the counter on the screen when it receives a click. You can see how the counter is incremented when I click on the menu, not the button.

I also attach the source codes of this simple application.
It's been on my Nexus 10 with android 4.3. I compile Phonegap 3.0 application with Android SDK (local on my computer).

No such effect on other devices.
In a web browser also works correctly on all devices.

Regards.

Drawer (Mobile)

answered on 24 Jan 2014

3 answers

105 views

[Solved] Embed panelbar in listview

Hi,

I have a similar problem to this post, which has gone unanswered:
http://stackoverflow.com/questions/20749489/turn-kendo-listview-into-a-panelbar

I have a listview with paging that displays 10 complex table structures of varying size. I would like to have those 10 listview items be a panelbar and continue to work with paging. How could I do that?

ListView

answered on 24 Jan 2014

1 answer

312 views

[Solved] Bind Controller data to Kendo Chart

How to bind the Controller data to Kendo chart

My razor code looks like

@(Html.Kendo().Chart<MvcKendoDemo.Models.tblGraph>()
.Name("DBPlot")

.Title(title => title
           .Text("Kendo Plot DB Data")
           .Position(ChartTitlePosition.Bottom)
           )

.DataSource(ds => ds.Read(read => read.Action("GetGraphData", "Graph")))

    .Series(series =>
    {
        series.Column(model => model.STATS).Name("Stats");
    })

        .CategoryAxis(axis => axis
                    .Categories(model => model.DAY)
                    .MajorGridLines(lines => lines.Visible(false))
                )
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}%")
         .Template("#= series.name #: #= value #")
          )
)

And Controller code
public ActionResult GetGraphData()
        {
            var stats=new List<int?>();
            var day=new List<string>();
            foreach (var item in DB.tblGraphs)
                {
                    stats.Add(item.STATS);
                    day.Add(item.DAY);
                }
            return Json(new {stats=stats,day=day });//getting data from EF
        }

Result :- Empty graph is displayed with title.

How do i bind the data from controller to Chart.

Thanks in Advance.

Charts

answered on 24 Jan 2014

1 answer

74 views

How to run kendoui application with same style on all devices and also perform platform dependent scaling

I am creating a cordova app, and I test it on my computer while I am developing.

When I view the webpage in different mobile units, the scale
sometimes needs to be raised. I also find that the style may differ
between platforms.

What I tried was to force the platform (why do I have to do this?) like this

var app = new kendo.mobile.Application
(document.body, { skin: 'flat', platform: 'android' });

I am not sure this works perfectly, when viewing my app through the
Demo webpage (made by the kendo ui team) which lets me emulate different
devices, the webpage will not look the same (for some reason).

The scale on some devices (phones) is also a bit tiny, so I have to raise it.

How can I scale my app?

This question is also posted on stackoverflow:
http://stackoverflow.com/questions/21280952/how-to-run-kendoui-application-with-same-style-on-all-devices-and-also-perform-p

General Discussions

answered on 24 Jan 2014

1 answer

1.2K+ views

Validation Messages not showing on custom editors in grid

When using a custom editor on a grid field, validation messages are being hidden by the grid.
I have set up an example here: http://plnkr.co/edit/YpH6GfYJnllVntC1fx7r?p=preview

Click on a row in the Category column to activate the editor
Delete the text in the combo box.
Click elsewhere in the grid.

The Category Column field remains active but there is no validation message. The UI now appears broken as you can no longer edit other fields.

Note that the validation message is being activated but it is not visible as it is hidden by the grid. This can be shown by adding the css rule below.

.k-grid td{

padding-bottom:2em;!important

}

Is there a way to have Custom Editors with validation in a grid?

Thanks,

Neil

Grid

answered on 24 Jan 2014

1 answer

183 views

[Solved] How to insert TreeView inside the TabStrip at run time

Hi,

I need to add a tree view inside the tabstrip. My scenario is that upon click of a button, I get some data like below. I need to generate 1 tab per report and put a treeview for the 'Data' inside the tab. Is this possible? If yes, can you please let me know how to do this? I very much appreciate your help.

JSON Data:
[ Report 1: { Data: [ ] }, Report 2: { Data: [ ] } ]

Thank you.

TabStrip

answered on 24 Jan 2014

2 answers

127 views

Detail Template Bug, Opening Detail Template, Scrolling up to View row details, then changing Tabs

Kendo Support,

There's a bug in the kendo grid detail template that is caused by using the scroll bar and switching tabs...

The following steps reproduce the problem:
1.) Open a browser and open the page http://demos.kendoui.com/web/grid/detailtemplate.html.
2.) Move the scroll bar all the way to the bottom of the grid.
3.) Open the row details of the 'Steven' record.
4.) Scroll up so that the details of the 'Steven' row can be seen.
5.) Click on the 'Contact Information' tab....

Voila...

The grid should maintain the scrolltop = scrollheight of 'k-grid-content', but instead moves the scrolltop position up.

Take a look and let me know what you find...

Bill

Grid

answered on 23 Jan 2014

7 answers

673 views

Web UI Grid Display problem in iPad Safari (iOS 7+)

Hi,
We notice that when the data source return valid data to the Grid (in Web UI) that is browsed in the iPad Safari (iOS7+), the Grid does not show any rows until user touch (click on ) the Grid. Only upon touching (clicking) the Grid then it immediately shows its rows!
This behavior is only happening in the iOS Safari and not in any other browser.
Would appreciate your investigation and solution on this problem.
Thank you.

Grid

answered on 23 Jan 2014