Questions on Kendo UI for jQuery Forum

5 answers

890 views

Adding a new item does not save to the database

Hello

I am currently trying out Kendo UI for jQuery. I have an issue with the combobox where it does not save a new item to my database once I added the item. It seems to save it in localstorage for the duration of the session. I am new to this, so I am probably doing something wrong here. I have followed the example from the demo and the backend service. Can someone please tell me what I am doing wrong here.

Here is the code for my view page which sits in my app:

<div id="countries">

<div class="demo-section k-content">

<h4>Enter a Country name</h4>

<input id="countries" style="width: 100%;" />

<div class="demo-hint">e.g. 'South Africa'</div>

</div>

<script id="noDataTemplate" type="text/x-kendo-tmpl">

<div>

No data found. Do you want to add new item - '#: instance.text() #' ?

</div>

<br />

<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.text() #')">Add new item</button>

</script>

<script>

function addNew(widgetId, value) {

var widget = $("#" + widgetId).getKendoComboBox();

var dataSource = widget.dataSource;

if (confirm("Are you sure you want to add this Country?")) {

dataSource.add({

CountryIdentifier: 0,

CountryName: value

});

dataSource.one("sync", function () {

widget.select(dataSource.view().length - 1);

});

dataSource.sync();

}

};

</script>

<script>

