Questions on Kendo UI for jQuery Forum

2 answers

222 views

I initially posted this bug report in the 'kendo-ui-complete-for-asp-net-mvc' but no one answered.
Perhaps I will have a better success in this forum?

The Kendo DatePicker has a bug it seems when you place it in a popup editor.
This widget does not bind to a DateTime model property when you place it in a popup editor.
In the attached sample project I changed the culture in the web.config to 'auto' which on my workstation is set to 'en-AU.'
In this sample the 'PostedOn' property is a nullable DateTime though it makes no difference to this bug.
Adding ParseFormats strings makes no difference either.

This project is a modified sample that you have provided previously (see http://www.kendoui.com/forums/kendo-ui-web/date-time-pickers/datetimepicker-format-doesn-t-work-with-initial-default-value.aspx)
As you can see from the attached screenshot kendo datepicker reports on erroneous date even though it is a valid date.
Outside the popup editor, this same datepicker works perfectly good.
Any workaround?

Regards,
Menashay

DatePicker

answered on 24 Jan 2014

2 answers

594 views

Grid newRow() --> very small row height

Hello Telerik-Team,

i have a problem with my Grid implementation.

My grid has 0-n rows, and i always want to add one empty row to the grid (so that the user can add a new record). I use this code snippet to add this empty row

var grid = $("#grid").data("kendoGrid");

grid.addRow();

$(".k-grid-edit-row").appendTo("#grid tbody");

My problem is, that the new row is very thin. When i click into the emty row, it gets bigger. Is there any possibility to set the row height to that size
as when i click into it?

Thank you

Grid

answered on 24 Jan 2014

1 answer

94 views

Passing additional data doesn't work after upgrade to 2013.3.1316

Hi all

I have a problem after upgrading kendo UI from 2013.2.918 to 2013.3.1316. I have a grid where I pass additional data with a separate javascript function. In the old version the data was correctly submitted in the POST but in the new version this data isn't appended anymore.
Please see the example below (look for the javascript-method "getShowDeleted"):

<script type="text/javascript">

$(document).ready(

function () {

$("#ShowDeleted").click(function () {

var grid = $('#grid').data('kendoGrid');

grid.dataSource.read();

grid.refresh();

});

}

);

function getShowDeleted() {

var showDeleted = { "showDeleted": $("#ShowDeleted").is(':checked') };

return showDeleted;

}

/* when all data is loaded into the grid,

* we are able to select either a predefined entry or

* the first one

*/

function dataBound(e) {

var selectedId = '@(this.Model.SelectedId)';

var dataItem, row;

var el = $("#grid");

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

$(".deleted").parent('td').parent('tr').addClass("deleted-row");

if (selectedId > 0) {

dataItem = grid.dataSource.get(selectedId);

if (dataItem) {

row = el.find("tbody>tr[data-uid=" + dataItem.uid + "]");

grid.select(row);

}

} else {

row = el.find("tbody>tr:first");

grid.select(row);

}

@if (Model.Operation != OperationType.Read)

{

<text>

$("#grid table").removeClass("k-selectable");

</text>

}

/* we have to do this script on THIS page,

* as the snippet relies on this.select() method

*/

function gridChange(e) {

var data = this.dataItem(this.select());

if (!data) {

return;

}

var propId = data.Id;

var url = kendo.format('@(Server.UrlDecode(Url.Action("DetailsRead", "Address", new { id = "{0}", showDeleted = "{1}" })))',

propId, $("#ShowDeleted").is(':checked'));

$.ajax({

type: 'GET',

url: url,

success: function (response) {

// Update the content div

$('#details').html(response);

}

});

}

</script>

@(Html.Kendo().Grid<AddressViewModel>()

.Name("grid")

.Events(evt =>

{

// enable grid changing only when in read-mode

if (Model.Operation == OperationType.Read)

{

evt.Change("gridChange");

}

evt.DataBound("dataBound");

})

.DataSource(datasource =>

datasource.Ajax().Read(builder =>

{

builder.Action("Read", "Address", new { id = Model.PersonId });

builder.Data("getShowDeleted");

}).Model(m => m.Id(id => id.Id)))

.Columns(columns =>

{

columns.Bound(result => result.IsDeleted).Hidden().ClientTemplate(

"<span class=" +

"# if (IsDeleted) { #" +

"'deleted'" +

"# } else { #" +

"'not-deleted'" +

"# } #" +

"/>");

columns.Bound(result => result.NameEstablishment);

columns.Bound(result => result.Street);

columns.Bound(result => result.Zip);

columns.Bound(result => result.Place);

})

.Pageable(pager => pager.Messages(msg =>

{

msg.Display(@Shared.PagerDisplay);

msg.Empty(@Shared.PagerEmpty);

msg.Page(@Shared.PagerPage);

msg.Of(@Shared.PagerOf);

msg.ItemsPerPage(@Shared.PagerItemsPerPage);

msg.First(@Shared.PagerFirst);

msg.Previous(@Shared.PagerPrevious);

msg.Next(@Shared.PagerNext);

msg.Last(@Shared.PagerLast);

msg.Previous(@Shared.PagerPrevious);

msg.Refresh(@Shared.PagerRefresh);

}))

.Selectable(selectable => selectable.Enabled(true))

.Sortable(x => x.SortMode(GridSortMode.SingleColumn)))

The element $("#ShowDeleted") is a checkbox on the same page.

As this was working in the previous version, I wonder if this is a known issue and if there is a workaround until the (potential) bug is fixed?

Greetings,
Daniel

Grid

answered on 24 Jan 2014

2 answers

249 views

ClientFooterTemplate error after dataSource.query

I'm trying to implement grid state saving/loading (i.e remembering sorting/filtering/page size/etc) but I've run into issues with regard to a grid that implements a ClientFooterTemplate.

The grid is defined as follows:

@(Html.Kendo().Grid<TrendModel>()

.Name("TrendGrid")

.Columns(columns =>

{

columns.Bound(o => o.Number).Title("Number")

.Width(100)

.ClientTemplate("#= NumberTemplate(Number, Id)#");

columns.Bound(o => o.Currency).Width(100);

columns.Bound(o => o.Estimate).Title("Estimate").Width(105)

.Format("{0:n0}")

.HtmlAttributes(new { @class = "numeric" })

.ClientFooterTemplate("<strong>#= sum #</strong>")

.FooterHtmlAttributes(new {@class = "numeric", style = "white-space:nowrap;"});

})

.ColumnMenu()

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.SingleColumn))

.Pageable(builder => builder

.Input(true)

.Numeric(false)

.PageSizes(new[] {10, 20, 50, 100 }))

.Pageable()

.Navigatable()

.Filterable(f => f

.Extra(false)

.Operators(o => o

.ForString(s => s

.Clear()

.Contains("Contains")

.DoesNotContain("Does not contain")

.StartsWith("Starts With")

.EndsWith("Ends with")

.IsEqualTo("Is Equal To")

.IsNotEqualTo("Is Not Equal To")

)))

.Resizable(col => col.Columns(true))

.Reorderable(x => x.Columns(true))

.Scrollable(scrollable => scrollable.Enabled(true))

.HtmlAttributes(new { style = "height:700px; width:calc(100% - 20px);", @class = "report-grid" })

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.PageSize(20)

.Read(read => read.Action(@ViewBag.ActionName, "Trend", new { area = "Foo" }).Type(HttpVerbs.Post))

.Sort(sort => sort.Add("Number").Ascending())

.Aggregates(agg => {

agg.Add(est => est.Estimate).Sum();

})

.Model(model => model.Id(p => p.Id))

.Events(events => events.RequestEnd("highlightFiltered")))

)

