Questions on Kendo UI for jQuery Forum

1 answer

345 views

Hello

I'm pretty new to KendoUI Mobile. I would like to create a hybrid mobile app. So far I'm doing good just struggle with something simple:

I would like to show initially a login/register screen (view login) without any pre-defined Tabstrip. After successful login the app should switch to show a Tabstrip connected with 3 other views (start, map, settings).

What is the "official" way to not show the Tabstrip on login view or how to I tell the Tabstrip to be only present on not visible login view?

Below a fully working example of how far I came. Setting the "initial" value to "login" would show the login view WITH the (unwanted) Tabstrip.

view login: represents the view that should NOT show the Tabstrip
-> after successful login switch to show Tabstrip with initiall shown view "start"

<!DOCTYPE html>

<html>

<head>

<title>My App</title>

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

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

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

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

</head>

<script>

$(document).ready(function() {

// var app = new kendo.mobile.Application();

var app = new kendo.mobile.Application($(document.body), {

skin: 'flat',

transition:'slide',

initial: "start" // Set to "login" will show the Tabstrip as well

});

</script>

<body>

<div id="login" data-role="view" data-layout="default">Register here</div>

<div id="start" data-role="view" data-layout="default">

<span>hello start!</span>

</div>

<div id="map" data-role="view" data-layout="default">Hello map!</div>

<div id="settings" data-role="view" data-layout="default">Hello settings!</div>

// Tabstrip should now be visible on view "login"

<section data-role="layout" data-id="default">

<header data-role="header">

<div data-role="navbar">My App</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#start">Start</a>

<a data-icon="globe" href="#map">Map</a>

<a data-icon="settings" href="#settings">Settings</a>

</div>

</footer>

</section>

</body>

</html>

Probably a simple question and I just need to know the official way how to solve this.

Regards

Application

answered on 12 Jun 2018

2 answers

1.0K+ views

[Solved] command.Edit() in UI MVC Grid

Hello,

I have to remove the "command.Edit()" from a Grid in GridEditMode.InLine. So one only button "Delete" is displayed. Grid works fine but in the Edit mode (after clicking on "Add New Record" button) the "Update" and "Cancel" buttons will not be displayed so I cannot save a new record. What is possible solution?

Thanks.

Grid

answered on 12 Jun 2018

3 answers

676 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.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

378 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

442 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

139 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

893 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