Questions on Kendo UI for jQuery Forum

10 answers

4.3K+ 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

373 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

439 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

136 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.1K+ 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.0K+ 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

885 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

93 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

886 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

3 answers

416 views

Get/update data from selected TreeView node

Hi,

I have a treeview which gets data from an odata service (Sharepoint REST endpoint) using kendo.data.HierarchicalDataSource.

I am trying to get the following to work.

When I click on a TreeView node I want to display the complete corresponding node data in a ListView with the ability to edit and update the data like in the ListView demo for editing. Any suggestions?

TreeView

answered on 11 Jun 2018