And the code that sets the state is:

$(document).ready(function () {

var grid = $("#TrendGrid").data("kendoGrid");

var data = { "pageSize": 20, "sort": [{ "field": "Currency", "dir": "asc", "compare": null }], "group": [] };

grid.dataSource.query(data);

grid.dataSource.page(1); //if you don't explicitly set to page one the paging is messed up

}

However, when that runs I get an error "0x800a138f - Microsoft JScript runtime error: Object expected" on the because data.Estimate is undefined on the following anonymous block:

function anonymous(data) {

var o,e=kendo.htmlEncode;with(data.Estimate){o=''+( sum )+'</strong>';}return o;

}

I was having a similar issue with another grid that had a ClientGroupFooterTemplate with "sum" being undefined but I was able to wrap a check around that to handle the error. I'm guessing the problem is caused by the data binding not being done before the template is rendered, but that's just a guess.

Any ideas what I'm missing here?

Grid

answered on 24 Jan 2014

1 answer

110 views

CSS list working?

In The online examples (and my local code), the CSS for the items in the drop down list does not seem to take the current CSS. For example, if you go the demo section and select Silver as your theme, the items in the list of the DropDownMenu are blue. The same theme for MultiSelect drop down list is grey. Is there something special we need to do to get the list to look the same as the drop down menu?

Version: 2013.3.1316

MultiSelect

answered on 24 Jan 2014

1 answer

311 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

172 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

81 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

90 views

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

287 views

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