Questions on Kendo UI for jQuery Forum

2 answers

266 views

If possible, I'd like a tabstrip layout with a drawer that slides out from the left when you select one of the tabs. Kind of have it working with something like the code below. Before I go much further, is this possible with KendoUI? I'm starting to see some apps do this (like Lowes Hardware app). It's really nice.

<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>

<div data-role="footer">
<div data-role="tabstrip" data-selected-index="1" data-select="onSelect">
<a data-icon="contacts">foo</a>
<a data-icon="contacts">bar</a>
<a data-icon="info">baz</a>
<a data-icon="info">baz2</a>
<a data-icon="info">baz4</a>
</div>
</div>
</div>

<script>

function onSelect(e) {

if (e.item.index()==0)
{
$("#my-drawer").data("kendoMobileDrawer").show();
e.preventDefault(); //prevent the tab selection
}
}
</script>

Drawer (Mobile)

answered on 27 Jan 2014

4 answers

206 views

Date validation failing but not sure why

Hi there

The customer is asking for date/time formats such as 01 Jun 2014 10:20

So I specify this in the view:

@(Html.Kendo().DateTimePickerFor(m => m.Baby.DateOfBirth).Format("dd MMM yyyy HH:mm").TimeFormat("HH:mm").HtmlAttributes(new { style = "width:170px"}).Max(DateTime.Now)))

and this in the model:

public DateTime? DateOfBirth { get; set; }

Now when I select a date and time from the datepicker I see the value: "09 Jan 2014 02:00" which seems fine, but when I tab off I get the error " The field Date of Birth must be a date."

Any idea why?

Date/Time Pickers

answered on 25 Jan 2014

2 answers

213 views

DatePicker bug in popup editor

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

Date/Time Pickers

answered on 24 Jan 2014

2 answers

563 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

85 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

240 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

103 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

300 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

154 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

78 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