Questions on Kendo UI for jQuery Forum

3 answers

210 views

My ComboBoxes are rendering a bit funky when I include the mobile.ios.min.css or mobile.all.min.css references. The right-hand portion of the control containing the arrow and click to activate and background styling seems to be missing until the combobox is opened.

http://digitalboon.net/temp/combobox.jpg

The combobox appears to have a class overridden within the mobile css. Is this normal behavior or are there classes I have to customize to get comboboxes to render correctly in our mobile application.

Thank you for your time,

Bron

ComboBox

answered on 12 Dec 2012

1 answer

95 views

ListView Models vs the model used by the View hosting the ListView

I have an MVC4 view that hosts a ListView. The ViewModel contains the properties required by the ListView as well as properties used by the main view. Problem is the ListView uses an IEnumerable of the ViewModel and my main view doesn't. Seems I can't have both in 1 view (or can I?).

For example
The MVC view that loads in the listview as a partial view binds to the following model:

@model app.WebSiteModels.EditPhotoViewModel

where EditPhotoViewModel is defined as :

public class EditPhotoViewModel
{
public WebsitePhoto WebsitePhoto { get; set; } //WebsitePhoto is used in my main view
public IEnumerable<Photo> PhotoList { get; set; } //the Photo properties are used in my listview
}

The listview binds to an IEnumerable version of EditPhotoViewModel:
@model IEnumerable<app.WebSiteModels.EditPhotoViewModel>

Problem:

@model app.WebSiteModels.EditPhotoViewModel doesn't work with the viewlist
and
@model IEnumerable<app.WebSiteModels.EditPhotoViewModel> doesn't work with my main view

I must be missing something pretty basic here - please assist asap as I have been trying to figure this out for a few days now and this is urgent.

many thanks
Dave

ListView

answered on 12 Dec 2012

10 answers

1.5K+ views

DropDownList disappears when updated

Using a listview with templating.
The template has a DropDownList in it that the user can change by clicking the Save button.
When the form is first displayed, the dropdownlist looks good.
But when the results from the save button are returned, the DropDownList disappears.

<div id="listView"></div>

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

<div class="product-view">

<fieldset><legend>Owner</legend><input id="ddlOwner" value="#= Owner #" /></fieldset>

<a id="Save" class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>

</div>

</script>

