Questions on Kendo UI for jQuery Forum

4 answers

563 views

Toggleable button click event not fired

Hi,

the click event is not fired if the button is togleable:

<body>

<div id="example">

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

<div id="toolbar"></div>

</div>

<script>

$(document).ready(function() {

$("#toolbar").kendoToolBar({

items: [

{ type: "button", text: "Button",click: onclick },

{ type: "button", text: "Toggle Button", togglable: true, click: onclick },

]});

});

function onclick(e) {

alert(e.target.context.innerText);

}

</script>

</div>

</body>

Dojo

Is there an other event to catch the state changed?

Peter

Button

answered on 10 Sep 2016

2 answers

409 views

ViewModel, Button and the enabled binding

I'm having an issue with the enabled binding of a button. It's bound to function on a view model (kendo.observable) that returns a Boolean value based on the values of properties on the same view model. The binding runs once, when bound, but never again after the properties of the view model have changed. Is there any way that I can get this binding to 'refresh' on property change? Code below:

var viewModel = kendo.observable({

userName: null,

password: null,

isEnabled: function () {

var self = this;

return self.userName != undefined && self.password != undefined;

}

});

And the HTML:

<button class="k-button k-primary" data-bind="click: onClicked, enabled: isEnabled">Click</button>

Button

answered on 10 Aug 2016

9 answers

625 views

How do I generate unique button names within a display template?

I have the following code in a Practice Display Template:

@(Html.Kendo().Button()

.Name("StartPracticeLinkButton")

.Tag("a")

.HtmlAttributes(new { href = Url.Action("Practice", "Practices", routeValues: new { id = Model.ID }) })

.Content("Start Now")

)

I am typically going to have more than one practice displayed on the "page" as this is a display template. The issue I am having is that the .Name("StartPracticeLinkButton") is not unique. Therefore, only the first button gets converted into the Kendo Button while the rest of the buttons are ignored and left as simple links.

Looking through the Kendo UI documation, I can't seem to find the correct method to call in order to make the name unique. Surely Kendo UI has a built-in way to handle this?

Button

answered on 05 Aug 2016

2 answers

998 views

FontAwesome in Button

I have a button that I want to have a FontAwesome icon before the text of Change:

<button class="k-button" type="button" id="setFile">Change</button>

Right now (in Chrome, on the Desktop) I find that I can do this:

$("#setFile").kendoButton({

icon: "search"

});

And get one of the built in icons. But am already use the FA icons in other parts of the page, so they are loading properly. But I don't get your documetation on adding the FA icons. I tried this, but it was a blank icon: (Maybe it is there, but I have a MetroBlack theme and perhaps it is black?)

$("#setFile").kendoButton({

spriteCssClass: "fa-car" /* also tried "fa fa-car" */

});

Button

answered on 26 Nov 2015

2 answers

856 views

Add space between spriteCssClass icon and text in button

Hi kendo team,

