Questions on Kendo UI for jQuery Forum

3 answers

691 views

Kendo Confirm dialog firing twice using ENTER key

Hello

It took me a while to find this one and I assume its a bug. The KendoDialog (confirm) fires twice on pressing return instead clicking with the mouse on it. You can try that on your API samples, like here

The link will head you to the actions.action sample.

1. Switch to preview mode of actions.action

2. Press TAB key once to focus the "Ok" button

3. Press the ENTER (RETURN) key

You will see that the message "OK action was clicked" will appear twice (click close on first message then the second message appears).

Clicking on the OK button with the mouse will show the message only once (as it should).

Beside of finding that problem it brings me into certain troubles now because the dialog buttons in my project are associated with server side functions (calling them) and now I have some unwanted side effects/data constellation on my server. :/

I just found this on KendoDialog confirm. I have no idea if that effect can also be found in other Kendo widgets (I hope not).

Regards

Dialog

answered on 12 Jun 2018

10 answers

4.4K+ views

[Solved] DatePicker value() returns null after min() is set and min date is selected

Hi guys.
I started having issues with date pickers today.

In Javascript I set the min date of a date picker to today and the value for tomorrow,

var today = new Date();

var tomorrow = new Date();

tomorrow.setDate(today.getDate() + 1);

$("#start_date").data("kendoDatePicker").min(today);

$("#start_date").data("kendoDatePicker").value(tomorrow);

This works fine. However, when I select today's date and I do:

var d = $("#start_date").data("kendoDatePicker").value();

d is set to null (or undefined depending on the browser).

Is this a bug? How do I make it work correctly?

Thanks.
Jose

DatePicker

answered on 12 Jun 2018

1 answer

396 views

Why does the panel width change?

If you use orientation:"left", or orientation:"right", the width of the responsive panel changes as soon as the JavaScript instantiates the object. If you use orientation:"top", the width doesn't change, but when the panel is hidden, it leaves a gutter in its place.

I used your dojo at https://dojo.telerik.com/EbovAMIh to demonstrate this, using the following code.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>

</head>

<body>

<header>

<button class="toggle-button"><span class="k-icon k-i-menu"></span></button>

Logo

</header>

<div style="display:flex;">

<div id="navigation" style="flex-grow:0; background-color:red; width:100px;">

<a href="#" onclick="menu.close();">Home</a>

<br />

<a href="#" onclick="menu.close();">Products</a>

</div>

<div style="flex-grow:1; background-color:blue;">

Content

</div>

<script>

$("#navigation").kendoResponsivePanel({

orientation: "top",

toggleButton: ".toggle-button"

});

var menu = $("#navigation").data("kendoResponsivePanel");

</script>

</body>

</html>

Note that I put background colors in place to see the effect. If you change the value of orientation to top, left, and right, you can see what I'm talking about.

The behavior, as is, makes this unusable to me. I'm looking to using Bootstrap instead, but I was hoping you might be able to show me how to correct this behavior.

Thank you

ResponsivePanel

answered on 12 Jun 2018

7 answers

456 views

Local data storage

Are there any options for local data storage to a database like SQLite? I am looking to build an application that can run offline as well.

Data Source

answered on 12 Jun 2018

1 answer

148 views

MVVM set viewModel property Error

Hello,
I have viewModel and model that has additional property. Following Statements get executed

$.extend(viewModel, kendo.observable(model));

var RData = viewModel.Receipts;

var TstDataSource = new kendo.data.DataSource({

data: RData,

group: [{ field: "Code", dir: "asc" }]

});

viewModel.set("Receipts",TstDataSource);

RefreshServiceElements();

kendo.bind($("#Container"), viewModel);

On viewModel.set("Receipts",TstDataSource); , i get error maximum call stack size exceeded.

Receipts property is bind to Grid in MVVM

When i use viewModel.Receipts=TstDataSource it works, i just wanted to know why it works . And then should i update the Item in Receipts using 'set' or '=' ?
P.S: viewmodel is not global

MVVM

answered on 12 Jun 2018

5 answers

1.2K+ views

Dropdown filtering not working for popup editing but works for in-line grid edit?

Hi,

I have been switching some our grids to popup editing when adding a new grid while keeping to in-line grid editing for existing records. In the following example there are two dropdown lists. The trial site dropdown is filtered based on the country dropdown selection. This currently works fine in the in-line grid editing version: the two drop down editors populate their respective dropdowns initially. When the trial site dropdown is selected it repopulates itself (I assume this is default behavior).

