Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

[Solved] Show an message when a save is successfull

Hi,

In a web application I'm using the kendo grid with the MVC helper (asp.net). I want to know if it's possible when the user to an update, insert or delete to catch when the operation is successful so this way I can show a little toast message to my user.

I know we can catch when an errors occurs with the event of the grid but I didn't find a way to do this when a save operation is done without any problems.

Thanks

Grid

answered on 16 Oct 2015

3 answers

1.4K+ views

Error with Multiselect Defined in DIV Element

We tried to upgrade from 2015.1.408 to 2015.3.1002.

After the upgrade, we started experiencing errors with Kendo. After drilling in, we saw the following: when a multiselect is defined using a "div" element we receive an exception on line 9457 of kendo.web.js 'Uncaught TypeError: Cannot read property 'length' of undefined'. After changing the element to a "select" the exception is not thrown and the page appears to load normally.

We were unable to find any official release notes that suggested this was an intentional change.

MultiSelect

answered on 16 Oct 2015

2 answers

127 views

Double click going to another url

Hello,

I'm using kendo scheduler with angularjs and i'm tring to: when i double click an event it's goes to another url, but without success.

It's possible to do it?

Thank you for your help.

Scheduler

answered on 15 Oct 2015

3 answers

266 views

data source with multiple filters

I am having problems with and or/and filter. The attached jpg shows the filter as I now have it.

When i run this, it looks as though the field "EmployeeId" in Filter 1 does not work. I get almost 9000 records when there should only be 147.

If I run each filter separately, Filter 1 gives my 145 records and then Filter 2 gives me 2 records, which are exactly the records I am looking.

So I know Filter 1 and Filter 2 are correct, but when I use the Logic "or" as in the jpg, it does not work.

How have I coded this wrong.

Thanks in advance.

Data Source

answered on 15 Oct 2015

3 answers

293 views

DatePicker with custom format does not kendoValidate

When I run kendoValidator.validate() on a form with the following, it fails to validate:

@(Html.Kendo().DateTimePickerFor(model => Value)
.Format("d MMMM yyyy at hh:mm tt")
.HtmlAttributes(htmlAttributes))

Shouldn't the kendoValidator know to look at the format? How should I get this to work?

DatePicker

answered on 15 Oct 2015

5 answers

132 views

Invalid cert on the kendo CDN

I have seen complaints about this already, why is nothing being done to address this? If you have an HTTPS only site the CDN must also be HTTPS, and the CDN must have a valid cert or the browser will refuse to download it and throw all sorts of errors. The old cloudfront cdn (which we are explicitly told in the FAQ not to use) has a valid cert but the kendo one does not. The 'new' CDN is absolutely worthless imo, and it reflects poorly on a professional product that costs as much as this one not to have a valid cert on their domains.

General Discussions

answered on 15 Oct 2015

1 answer

2.2K+ views

making cell non-editable of the grid based on a condition

