Questions on Kendo UI for jQuery Forum

2 answers

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

866 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

472 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

380 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

217 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

30 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

1 answer

285 views

How to set data-bind in ASP MVC CSHTML way?

Hi all,

How to represent the following in ASP MVC cshtml way - Html.Kendo().Button :

<button data-bind="click: enableInput, enabled: isNameEnabled">Enable</button>

Assuming kendo.observable has been implemented.

Thanks,

Tiago

Button

answered on 26 May 2015

3 answers

85 views

Button Group without toolbar

Is it possible to great a button group without a toolbar? Styles?

Button

answered on 02 Apr 2015

3 answers

792 views

Radio Button Group with MVC Controller

Can anyone give me an example of how to create a kendoui radio button group and get the button labels and button values from an MVC Ajax controller data source?

The radio buttons need to be bound to an MVC model, so the RadioButtonFor(expression) format would be the most useful.

Button