$(document).ready(function () {

var crudServiceBaseUrl = "http://localhost:49517";

var dataSource = new kendo.data.DataSource({

batch: true,

transport: {

read: {

url: crudServiceBaseUrl + "/Countries",

dataType: "jsonp"

},

create: {

url: crudServiceBaseUrl + "/Countries/Create",

dataType: "jsonp"

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

return { models: kendo.stringify(options.models) };

}

},

schema: {

model: {

id: "CountryIdentifier",

fields: {

CountryIdentifier: { type: "number" },

CountryName: { type: "string" }

}

});

$("#countries").kendoComboBox({

filter: "startswith",

dataTextField: "CountryName",

dataValueField: "CountryIdentifier",

dataSource: dataSource,

noDataTemplate: $("#noDataTemplate").html()

});

</script>

</div>

Here is the code for my controller which sits in my API:

public class CountriesController : Controller

{

public ActionResult Index()

{

return this.Jsonp(CountryRepository.All());

}

public JsonResult Update()

{

var models = this.DeserializeObject<IEnumerable<CountryViewModel>>("models");

if (models != null)

{

CountryRepository.Update(models);

}

return this.Jsonp(models);

}

public ActionResult Destroy()

{

var countries = this.DeserializeObject<IEnumerable<CountryViewModel>>("models");

if (countries != null)

{

CountryRepository.Delete(countries);

}

return this.Jsonp(countries);

}

public ActionResult Create()

{

var countries = this.DeserializeObject<IEnumerable<CountryViewModel>>("models");

if (countries != null)

{

CountryRepository.Insert(countries);

}

return this.Jsonp(countries);

}

public JsonResult Read(int skip, int take)

{

IEnumerable<CountryViewModel> result = CountryRepository.All().OrderByDescending(p => p.CountryIdentifier);

result = result.Skip(skip).Take(take);

return this.Jsonp(result);

}

Here is the code for my ViewModel which sits in my API:

public class CountryViewModel

{

public int? CountryIdentifier { get; set; }

public string CountryName { get; set; }

public string CreatedBy { get; set; }

public string FK_CreatedByID { get; set; }

[DataType(DataType.Date)]

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

public Nullable<System.DateTime> DateCreated { get; set; }

public string LastEditedBy { get; set; }

public string FK_LastEditedByID { get; set; }

[DataType(DataType.Date)]

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

public Nullable<System.DateTime> DateLastEdited { get; set; }

}

And here is the code for my CountryRepository which sits in my API:

public static class CountryRepository

{

public static IList<CountryViewModel> All()

{

var result = HttpContext.Current.Session["Countries"] as IList<CountryViewModel>;

if (result == null)

{

HttpContext.Current.Session["Countries"] = result =

new OldMutualDataContext().Countries.Select(c => new CountryViewModel

{

CountryIdentifier = c.CountryIdentifier,

CountryName = c.CountryName,

CreatedBy = c.CreatedBy,

FK_CreatedByID = c.FK_CreatedByID,

DateCreated = c.DateCreated,

LastEditedBy = c.LastEditedBy,

FK_LastEditedByID = c.FK_LastEditedByID,

DateLastEdited = c.DateLastEdited

}).ToList();

}

return result;

}

public static CountryViewModel One(Func<CountryViewModel, bool> predicate)

{

return All().FirstOrDefault(predicate);

}

public static void Insert(CountryViewModel country)

{

var first = All().OrderByDescending(c => c.CountryIdentifier).FirstOrDefault();

if (first != null)

{

country.CountryIdentifier = first.CountryIdentifier + 1;

}

else

{

country.CountryIdentifier = 0;

}

All().Insert(0, country);

}

public static void Insert(IEnumerable<CountryViewModel> countries)

{

foreach (var country in countries)

{

Insert(country);

}

public static void Update(CountryViewModel country)

{

var target = One(c => c.CountryIdentifier == country.CountryIdentifier);

if (target != null)

{

target.CountryName = country.CountryName;

target.LastEditedBy = country.LastEditedBy;

target.FK_LastEditedByID = country.FK_LastEditedByID;

target.DateLastEdited = country.DateLastEdited;

}

public static void Update(IEnumerable<CountryViewModel> countries)

{

foreach (var country in countries)

{

Update(country);

}

public static void Delete(CountryViewModel country)

{

var target = One(c => c.CountryIdentifier == country.CountryIdentifier);

if (target != null)

{

All().Remove(target);

}

public static void Delete(IEnumerable<CountryViewModel> countries)

{

foreach (var country in countries)

{

Delete(country);

}

Help would be appreciated.

Thank You

ComboBox

answered on 16 May 2018

3 answers

455 views

DatePicker span elements hanging around after destroy

I'm not sure if this is expected behavior, but when you destroy a KendoDatePicker, the spans that Kendo creates on initialization of the widget stick around afterwards. It seems like something that Kendo should be cleaning up when it destroys a widget, since they are Kendo specific elements it added to the DOM.

Dojo to reproduce:
https://dojo.telerik.com/OBImobad

Date/Time Pickers

answered on 16 May 2018

2 answers

75 views

Incell number editing visual glitch

Hey everyone,

I came across an annoying visual glitch while implementing incell editing (default edit mode) with non-decimal numbers. When we enter the edit field of an said number (let's say value=14), for a brief moment the editor displays 14.00. This is easily reproducible in a clean dojo environment. I tried a couple of things to get rid of this but didn't succeed.

Here is a dojo where each column represents what I've tried :

Standard: minimalist config that I used in the beginning
Model Format: tried to force the format at the data source level
Template: Tried to set a custom template with kendo.toString(value, "n0")
Custom Editor: using a simple custom editor ( vale is lost here)
Custom editor 2: using a custom editor and initializing the value (breaks model change)

https://dojo.telerik.com/oYAvOlOZ

Grid

answered on 15 May 2018

11 answers

415 views

Kendo showing negative zero when using conditional formatting

We are using kendo’s support for conditional formatting to build custom masks. For example:

kendo.toString(value, ‘\\$0;-\\$0’) // e. g. -$100 or $100

The problem is that kendo picks which side of the conditional formatting to use BEFORE rounding is applied. Thus we can end up with a display of negative zero:

kendo.toString(-.01, ‘\\$0;-\\$0’) // -$0

Note that this is similar to this issue: http://www.telerik.com/forums/issue-rounding-to-zero---getting-negative-zero, however that issue is for the built-in n2 format whereas our issue is for conditional formats.

Note that in C#/.NET, the behavior of conditional formats matches what we want:

Console.WriteLine((-.01).ToString("$0;-$0")); // $0

For reference, the reason we are building masks like this is because we have user-defined “front” and “back” symbols which should go between the negative/positive sign (or parens if we are using parens for negation) and the number itself. We thus want -$100 or ($100) instead of $-100 or $(100).

It would be great if kendo’s behavior matched .NET in this regard since it seems to be so similar otherwise and in general the .NET behavior seems preferable in most cases.

Also posted on StackOverflow:
http://stackoverflow.com/questions/39977914/kendo-format-string-puts-literal-in-the-wrong-place

http://stackoverflow.com/questions/39977630/kendo-conditional-formatting-results-in-negative-zero

General Discussions

answered on 15 May 2018

1 answer

139 views

Whats the formula for RANGE email validation?

All the samples reference specific cells

https://demos.telerik.com/kendo-ui/spreadsheet/validation

The need is to be able to define validation for columns in the sheet to enforce a template... the data isn't being manually created with the sheet. I feel like most of the samples (all?) seem to be setup with creating the row\cell on init, and that's valid for like template\header\footer setup but not real-world data usage.

sheet.range("A2:A40").validation({

dataType: "custom",

from: "SEARCH(\"@\")",

allowNulls: true,

type: "warning",

messageTemplate: "Invalid email"

});

Spreadsheet

answered on 15 May 2018

1 answer

55 views

Editor in IE11 with JQuery 3.X spellcheck on mousemove into the control, newline and backspace

Hi.

We use an editor control to display text. This control works fine in FireFox, Chrome and Edge.

When trying to use the control in IE11 (with JQuery 3.X), the editor spellchecks all the time, entailing slow performance.

A dojo can be found here: https://dojo.telerik.com/OCoBApiw

It is more clear if there's a lot of text in the control.

To replicate:
Open Dojo and run in IE11.

Write 15 lines of gibberish (asfijasf ajsif ajs fjaif etc.)

Press backspace OR move mouse in and out of control

Is this a known issue, and what can I do to accomodate it?

Editor

answered on 15 May 2018

1 answer

1.0K+ views

Export Grid to PDF: fonts not found

I'am trying to export the Grid to PDF but I get http 404 errors because the font files cannot be downloaded.

My css definition looks like:

@font-face{font-family:DejaVu Sans;font-weight:700;src:url(/dist/DejaVuSans-Bold.ttf)}

But the fonts are hosted in this location http://somedomain/subdirectory/dist/DejaVuSans-Bold.ttf but the PDF export is looking at http://somedomain/dist/DejaVuSans-Bold.ttf so I get 404 errors. He doesn't take into account the subdirectory.

I tried to use the kendo.pdf.defineFont to point to the correct location of the fonts files but the PDF Export doesn't pickup these settings

kendo.pdf.defineFont({

'FontAwesome': '/subdirectory/dist/icons.ttf',

'DejaVu Sans': '/subdirectory/dist/DejaVuSans.ttf',

'DejaVu Sans|Bold': '/subdirectory/dist/DejaVuSans-Bold.ttf',

'DejaVu Sans|Bold|Italic' : '/subdirectory/dist/DejaVuSans-BoldItalic.ttf',

'DejaVu Sans|Italic' : '/subdirectory/dist/DejaVuSans-Italic.ttf'

});

The subdirectory is dynamic and set while deploying the application so I cannot change the url in the CSS files in front.

Grid

answered on 15 May 2018

2 answers

100 views

Sheet validation, not sure how to set this up properly

So I need my spreadsheet to have a header row, and every row below be where the data is entered... so I've got that setup fine I think.

Now I need to define validation rules on ranges, so like K2:K40 can only have 1-5... I was able to do this in the widgetCreated event

sheet.range("K2:K40").validation({

type: "warning",

from: "1",

to: "5",

allowNulls: true,

comparerType: "between",

dataType: "number",

messageTemplate: "PGYs are 1-5"

});

My current struggle though is being able to find out the total validation errors in the sheet... the code provided here

https://www.telerik.com/forums/retrieve-validation-errors-programatically

and here

https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/how-to/get-flagged-cells

Always fails, the "cell.validation" in range.forEachCell is always undefined... what am I doing wrong here?

Spreadsheet

answered on 14 May 2018

3 answers

221 views

Client Filtering CSS

Hello,

I'm about to implement the DropDownList Client Filtering function as per http://demos.telerik.com/aspnet-mvc/dropdownlist/clientfiltering.

However, due to the complex CSS of my site, the magnify glass icon in the search box has been mis-aligned.

I'm struggling to find the CSS that relates to the said icon.

Please can someone tell what CSS I need to adjust the icon?

Or can someone please tell me how to move the icon 5 pixels to the left?

Thanks in advance.

DropDownList

answered on 14 May 2018

1 answer

7.2K+ views

Add custom button to toolbar

How do I add a button to the toolbar of a grid? There isn't much documentation other than using the default commands, which aren't helpful. Ideally, I should be able to say,

toolbar: [{
name: 'new',
id: 'createNew',
text: "Create New ",
click: function(e) {
// do stuff
}
}]

I've seen other solutions where I define a template, but I think that is a poor solution, especially if your app is highly modularized. How do you add a button via config options?

Grid

answered on 11 May 2018