The popup editing behaves differently - there doesn't seem to be any default repopulation on the dropdown on selection.

My work round is to put an change event on the Country drop down editor definition but I am unsure how to refresh the dropdown sites editor from my OnChangeCountry function. Can you help?

regards,

Chris

function localcountryFilteredSiteLabelDropDownEditor(container, options) {

//Used to filter the site based on country selected in column

var trail_countries = [];

//trail_countries.push({ trial_site_id: '0', trial_site_label: 'None' });

for (var idx = 0; idx < localCountryFromTrialId.length; idx++) {

if (localCountryFromTrialId[idx].trial_country_id === options.model.trial_country_id) {

trail_countries.push({ trial_site_id: localCountryFromTrialId[idx]["trial_site_id"], trial_site_label: localCountryFromTrialId[idx].trial_site_label });

}

$('<input name="trial_site_id" data-text-field="trial_site_label" data-value-field="trial_site_id" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

name: "trial_site_id",

autoBind: true,

dataSource: trail_countries,

optionLabel: { trial_site_label: " ", trial_site_id: null }

});

CreateValidationMessage(container, "trial_site_id");

}

function localtrialCountryDropDownEditor(container, options) {

$('<input name="trial_country_id" data-text-field="country_name" data-value-field="trial_country_id" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

optionLabel: "Select country",

dataSource: localCountry,

change: onChangeCountry

});

CreateValidationMessage(container, "countryEditor");

}

function onChangeCountry (container, options) {

// Can i just call the editor function as in the next line of commented out code?

// One problem here is i don't seen to access to "options" reference

localcountryFilteredSiteLabelDropDownEditor(container, options);

// Alternatively can I call a refresh method of my trial site dropdown list but I am unsure how to I get a reference to it

to do this. I think it should be something like this in the following :

//var trial_site_id_object = $("#trial_site_id");

//var dropdownlist = trial_site_id_object.data("kendoDropDownList");

//if (dropdownlist) {

// dropdownlist.refresh();

}

Grid

answered on 12 Jun 2018

1 answer

3.1K+ views

Phone number formatting

What is preferable way of the phone number formatting in Kendo UI MVC grid? So far I've found just one way only which is to use UIHint attribute. DataAnnotations on model class level just ignored ([DisplayFormat(DataFormatString = "{0:###-###-####}", ApplyFormatInEditMode = true)]). Is there any other way like for date formatting?

Grid

answered on 12 Jun 2018

1 answer

905 views

Date Picker and Models

This is going to be a simple one for some one . It does not seem to be passing the value to my Model .

cshtml -

            <div class="demo-section k-content">
                @(Html.Kendo().DatePickerFor(m => m.fromDate)
              .Name("datepicker")
              .Value(DateTime.Today)
              .HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
                )
            </div>

Model

[DisplayName("Date From (inclusive)")]
public DateTime fromDate { get; set; }

Controller

fromDate = {1/1/0001 12:00:00 AM}

DatePicker

answered on 11 Jun 2018

1 answer

108 views

Unexpected behavior

Hello,
I am considering using DateInput, but I found it’s very strange behavior. After completing month, it doesn’t move to day automatically. The only way to move is to use left/right arrows keys. Same for moving after entering day to year section. I think, it is not expected and not convenient for users. Is any configuration option I am missing?

Thank you.

Kendo example: https://demos.telerik.com/kendo-ui/dateinput/index

Jquery example that works: http://jquerytools.github.io/documentation/dateinput/index.html

DateInput

answered on 11 Jun 2018

1 answer

897 views

How to Bind Dynamic Columns that Contain Space Comma and Special Characters in Kendo Grid

Hello Folks,

I have used Parent-Child(Hierarchical) Kendo Grid in one of my project.

Grid contain Columns that are retrieved from database tables. Here retrieved values from the database are dynamic.

Means for 1st parent record there are 3 child columns(Type=A1) and for 2nd parent record there are 4 child(Type=A2) columns and so on.

Here data contain space, comma as well as special characters. Eg

Id | Type | Value

1 | A1 | Standard Reference

2 | A1 | D"

3 | A1 | Family Number

4 | A2 | Material

5 | A2 | Hardness

6 | A2 | Rs in ($)

7| A2 | Dim 7

When data binding occurs to the kendo grid then it is not binding to the kendo grid.And if i removed the space, comma & special characters binding works successfully.

Can you help me how to solve this type of problem?

Thank you.

General Discussions

answered on 11 Jun 2018