Questions on Kendo UI for jQuery Forum

3 answers

174 views

How to check the user authencation is success and redirect to a page in kendo mobile

Hi,

I am working with a login page, in that form i am having two fields(username, password). When i submit the page, it will validate the form and post the data to a url and api returns a message if the credential are correct. Now i want to get the success value to check whether its success/error. If success i am navigate to dashboard page. Please find my index.html, loginViewModel.js files. Kindly approach me how to get the response value from server and navigate to other page one its success.

index.html

<!DOCTYPE html><br><html><br><head><br><meta charset="ISO-8859-1"><br><title>Login</title><br> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /><br></head><br><body><br> <div data-role="view" data-title="Settings" id="loginForm"><br> <header data-role="header"><br> <div data-role="navbar"><br> <span data-role="view-title"></span><br> </div><br> </header><br> Server: <input id="serverid" name="authserver" type="url" data-bind="value: authserver" required data-required-msg="Enter server address" data-url-msg="Enter a valid url for server"><br> <span class="k-invalid-msg" data-for="authserver"></span><br/><br> UserName: <input id="emailid" name="username" type="email" data-bind="value: username" required data-required-msg="You need to enter email" data-email-msg="Enter a valid email id"><br> <span class="k-invalid-msg" data-for="username"></span><br/><br> Password: <input id="pwd" name="password" type="password" data-bind="value: password" required validationMessage="Enter Password with minimum 6 characters"><br> <span class="k-invalid-msg" data-for="password"></span><br/><br> <button data-bind="click: getUserDetails">Login</button><br> </div><br> <script src="scripts/jquery.min.js"></script><br> <script src="scripts/kendo.all.min.js"></script><br> <script src="scripts/viewModel/loginModel.js"></script><br> <script src="scripts/viewModel/loginViewModel.js"></script><br> <script><br> /** Initial the kendo mobile application */<br> var app = new kendo.mobile.Application(document.body);<br> </script><br></body><br></html>

Below is the viewModel file loginViewModel.js

var validator = $("#loginForm").kendoValidator().data("kendoValidator");<br><br>var loginViewModel = kendo.observable({<br> authserver: "",<br> username:"",<br> password:"",<br> getUserDetails: function(){<br> if(validator.validate()){<br

>       //  alert("Server Address -- "+ this.get("authserver")+" User Name -- "+ this.get("username")+" User Password -- "+ this.get("password"));<

br> <br> var dataSource = new kendo.data.DataSource({<br> transport:{<br> read:{<br> url: "http://127.0.0.1/api/index.php",<br> type: "POST",<br> dataType: "html",<br> <br> }<br> },<br> change: function(data){<br> alert("aaa"+dataSource.data);<br> alert(data);<br> },<br> error: function(xhr, error){<br> console.log(xhr);<br> console.log(error);<br> }<br> });<br> }else{<br> alert("Not valid");<br> }<br> <br> },<br> <br>}) ;

kendo.bind($("#loginForm"), loginViewModel);

General Discussions

answered on 14 Oct 2013

1 answer

262 views

Drawers Nested Listview

Hi! i creating a nested list view as much as possible it must be accordion like this:
http://jquerymobile.com/wp-content/uploads/2012/07/jquery-mobile-collapsible-lists.png

But i cant find any examples near to that so i aim to do this
http://demos.telerik.com/teampulse-demo/view#IterationsStatus

with this code:

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

<header data-role="footer">

<div data-role="navbar">

<span data-role="view-title">Home</span>

<a data-align="right" data-icon="icon-three-dot" data-role="button" href=""></a>

<a data-align="left" data-icon="icon-three-bar" data-role="button" href="#sideMenuView" data-rel="drawer"></a>

</div>

</header>

</section>

<div data-role="drawer" id="sideMenuView" data-show="rebindListView" data-transition="slide">

<div data-role="footer">

<div id="sideMenuNavbar" data-role="navbar" class="bg-white">

<span data-role="view-title" >

<img src="./styles/images/SlideNav.png">

</span>

<a data-role="backbutton" id="btnDrawerBack" data-align="left">Back</a>

</div>

<div class="container">

<ul id="sideMenuListView"

class="sideMenuListView"

data-role="listview"

data-template="sideMenuDrawer-template"

data-style="inset">

</ul>

</div>

<script id="sideMenuDrawer-template" type="text/x-kendo-template">

<div class="#: style #">

# if (data.style == 'settings') { #

<a data-align="left" data-icon="icon-gears" data-role="button" class="btn-icon" data-click="rebindListView"></a>

# } else { #

<a data-align="left" data-icon="icon-angle-right" data-role="button" class="btn-icon" data-click="rebindListView"></a>

# } #

<div data-role="button" class="text btn-text" data-click="#: view #">#: name #</div>

</div>

</script>

<script>

var category = new kendo.data.DataSource({

data: [

{id: 1, name: "Dogs", view:"dogView", style:""},

{id: 2, name: "Cats", view:"catModalView", style:""},

{id: 3, name: "Birds", view:"birdView", style:""},

{id: 4, name: "Snakes", view:"snakeView", style:""},

{id: 5, name: "Cows", view:"cowView", style:""}

]

}),

type = new kendo.data.DataSource({

data: [

{id: 1, category: 2, name: "Persian"},

{id: 2, category: 2, name: "Arabian"},

{id: 3, category: 2, name: "Local"},

{id: 4, category: 1, name: "Husky"},

{id: 5, category: 1, name: "Retriever"}

]

})

</script>

<script>

function rebindListView(e) {

var params = e.view.params,

element = e.view.element,

backButton = element.find('#btnDrawerBack'),

listView = element.find("#sideMenuListView").data('kendoMobileListView');

if (params) {

var parentID = e.view.params.parent;

sideItem = type.filter({field: "category", operator: "eq", value: parentID});

if (sideItem) {

backButton.show();

listView.setDataSource(sideItem);

} else {

// redirect to root

setTimeout(function() {

kendo.mobile.application.navigate('#homeView');

}, 0);

}

} else {

backButton.hide();

listView.setDataSource(category);

}

e.view.scroller.scrollTo(0, 0);

}

</script>

When i click the button for more options (the one that call rebindListView)
i always got this error: Uncaught TypeError: Cannot read property 'params' of undefined index.html:206

Drawer (Mobile)

answered on 14 Oct 2013

3 answers

343 views

MVVM Binding, Kendo UI Mobile and Dropdownlist

Hi There,

I'm trying to get a dropdown list used with Kendo UI mobile and data bind the source of the dropdown list to some set data.

It seems to work when a plain select is used but when i change the data-role to dropdown list the list is always empty.

I have include a sample of the problem i am experiencing.

http://jsbin.com/ADOTuG/1/

Is there something I am doing wrong here or should do differently?

Thanks,

Rob

MVVM

answered on 14 Oct 2013

1 answer

210 views

show / hide columns menu placed in one place

I'm building a table with large number of columns which I want to be able to show and hide from user menu.
As the example I can use this

http://demos.kendoui.com/web/grid/column-menu.html

My problem is that show/hide menu is the same for all columns, but it is buried deep inside column menu of each individual column.
I want to have that menu only in one place, possibly in table toolbar or exposed in footer so the user does not need to click through the complex dropdowns.

Grid

answered on 14 Oct 2013

1 answer

53 views

Upgrading to iOS7: Tabstrip displays random icons! Help

Hello team

After replacing the .css and the .js files with the latest KendoUI Mobile - and installing on my iOS7 device, the tabstrip icons, and data-icons for various menus within my application have mucked up. Instead of the data-icon "home" , the data-icon "search" pictures, I get random pictures, like a love heart, a spade, a number 3 in a box, an angel.. etc... is there something I have missed? Do I have to explicitly define images now?

Thankyou.

Regards

TabStrip (Mobile)

answered on 14 Oct 2013

8 answers

668 views

"Add New" option

We're using this control for tags and we want to let them select an existing tag or add a new tag.

What's the recommended approach for adding an option to the list such as "Add New" that uses the currently entered text to create a new item?

Nick

MultiSelect

answered on 13 Oct 2013

5 answers

1.6K+ views

MVC Grid Image Button

I have custom buttons inside my Kendo Grid, but would like the buttons to show an image and not text, how can I do this? I have searched the forum but can't find a solution.

Thanks!

Grid

answered on 12 Oct 2013

2 answers

472 views

Checkbox events not firing the second time.

Hi,

I have a TreeView for a filter on a dashboard, and it's not processing the click on the checkbox the second time. I've attached a screen shot with more details.

I'm not sure what I have wrong.
Creating the TreeView:

/* Topics illustrated in this file:

* How to define a custom widget

* How to configure options from base

* How to define and access custom options

* How to capture scope

* How to manipulate the DOM of "this"

* How to expose custom methods

* How to expose an event handler delegate

*/

define([

'jquery',

'underscore',

'utils/helpers',

'text!views/schoolFilterItem.html',

'kendoui/kendo.treeview.min',

], function ($, _, Helpers, schoolFilterItemTemplate) {

var schoolData;

// This defines a Kendo widget object

var TreeView = kendo.ui.TreeView.extend({

init: function (element, options) {

// Assigning this to another variable name captures the context of init, which is "this TreeView"

var me = this;

options.dataSource = {

transport: {

read: function (options) {

$.getJSON(Helpers.toServicesUrl("/GetfltSchoolByDistrict"),

{

// If you tried to use "this" in here, it would refer to the dataSource instead of the TreeView

userName: me.options.userName,

districtId: me.options.districtId,

schoolCodes: me.options.schoolCodes

},

function (data) {

options.success([]);

schoolData = data.GetfltSchoolByDistrictResult.RootResults;

schoolData = [

{

text: "Schools",

expanded: false,

items: _(schoolData)

.chain()

.groupBy("SchoolTypeName")

.map(function (groupItems, groupKey) {

return {

SchoolTypeName: groupKey,

items: groupItems,

expanded: false

}

})

.value()

}

];

me.dataSource.data(schoolData);

});

}

},

schema: {

model: {

children: "items"

}

};

options.dataBound = function (e) {

me.element.find("input:checkbox:first").prop("disabled", true);

me.element.find("input:checkbox").on("change", function (e) {

var parentItems = $(e.target).parents(".k-item");

var node = parentItems.eq(0);

var parentNode = parentItems.eq(1);

// Toggle children to match parent

node.find("input:checkbox").prop("checked", e.target.checked);

// Update parent's state

var parentCheckBox = parentNode.find("input:checkbox:first");

if (!parentCheckBox.prop("disabled")) {

var hasChecked = parentNode.find(".k-group input:checked").length > 0;

var hasUnchecked = parentNode.find(".k-group input:not(:checked)").length > 0;

parentCheckBox.prop("checked", hasChecked);

parentCheckBox.prop("indeterminate", hasChecked && hasUnchecked);

}

// The rest is unchecking other SchoolTypes if a different SchoolType is checked. If "this" is unchecked, no further action required.

if (!e.target.checked)

return;

var dataItem = me.dataItem(node);

if (!dataItem.SchoolTypeName) {

e.target.checked = false;

return;

}

me.element.find("input:checked").each(function () {

var eachDataItem = me.dataItem($(this).closest(".k-item"))

if (eachDataItem.SchoolTypeName !== dataItem.SchoolTypeName) {

this.checked = false;

this.indeterminate = false;

//lah testing adding something here.

// me.schoolTypeChanged(e);

me.onSchoolChange(e);

}

//gmo when school names don't match

if (eachDataItem.SchoolName !== dataItem.SchoolName) {

this.checked = false;

me.onSchoolChange(e);

}

});

}

kendo.ui.TreeView.fn.init.call(this, element, options);

},

options: {

// This is what determines the name of the custom method, e.g. .kendoSchoolFilterTreeView

name: "TreeViewSchoolFilterSingle",

// Declare new options with default values. Options must be declared here in order to be accepted and passed through to init().

userName: "",

districtId: 0,

schoolCodes: function () { return "" },

// Anything else you pass in options will get passed to the base widget

dataTextField: ["text", "SchoolTypeName", "SchoolName"],

checkboxes: true

},

getSelectedSchoolType: function () {

var me = this;

return _(this.element.find("input:checked").closest(".k-item"))

.chain()

//                                              .map(function (item) { return ktvSchoolFilter.dataItem(item).SchoolType; })

.map(function (item) { return me.dataItem(item).SchoolType; })

.filter(function (item) { return item; })

.value()[0];

},

// This is how to get the selected school from the radio group

getSelectedSchoolCodes: function () {

var me = this;

return _(this.element.find("input:checked").closest(".k-item"))

.chain()

//                                              .map(function (item) { return ktvSchoolFilter.dataItem(item).SchoolCode; })

.map(function (item) { return me.dataItem(item).SchoolCode; })

.filter(function (item) { return item; })

.value()

.join(",");

},

onSchoolChange: function (e) {

return;

},

schoolTypeChanged: function (e) {

return;

}

});

// This is what registers the custom widget and adds the kendo* method to the jQuery object

kendo.ui.plugin(TreeView);

});

How it's used in my program, including several variations on binding.

ktvSchoolFilter = $("#schoolFilterTree").kendoTreeViewSchoolFilterSingle({

userName: WSIPCContext.UserName,

districtId: WSIPCContext.DistrictId,

schoolCodes: WSIPCContext.SchoolCodes,

onSchoolChange: schoolCodeChanged,

change: schoolCodeChanged,

schoolTypeChanged: schoolCodeChanged,

checkbox: {

onClick: schoolCodeChanged

}

}).data("kendoTreeViewSchoolFilterSingle");

//This code allows the grade level and risk categories to change when a checkbox

//is selected, not just the label.

ktvSchoolFilter.dataSource.bind("change", schoolCodeChanged);

ktvSchoolFilter.dataSource.bind("select", schoolCodeChanged);

ktvSchoolFilter.dataSource.bind("selecting", schoolCodeChanged);

ktvSchoolFilter.dataSource.bind("navigate", schoolCodeChanged);

ktvSchoolFilter.bind("change", schoolCodeChanged);

ktvSchoolFilter.bind("select", schoolCodeChanged);

ktvSchoolFilter.bind("selecting", schoolCodeChanged);

ktvSchoolFilter.bind("navigate", schoolCodeChanged

TreeView

answered on 11 Oct 2013

3 answers

171 views

Kendo UI Grid JQuery Error using IE7

A jquery(1.9.1) error '0x80020003 - JavaScript runtime error: Member not found.' is occurring when testing Kendo 2013.1.319 grid with Internet Explorer 7.  Below is the error along with code that is erroring out.

JQuery Code:
set:function(e,n,r){
          var i=e.getAttributeNode(r);
          return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}}
where:
e.innerhtml = <A tabIndex=-1 class=k-header-column-menu href="http://localhost:50002/Report.html#" jQuery19103527182669029985="43" tabindex="-1"><SPAN class="k-icon k-i-arrowhead-s"></SPAN></A><A class=k-link href="Date/Timehttp://localhost:50002/email2LeadReport.html#">Date/Time</A>
n = ""
r = "aria-sort"

Grid

answered on 11 Oct 2013

2 answers

75 views

Set cancel option on a grid that has already been initialized

Is there a way to set the cancel option on a grid that has already been initialized?

I'm using the serverside MVC wrapper and have this:
.Events(events => events.Cancel("function() {alert('hi');}"))

Clientside I tried:
$("#grdTest").kendoGrid({ cancel: function () { alert("canceled"); } });
and
$kendoGrid = $("#grdTest").data("kendoGrid");
$kendoGrid.options.cancel = function () {
alert('Canceled');
};

Grid

answered on 11 Oct 2013