Questions on Kendo UI for jQuery Forum

2 answers

155 views

MVVM - Switching between form read mode and edit mode

We have forms that are rendered in 'read mode' which means the text for a field like First Name or Last Name is simply rendered inside a Span HTML element. When the user clicks Edit, we want the form to switch to 'edit mode' which means the Spans should be replaced with TextBoxes or whichever HTML element is most appropriate.

Can Kendo help in the automation of this? Or is there another best practice approach?

Regards,
Jacques

General Discussions

answered on 27 Jan 2014

2 answers

285 views

Tabbed View with Drawer

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

218 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?

DatePicker

answered on 25 Jan 2014

2 answers

235 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

DatePicker

answered on 24 Jan 2014

2 answers

606 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

97 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

261 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

113 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

317 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)