columns: [{field: "Version",
template: function (dataItem) {
if (kendo.htmlEncode(dataItem.Version) == "Pacing")
{//I want to make a cell read only if its text value is Pacing. I am able to make it bold but not read only.

//dataItem.Version.editable = true;

// return kendo.htmlEncode(dataItem.Version.editable(true));
return "<strong>" + kendo.htmlEncode(dataItem.Version) + "</strong>";
}
},
title: "Version", width: "110px", editable: true
},
{ field: "Quarter1", title: "Quarter1", width: "110px", editable: true },

Also I want some columns editable but I am not getting that by writing editable=true

Kindly help asap, need for a project

Grid

answered on 15 Oct 2015

5 answers

715 views

[Solved] Donut Chart Hole Value

I have an application that I need to place the total of the values in the center hole of a donut chart. For instance, if I had 5 series values of 1, 2, 3, 4 and 5 then the hole in the center of the donut would contain 15. Of course, I would need to be able to control the font and format of the number.

Is this possible?

Regards,

Jay

Charts

answered on 15 Oct 2015

1 answer

336 views

Additional Field in Template doesn't set model

Hi there,

I want to add a TextField (or hidden) item into the form template. This Filed is Filled by jquery in this way: there is a button in the template that open a window (from partial view), this window, on close, set the value.

The form is working correctly, but the inventoryItems is not transferred in the server request for saving the event.
What am I missing?

My Model:

public class CalendarModel : BaseCalendarModel

{

public int cae_ID { get; set; }

public string cae_Timezone { get; set; }

public int? cae_EventType { get; set; }

public string inventoryItems { get; set; }

}

My Scheduler:

<link href="@Url.Content("~/Areas/Calendar/Content/toDoViewStyle.css?v=0.1")" rel="stylesheet" type="text/css" />

@{

Layout = "~/Areas/Calendar/Views/Shared/_LayoutCalendar.cshtml";

}

<script src="@Url.Content("~/Areas/Calendar/Scripts/toDoView.js?v=0.1")"></script>

<div class="spacer"> </div>

@(Html.Kendo().Scheduler<Clingo5.Areas.Calendar.Models.CalendarModel>()

.Name("scheduler")

.Date(DateTime.Today)

.StartTime(new DateTime(2015, 1, 1, 7, 0, 0))

.Height(800)

.Views(views =>

{

views.DayView();

views.WorkWeekView();

views.WeekView();

views.MonthView(monthView => monthView.Selected(true));

views.CustomView("CustomAgenda", view => view.Title("Agenda"));

views.CustomView("kendo.ui.ToDoView", view => view.Title("To Do"));

})

.Editable(editable =>

{

editable.TemplateName("CustomEditorTemplate").Window(w => w

.Name("Nuovo Appuntamento")

.HtmlAttributes(new {id="newAppointment"})

);

})

.Timezone("Etc/UTC")

.WorkDayStart(9, 0, 0)

.WorkDayEnd(18, 0, 0)

.WorkWeekStart(1)

.WorkWeekEnd(5)

.Messages(messages =>

{

messages.Today("Oggi");

}

)

.Resources(resource =>

{

resource.Add(m => m.cae_EventType)

.Title("Tipo")

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "Verifica Sicurezza", Value = 1, Color = "\\#6eb3fa" },

new { Text = "Manutenzione Preventiva", Value = 2, Color = "\\#f58a8a" }

});

})

.DataSource(d => d

.Model(m =>

{

m.RecurrenceId(f => f.RecurrenceID);

m.Id(f => f.cae_ID);

m.Field(f => f.Title).DefaultValue("Nuovo Evento");

})

.Events(e => e.Error("error_handler"))

.Read("GetAll", "Calendar")

.Create("Calendar_Create", "Calendar")

.Destroy("Calendar_Destroy", "Calendar")

.Update("Calendar_Update", "Calendar")

)

//.BindTo(Model)

)

<script type="text/javascript">

//Script per customizzare l'agenda

var CustomAgenda = kendo.ui.AgendaView.extend({

endDate: function () {

var date = kendo.ui.AgendaView.fn.endDate.call(this);

return kendo.date.addDays(date, 31);

}

});

//Apertura griglia elementi

function ClickButton(e) {

e.preventDefault();

var width = parseInt($("#dialogInventory").parent().parent().width() * 0.9);

OpenDialog('grid', width, 768, 1);

}

function OpenDialog(formId, width, height, recordId) {

$("#dialogInventory").width(width);

$("#dialogInventory").data("kendoWindow").open().center(true);

}

//gestione check sulla griglia di selezione

var checkedIds = {};