In kendo button (or other widgets like toolbar that uses button), there are 3 ways of defining the button icon - imageUrl, icon, and spriteCssClass. I'm using spriteCssClass property of kendo button to define my customized icon. When I define a kendo button with spriteCssClass and text, the text is squashed against my spriteCssClass defined icon. Also, I want it so that when there is no text, my button doesn't have a odd extra whitespace on the right. (See example: http://dojo.telerik.com/Ezuga)

{

text: "button text"

spriteCssIcon: "my-custom-icon-css"

}

When use icon property to define a button icon, there is a fine whitespace between the icon and text. How can I achieve this with spriteCssClass? Or better yet, can you help to fix it so the spriteCssClass will act just like the icon added through the icon property?

Button

answered on 02 Nov 2015

5 answers

2.0K+ views

Change background colour on click event

Hi there,

Please can you advise how I can change the background colour of a standard button (with class "k-button") for the click event. Currently it goes orange when you click it, but I need it to go blue to keep in line with my site colour themeing. This is my markup :-

This button is inside a Kendo window control toolbar, but I am sure I'll need it generally across the site.

Thanks, Mark

Button

answered on 17 Aug 2015

2 answers

469 views

Button Styles - Material Theme

Does the material theme support flat buttons? If so how to I specify the style?

Button

answered on 11 Jun 2015

1 answer

375 views

Checkbox / Radio Buttons

I see that I can use the Kendo ButtonGroup to have a group of buttons act as radio buttons. I also need to have a button group act like checkboxes, like the bootstrap checkbox / radio buttons.

Does Kendo have a way for me to do checkbox buttons as a group of buttons?

Thanks,

--Ed

Button

answered on 11 Jun 2015

2 answers

215 views

Checkbox tick outside of the box

Hi

Would you have an idea why the tick is outside the box.

I use <p>..

See it here: http://prntscr.com/7dxgui

The checkbox is for JOINT_APPLICANT

The view is:

@using PartnerLink.Models

@using Telerik.OpenAccess.SPI

@model TBL_ASSIGNMENT

@section Head

{

<link href="@Url.Content("~/Content/css/AddCase.min.css")" re rel="stylesheet" type="text/css" />

<link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/jquery.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/jszip.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/kendo.all.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/kendo.aspnetmvc.min.js"></script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

<script src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js" type="text/javascript"></script>

}

@{

Layout = "~/Views/Shared/_EmptyLayout.cshtml";

ViewBag.Title = "Add case";

EntitiesModel entities = new EntitiesModel();

var currentUser = entities.TBL_USERs.FirstOrDefault(u => u.USER_ID == Model.USER_CREATED);

var usersSource = entities.TBL_USERs

.Where(u => u.LEAD_PROVIDER_ID == currentUser.LEAD_PROVIDER_ID)

.Select(u => new UserDropBoxItem

{

UserId = u.USER_ID,

FullName = u.FIRST_NAME + " " + u.SURNAME

})

.ToList();

//usersSource.Add(new UserDropBoxItem() { UserId = "", FullName = "" });

usersSource = usersSource.OrderBy(u => u.UserId).ToList();

var salutations = entities.TBL_SALUTATIONs

.Where(s => !s.OUT_OF_USE)

.Select(s => new SalutationDropboxItem

{

Id = s.SALUTATION_ID,

Salutation = s.SALUTATION

})

.ToList();

salutations.Add(new SalutationDropboxItem() { Id = 0, Salutation = "" });

salutations = salutations.OrderBy(s => s.Id).ToList();

var country = entities.TBL_COUNTRies.Where(w => !w.OUT_OF_USE)

.Select(s => new { ID =s.COUNTRY_ID,

Name=s.COUNTRY}

);

var sourceCodes = entities.TBL_SOURCE_CODEs.Where(w=>!w.OUT_OF_USE)

.Select(s => new TBL_SOURCE_CODE

{

SOURCE_CODE_ID = s.SOURCE_CODE_ID,

SOURCE_CODE = s.SOURCE_CODE

})

.ToList();

}

<div class="all-content-wrapper">

<div class="top-bar">

<div class="title-container">

<h1>Add case</h1>

</div>

<img class="logo" src="@Url.Content("~/Content/Images/logo_300x50.png")" alt=" autodraft" />

</div>

<form action="/CreateCase" method="POST" accept-encoding="UTF" id="AddCaseForm">

<div class="main-content" style="height: 520px; width: 1000px;">

<div class="content-column">

<dl class="listcontent">

<dt><br /><label for="CALL_AGENT_ID">Call Agent <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CALL_AGENT_ID).Name("CALL_AGENT_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Call Agent" })</

dd>

<dt><br /><label for="CALL_AGENT_MANAGER_ID">Call Agent Manager <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CALL_AGENT_MANAGER_ID).Name("CALL_AGENT_MANAGER_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Call Agent Manager" })</

dd>

<dt><br /><label for="CUSTOMER_ADVISOR_ID">Customer Advisor <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CUSTOMER_ADVISOR_ID).Name("CUSTOMER_ADVISOR_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Customer Advisor" })</

dd>

<dt><br /><label for="CUSTOMER_ADVISOR_MANAGER_ID">Customer Advisor Manager <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CUSTOMER_ADVISOR_MANAGER_ID).Name("CUSTOMER_ADVISOR_MANAGER_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Customer Advisor Manager" })</