$(document).ready(function() {

var dataSource = new kendo.data.DataSource ({

<-- snip -->

change: function() {

template = kendo.template($("#dataSource-template").html());

$("#listview").html(kendo.render(template, this.view()));

$("#ddlOwner").kendoDropDownList({

dataTextField: "Text",

dataValueField: "Value",

dataSource:
[{ Text:"A", Value:"d8368ccc-7974-4353-8462-e414d48164b3" },{ Text:"B",
Value:"4eb5cb10-75ad-46ff-9186-4fb5d1a18c63" },{ Text:"C",
Value:"14467467-587c-4cc1-bc0c-082bd16d11d7" }]

});

<-- snip -->

var listView = $("#listView").kendoListView({

dataSource: workflowSource,

template: kendo.template($("#dataSource-template").html())

}).delegate("#Save", "click", function(e) {

e.preventDefault();

SaveForm(); // this method sends an ajax post to server and gets update

});

Looking at FireBug, the html code for the dropdownlist is: (difference between visible and invisible is the first 'style="display: none;"'). I cannot figure how the display is set to none.

<span tabindex="0" style="display: none;" unselectable="on" class="k-widget k-dropdown k-header"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">C</span><span class="k-select"><span class="k-icon k-arrow-down">select</span></span></span><input value="d8368ccc-7974-4353-8462-e414d48164b3" id="ddlOwner" data-role="dropdownlist" style="display: none;"></span>

DropDownList

answered on 12 Dec 2012

1 answer

163 views

update the content in the iframes

hi,
I have three different view in my splitter like http://demos.kendoui.com/web/splitter/index.html except the bottom two vertical splitters.
My view contains Left-pane,center-pane and right-pane.
I have loaded these three views using iframes like
<iframe src ="../Home/Index" style="width:100%;height:500px"></iframe>       ----->Left-pane
<iframe src ="../Home/About" style="width:100%;height:500px"></iframe>       ----->centre-pane(ListView)
<iframe src ="../Home/Details" style="width:100%;height:500px"></iframe>      ------>Right-pane

In my center-pane view,I have a button called"details",when i click on this button I am able to retrieve the id value of selected list view.now i want to display the details of that particular id in the right-pane view.how can i display these records in right-pane.

Splitter

answered on 12 Dec 2012

1 answer

394 views

Custom toolbar command, how to avoid redirect?

I'm new at this, so bear with me.

I have a Grid with a toolbar that has a Save() command defined. I also want to define an Approve command, which does backend processing in a similar manner as Save but with a different stored procedure.

Save works fine by simply having toolbar.Save() to create the button, and then datasource.Update("UpdateData", "Controller") to define the backend call.

For Approve, I have tried to do toolbar.Custom().Text("Approve").Action("Approve", "Controller"). This calls the backend Approve method just fine. But it also redirects the page to a /Approve page, which I don't want. I want it to function like Save() does with my Ajax() datasource, and not redirect the browser anywhere.

Is this possible?

Grid

answered on 11 Dec 2012

3 answers

195 views

Anchor tag in Tabstrip on Ipad

I created a site that has 3 tabs. In one of the tabs there are some very simple anchor tags. E.g. <a href="www.telerik.com">Telerik Link</a>

The issue is that some people in the company are complaining that the links dont work on their IPads.

Any suggestions?

TabStrip

answered on 11 Dec 2012

1 answer

130 views

ValidationMessageFor won't display in Template Pop-up Window

I can tell it's returning the right message, but it never displays the message. What am I missing?

DateValidator:

using System;

using System.ComponentModel.DataAnnotations;

namespace PosPayAndBankRec.Models.Validators

{

public class Date

{

public enum ValidationType

{

RangeValidation,

Compare

}

public class DateValidationAttribute : ValidationAttribute

{

private ValidationType _validationType;

private DateTime? _fromDate;

private DateTime _toDate;

private string _defaultErrorMessage;

private string _propertyNameToCompare;

public DateValidationAttribute(string message, string compareWith = "")

{

_propertyNameToCompare = compareWith;

_defaultErrorMessage = message;

}

protected override ValidationResult IsValid(object value, ValidationContext validationContext)

{

var baseProperyInfo = validationContext.ObjectType.GetProperty(_propertyNameToCompare);

DateTime startDate;

bool NotValid = false;

if (baseProperyInfo.GetValue(validationContext.ObjectInstance, null) is DateTime)

{

startDate = (DateTime)baseProperyInfo.GetValue(validationContext.ObjectInstance, null);

if (value != null)

{

DateTime thisDate = (DateTime)value;

if (thisDate <= startDate)

{

NotValid = true;

}

else if (value == null)

{

//From date as a value but not the to date

NotValid = false;

}

else

{

//To date not a date and we have a from date

if (value != null)

{

NotValid = true;

}

//return validation result

if (NotValid == false)

{

return null;

}

else if (NotValid == true)

{

string message = string.Format(_defaultErrorMessage, validationContext.DisplayName);//, displayAttr.Name);

return new ValidationResult(message);

}

return null;

}

TreasuryModel:

[Date.DateValidation("Deactivation Date should be greater than the Activation Date.", compareWith: "brActivationDate")]

public Nullable<System.DateTime> brDeactivationDate { get; set; }

TreasuryPopupTemplate:

<td>

@Html.EditorFor(model => model.brActivationDate)

@Html.ValidationMessageFor(model => model.brActivationDate)

</td>

<td>

@Html.EditorFor(model => model.brDeactivationDate)

@Html.ValidationMessageFor(model => model.brDeactivationDate)

</td

Window

answered on 11 Dec 2012

1 answer

711 views

Editable Grid with custom validation rules

Hello,

I'm using Kendo for ASP.NET MVC but I have a grid defined using JavaScript syntax, however, I am struggling with defining a custom validation rule for my model that the grid is bound to.

Updated: After some research I found out my syntax issue with the rule definitions inside a grid, however, now I'm struggling with one of my validation rules. Basically I have 2 IP addresses that can be edited one row at a time. I have 2 custom validation rules defined, one that verifies that the IP is valid and the second one verifies that the two IP's are a valid range. The logic in this sample doesn't do as extensive validation at the moment. All I do is convert the dot notation of the IP's into their Int64 value and make sure that StartIP <= EndIP. The problem I'm facing now is that the second validation rule never works for me and I am unsure how I can even debug it. I assume due to the way the validation rules are evaluated, console.log or writing output to a dummy console div on the page does not work so I can't verify the values that are coming in.

Any help would be greatly appreciated.

var companyId = parseInt(@ViewBag.CompanyID);

var dataSource = new kendo.data.DataSource({

type: 'aspnetmvc-ajax',

transport: {

create: {

url: '@Url.Action("CreateHost", "Security", new { area = "" })',

dataType: 'json'

},

read: {

url: '@Url.Action("GetHosts", "Security", new { area = "" })',

data: {

companyId: companyId

},

dataType: 'json',

type: 'GET'

},

update: {

url: '@Url.Action("UpdateHost", "Security", new { area = "" })',

dataType: 'json'

},

destroy: {

url: '@Url.Action("DeleteHost", "Security", new { area = "" })',

dataType: 'json'

}

},

schema: {

model: {

id: 'HostID',

fields: {

HostID: {

type: 'number',

editable: false

},

StartIP: {

type: 'string',

editable: true,

validation: {

required: {

message: 'Start IP is required'

},

validIP: function (input1) {

input1.attr('data-validIP-msg', 'Invalid IP address');

return ipRegEx.test(input1.val());

},

validIPRange: function (input1) {

if (input1.is('input[id=StartIP]')) {

input1.attr('data-validIPRange-msg', 'Start IP must be smaller than End IP');

var input2 = input1.closest('input[id=EndIP]');

var d1 = input1.val().split('.');

var d2 = input2.val().split('.');

var n1 = ((((((+d1[0]) * 256) + (+d1[1])) * 256) + (+d1[2])) * 256) + (+d1[3]);

var n2 = ((((((+d2[0]) * 256) + (+d2[1])) * 256) + (+d2[2])) * 256) + (+d2[3]);

return n1 >= n2;

}

return true;

}

},

EndIP: {

type: 'string',

editable: true,

validation: {

required: {

message: 'End IP is required'

},

validIP: function (input2) {

input2.attr('data-validIP-msg', 'Invalid IP address');

return ipRegEx.test(input2.val());

},

validIPRange: function

(input2) {

if (input2.is('input[id=EndIP]')) {

input2.attr('data-validIPRange-msg', 'End IP must be greater than Start IP');

var input1 = input2.closest('input[id=StartIP]');

var d1 = input1.val().split('.');

var d2 = input2.val().split('.');

var n1 = ((((((+d1[0]) * 256) + (+d1[1])) * 256) + (+d1[2])) * 256) + (+d1[3]);

var n2 = ((((((+d2[0]) * 256) + (+d2[1])) * 256) + (+d2[2])) * 256) + (+d2[3]);

return n1 >= n2;

}

return true;

}

},

StatusID: {

type: 'number',

editable: false,

defaultValue: 3

},

CreatedOn: {

type: 'date',

editable: false,

defaultValue: new Date()

}

},

data: 'Data',

total: 'Total'

},

batch: false,

pageSize: 30,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

var grid = $('#HostsGrid').kendoGrid({

dataSource: dataSource,

toolbar: ['create'],

columns: [

{ field: 'StatusID', title: 'Status', editable: false, filterable: false, sortable: true, template: '#= formatStatus(StatusID, true, "html") #', width: 97 },

{ field: 'StartIP', title: 'Start IP', editable: true, filterable: false, sortable: false },

{ field: 'EndIP', title: 'End IP', editable: true, filterable: false, sortable: false },

{ field: 'CreatedOn', title: 'Added On', editable: false, filterable: true, sortable: true, format: '{0:MM/dd/yyyy hh:mm tt}', width: 150 },

{ command: ["edit", "destroy"], title: ' ', width: 200 },

],

columnMenu: true,

editable: 'inline',

height: 250,

filterable: true,

pageable: {

// Disable traditional paging, we are using virtual scrolling (which does the paging)

previousNext: false,

numeric: false,

// Show the refresh button in the pager

refresh: true

},

scrollable: {

virtual: true

},

sortable: true

});

Data Source

answered on 11 Dec 2012

1 answer

74 views

how to make on click of the combo box,need a text box with in it

the image i have attached,on click of the combo box,need some text box just like gmail search option

ComboBox

answered on 11 Dec 2012

1 answer

510 views

Pie Charts with Multiple Series

Hi,

I am trying to generate a Pie Chart with Multiple Series, a side by side comparison to be exact, but I am having issues. When having two series on the Pie Chart it puts one pie on top of the other. It is retrieving the data properly, it just isn't that helpful one on top of the other :)

Below is my JavaScript that generates my report.

Note: This will not work independently because kendoDataSource and chartChangesTitle are defined elsewhere, but hopefully this is enough information to help.

Thanks!

$("#chartDetails").kendoChart({

chartArea: {

margin: 0,

height: 550

},

theme: $(document).data("kendoSkin") || "BlueOpal",

dataSource: kendoDataSource,

title: {

text: chartChangesTitle

},

legend: {

visible: false,