function onDataBound(e) {

var view = this.dataSource.view();

for (var i = 0; i < view.length; i++) {

if (checkedIds[view[i].id]) {

this.tbody.find("tr[data-uid='" + view[i].uid + "']")

.addClass("k-state-selected")

.find(".checkbox")

.attr("checked", "checked");

}

$(".checkbox").bind("change", function (e) {

var row = $(e.target).closest("tr");

row.toggleClass("k-state-selected");

var checked = $(this).is(':checked');

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

var dataItem = grid.dataItem(row);

checkedIds[dataItem.id] = checked;

});

}

function VerifyChecked() {

var checked = [];

for (var i in checkedIds) {

if (checkedIds[i]) {

checked.push(i);

}

//converto a stringa

checked = checked + "";

//alert(checked);

$("#Inventory").val(checked);

@*$.ajax({

cache: false,

type: "POST",

url: "@(Url.Action("SetField", "Calendar"))",

data: { "selectedItems": checked },

error:function (xhr, ajaxOptions, thrownError){

alert('Failed to return core and type field attributes.');

}

});*@

$("#dialogInventory").data("kendoWindow").close();

}

function CloseInventoryWindow() {

$("#dialogInventory").data("kendoWindow").close();

}

function checkAll(e) {

var checked = $(e).is(':checked');

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

$.each(grid.dataSource.view(), function () {

var id = this['id'];

if (this['IsExpectedPreventiveMaintenance'] != checked)

this.dirty = true;

this['IsExpectedPreventiveMaintenance'] = checked;

checkedIds[id] = checked;

});

grid.refresh();

}

//gestione errori calendario

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.one("dataBinding", function (e) {

//prevent saving if server error is thrown

e.preventDefault();

})

}

</script>

My Template:

@model Clingo5.Areas.Calendar.Models.CalendarModel

@functions{

public Dictionary<string, object> generateDatePickerAttributes(

string elementId,

string fieldName,

string dataBindAttribute,

Dictionary<string, object> additionalAttributes = null)

{

Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

datePickerAttributes["id"] = elementId;

datePickerAttributes["name"] = fieldName;

datePickerAttributes["data-bind"] = dataBindAttribute;

datePickerAttributes["required"] = "required";

datePickerAttributes["style"] = "z-index: inherit;";

return datePickerAttributes;

}

<div class="k-edit-label">

@(Html.LabelFor(model => model.Title))

</div>

<div data-container-for="title" class="k-edit-field">

@(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.Start))

</div>

<div data-container-for="start" class="k-edit-field">

@(Html.Kendo().DateTimePickerFor(model => model.Start)

.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))

@(Html.Kendo().DatePickerFor(model => model.Start)

.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))

<span data-bind="text: startTimezone"></span>

<span data-for="start" class="k-invalid-msg"></span>

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.End))

</div>

<div data-container-for="end" class="k-edit-field">

@(Html.Kendo().DateTimePickerFor(model => model.End)

.HtmlAttributes(generateDatePickerAttributes(

"endDateTime",

"end",

"value:end,invisible:isAllDay",

new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

@(Html.Kendo().DatePickerFor(model => model.End)

.HtmlAttributes(generateDatePickerAttributes(

"endDate",

"end",

"value:end,visible:isAllDay",

new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

<span data-bind="text: endTimezone"></span>

<span data-for="end" class="k-invalid-msg"></span>

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.IsAllDay))

</div>

<div data-container-for="isAllDay" class="k-edit-field">

<input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" />

</div>

<div class="endTimezoneRow">

<div class="k-edit-label"></div>

<div class="k-edit-field">

<label class="k-check">

<input checked="checked" class="k-timezone-toggle" type="checkbox" value="true" />

Use separate start and end time zones

</label>

</div>

<script>

$(".k-timezone-toggle").on("click", function () {

var isVisible = $(this).is(":checked");

var container = $(this).closest(".k-popup-edit-form");

var endTimezoneRow = container.find("label[for='EndTimezone']").parent().add(container.find("div[data-container-for='endTimezone']"));

endTimezoneRow.toggle(isVisible);

if (!isVisible) {

var uid = container.attr("data-uid");

var scheduler = $("\#scheduler").data("kendoScheduler");

var model = scheduler.dataSource.getByUid(uid);

model.set("endTimezone", null);

}

});

var endTimezone = '${data.endTimezone}';

if (!endTimezone || endTimezone == "null") {

$(".k-timezone-toggle").trigger('click');

}

</script>

<div class="k-edit-label">

@(Html.LabelFor(model => model.StartTimezone))

</div>

<div data-container-for="startTimezone" class="k-edit-field">

@(Html.Kendo().TimezoneEditorFor(model => model.StartTimezone)

.HtmlAttributes(new { data_bind = "value:startTimezone" }))

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.EndTimezone))

</div>

<div data-container-for="endTimezone" class="k-edit-field">

@(Html.Kendo().TimezoneEditorFor(model => model.EndTimezone)

.HtmlAttributes(new { data_bind = "value:endTimezone" }))

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.RecurrenceRule))

</div>

<div data-container-for="recurrenceRule" class="k-edit-field">

@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)

.HtmlAttributes(new { data_bind = "value:recurrenceRule" }))

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.Description))

</div>

<div data-container-for="description" class="k-edit-field">

@(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))

</div>

<div class="k-edit-label">

@(Html.LabelFor(model => model.cae_EventType))

</div>

<div data-container-for="cae_EventType" class="k-edit-field">

@(Html.Kendo().DropDownListFor(model => model.cae_EventType)

.HtmlAttributes(new { data_bind = "value:cae_EventType", style = "width: 200px" })

.DataTextField("Text")

.DataValueField("Value")

.OptionLabel("None")

.ValuePrimitive(true)

.Template("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")

.BindTo(new[] {

new { Text = "Verifica Sicurezza", Value = 1, Color = "\\#6eb3fa" },

new { Text = "Manutenzione Preventiva", Value = 2, Color = "\\#f58a8a" }

}).ToClientTemplate()

)

</div>

<div data-container-for="inventoryItems" class="k-edit-field">

@(Html.TextBoxFor(model => model.inventoryItems, new { @class = "k-textbox", data_bind = "value:inventoryItems" }))

</div>

<div class="k-edit-field">

@(Html.Kendo().Button()

.Name("openButton")

.Content("Apri Inventario")

.HtmlAttributes(new { type = "button" })

.Events(ev => ev.Click("ClickButton"))

)

</div>

<div>

@(Html.Kendo().Window()

.Name("dialogInventory")

.Title("Search Items")

.LoadContentFrom("PartialGrid", "Calendar")

.Draggable()

.Actions(actions => actions

.Close()

)

.Modal(true).Visible(false)

.Resizable()

.Height(800)

//.Width(1200)

.Position(pos => pos.Top(50))

)

</div>

My Partial:

@model System.Data.DataTable

@{

IEnumerable<string> pages;

var pagesList = new List<string> { "All", "10", "20", "50", "100" };

pages = pagesList;

}

@{

var culture = Clingo5.MvcApplication.LoggedUser.CultureInfo;

}

<script src="@Url.Content("~/Content/plugin/kendo/cultures/kendo.culture." + culture + ".min.js")"></script>

<script>

@if (Clingo5.MvcApplication.LoggedUser != null && !string.IsNullOrEmpty(Clingo5.MvcApplication.LoggedUser.ShortCulture))

{

<text>

$("html").prop("lang", "@(Clingo5.MvcApplication.LoggedUser.ShortCulture)");

</text>

}

</script>

<script type="text/javascript">

//set the Kendo UI culture

$(function () {

kendo.culture("@culture");

})

</script>

<div id="search_grid">

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

.Name("grid")

//.Selectable(s => s.Mode(GridSelectionMode.Multiple))

.Columns(columns =>

{

List<string> columnElaborated = new List<string>();

//ciclo iniziale

foreach (System.Data.DataColumn column in Model.Columns)

{

//controllo che non sia stato già inserita la colonna in un raggruppamento

if (!columnElaborated.Contains(column.ColumnName))

{

//verifico che la colonna sia da raggruppare

if (column.ColumnName.ToString().IndexOf("_") > 0)

{

char[] delimiterChars = { '_' };

string[] title = column.ColumnName.ToString().Split(delimiterChars);

if (title[0].Length > 0)

{

//raggruppo

columns.Group(g => g

.Title(title[0])

.HeaderHtmlAttributes(new { style = "text-align: center !important;" })

.Columns(h =>

{

//secondo ciclo per creare il raggruppamento

foreach (System.Data.DataColumn head in Model.Columns)

{

if (head.ColumnName.StartsWith(title[0]))

{

var he = h.Bound(head.ColumnName);

he.Title(head.ColumnName.Remove(0, head.ColumnName.IndexOf("_") + 1));

switch (head.DataType.FullName)

{

case "System.DateTime":

he.Format("{0:dd/MM/yyyy}");

he.Width(40);

he.HtmlAttributes(new { style = "text-align: right !important;" });

break;

case "System.Int32":

he.Width(60);

he.HtmlAttributes(new { style = "text-align: right !important;" });

break;

case "System.Boolean":

he.Width(55);

break;

default:

he.Width(200);

he.HtmlAttributes(new { style = "text-align: left !important;" });

break;

}

//inserisco la colonna nella collezione di quelle già elaborate

columnElaborated.Add(head.ColumnName);

}

)

);

}

else

{

//se la colonna non è da raggruppare

var c = columns.Bound(column.ColumnName);

columnElaborated.Add(column.ColumnName);

switch (column.ColumnName)

{

case "civID":

c.ClientTemplate(@"

<input type='checkbox' id='#: civID #' #= IsExpectedPreventiveMaintenance ? checked='checked':'' # name='SelectedcivID' class='checkbox' />"

).HeaderTemplate(@"<label><strong><input type='checkbox' onclick='checkAll(this)'/>All</strong></label>").Sortable(false).Filterable(false);

break;

case "IsExpectedPreventiveMaintenance":

c.Hidden(true);

break;

case "InventoryNumber":

//c.Locked(true);

break;

default:

//c.Title(column.ColumnName.Remove(0, 4));

break;

}

switch (column.DataType.FullName)

{

case "System.DateTime":

c.Format("{0:dd/MM/yyyy}");

c.Width(40);

c.HtmlAttributes(new { style = "text-align: right !important;" });

break;

case "System.Int32":

c.Width(60);

c.HtmlAttributes(new { style = "text-align: right !important;" });

break;

case "System.Boolean":

c.Width(55);

break;

default:

c.Width(200);

c.HtmlAttributes(new { style = "text-align: left !important;" });

break;

}

if (column.DataType.FullName == "System.DateTime")

{

c.Format("{0:dd/MM/yyyy}");

c.Width(50);

}

})

//Commentati per ragioni stilistiche

.HtmlAttributes(new { style = "height: 700px; width: 1000x; " })

.Scrollable()

//attributi della griglia

.Groupable()

.Filterable(ftb => ftb

.Mode(GridFilterMode.Row)

.Operators(operators => operators

.ForString(str => str

//riscrivo i modi di filtrare

.Clear()

.Contains("Contiene")

.IsEqualTo("Uguale")

)

))

.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))

.ColumnMenu()

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

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

.Pageable(paging => paging

.Refresh(true)

.PageSizes(true)

.PageSizes(pages)

.ButtonCount(5)

)

.Events(evt => evt

.DataBound("onDataBound")

)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model =>

{

var id = Model.Columns[0].ColumnName;

model.Id(id);

foreach (System.Data.DataColumn column in Model.Columns)

{

var field = model.Field(column.ColumnName, column.DataType);

field.Editable(false);

}

})

.Read(read => read.Action("Items_Read", "Calendar"))

)

</div>

<div class="k-edit-form-container buttons-container">

@(Html.Kendo().Button()

.Name("setInventoryButton")

.Icon("tick")

.Content("Ok")

.Events(ev => ev.Click("VerifyChecked"))

)

@(Html.Kendo().Button()

.Name("setCancelButton")

.Icon("cancel")

.Content("Cancel")

.Events(ev => ev.Click("CloseInventoryWindow"))

)

</div>

Thank you in advance

Scheduler

answered on 15 Oct 2015

1 answer

153 views

Chart Tooltip

Can we have some configuration to show arrow in tool tip, please find attached screenshot for reference.

Charts

answered on 15 Oct 2015