dd>

<dt><br />@Html.LabelFor(m => m.SOURCE_CODE_ID, "Source Code")</dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.SOURCE_CODE_ID).Name("SOURCE_CODE_ID").BindTo(sourceCodes).DataValueField("SOURCE_CODE_ID").DataTextField("SOURCE_CODE").OptionLabel(" ")</

dd>

<dt></dt>

<dd

>@Html.Kendo().CheckBoxFor(m => m.JOINT_APPLICANT).Name("JOINT_APPLICANT").Label("Joint Applicant").HtmlAttributes(new { style = " left: -5000px" })

@Html.Kendo().CheckBoxFor(m => m.PARTNER_UNAWARE).Name("PARTNER_UNAWARE").Label("Partner Unaware").HtmlAttributes(new { style = " left: -5000px" })

</dd>

</dl>

</div>

<div class="content-column">

<dl class="listcontent">

<dt><br /><label for="FIRST_NAME">First Name <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().TextBoxFor(m => m.FIRST_NAME).Name("FIRST_NAME").HtmlAttributes(new { required = "true", validationMessage = "Enter First Name" })</

dd>

<dt><br /><label for="SURNAME">Last Name <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().TextBoxFor(m => m.SURNAME).Name("SURNAME").HtmlAttributes(new { required = "true", validationMessage = "Enter Last Name" })</

dd>

<dt><br />@Html.LabelFor(m => m.MAIDEN_NAME, "Maiden Name")</dt>

<dd>@Html.Kendo().TextBoxFor(m => m.MAIDEN_NAME).Name("MAIDEN_NAME")</dd>

<dt><br />@Html.LabelFor(m => m.SALUTATION_ID, "Salutation")</dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.SALUTATION_ID).Name("SALUTATION_ID").BindTo(salutations).DataValueField("Id").DataTextField("Salutation")</

dd>

<dt><br /><label for="ADDRESS_COUNTRY">Country <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.ADDRESS_COUNTRY_ID).Name("ADDRESS_COUNTRY_ID").BindTo(country).DataValueField("ID").DataTextField("Name").OptionLabel(" ").HtmlAttributes(new { onchange = "countryChange(this.value);", required = "true", validationMessage = "Select Country" })</

dd>

<dt><br />@Html.LabelFor(m => m.GENDER, "Gender")</dt>

<dd>

@Html.Kendo().RadioButtonFor(m => m.GENDER).Name("GENDER").Label("M").Value('M').HtmlAttributes(new { style = " left: -5000px" })

@Html.Kendo().RadioButtonFor(m => m.GENDER).Name("GENDER").Label("F").Value('F').HtmlAttributes(new { style = " left: -5000px" })

</dd>

</dl>

</div>

<div class="bottom-bar">

<p class="close" style="margin-top: 0px; margin-top: 20px; position: fixed;">CLOSE</p>

<input class="save-and-close" style="margin-top: 20px;" type="submit" value="ADD CASE" onclick="submitClicked()" />

<input type="submit" class="creatingMessage" value="Creating Case..." disabled />

</div>

<a></a>

</form>

</div>

<script>

$(window).ready(function () {

$("p.close").click(function () {

location.pathname = "/";

});

function submitClicked() {

var validator = $("#AddCaseForm").kendoValidator().data("kendoValidator");

var isvalid = validator.validate();

if (isvalid) {

$('.save-and-close').hide();

$('.creatingMessage').show();

$('.close').hide();

}

function countryChange(selcountry) {

var enabled = true;

if (selcountry == 2) {

enabled = false;

$("#JOINT_APPLICANT").attr('checked', false);

$("#JOINT_APPLICANT").attr('disabled', true);

}

else {

$("#JOINT_APPLICANT").removeAttr('disabled');

enabled = $("#JOINT_APPLICANT").is(":checked");

}

</script>

Button

answered on 10 Jun 2015

1 answer

29 views

ButtonGroup - NOT mobile

I would like to use the ButtonGroup, but I am not using the mobile framework, nor do I want to include the mobile framework. Is this possible?

Thanks,

--Ed

Button

answered on 09 Jun 2015

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools