Questions on Kendo UI for jQuery Forum

1 answer

166 views

Make grid sortable and filterable which has custom fields

I have grid which editable in cell
I have some custom fields which has combobox when i edit that perticular field.
When i sort grid on this feild it does not get sorted.
Similar for filter, when I use filter on these custom fields, It gives me errors.
How can I make grid sortable and filterable that has custom fields as column?

Grid

answered on 11 Jun 2013

1 answer

162 views

Hide the Vertical Scroll BAR but allowing Scrolling

Hi:

I'm looking for a way to hide (don't display) the vertical scrollbar from the right side but still be able to scroll. How can I accomplish that? Is that something that can be managed with CSS or with JavaScript?

ListView (Mobile)

answered on 11 Jun 2013

2 answers

79 views

Empty item not displaying

Hello.
I'm doing a dropdownlist with the MVC helper like this, but the option with empty text is not showing, a red line is showing instead.

How can I show the empty option so that users can select, yes, no, or empty ( show all ) without having to set a text or value for that option?

@(Html.Kendo().DropDownList()

.Name("isPublic")

.Items(items =>

{

items.Add().Text("").Value("");

items.Add().Text("Yes").Value("true");

items.Add().Text("No").Value("false");

}

)

Thanks in advance.

DropDownList

answered on 11 Jun 2013

10 answers

1.0K+ views

Stacked Column Chart - Bars Exceed Max Axis

Hey All,

I have been working with the column charts, and finally figured out how to stack the bars in the chart with the help of this article.
http://www.kendoui.com/forums/dataviz/chart/stack-multiple-series.aspx

There's a problem though. The largest value bars are going 'over the top' of the chart (they are exceeding the max y-axis value).
The funny thing is that it seems like the value has to be an ODD number to get it to go over the top axis.

Below is all the code to replicate. Attached is a screenshot of what I am seeing.

Is this a bug? Am I doing something wrong?

This happens with both default and black Kendo Skins.
Tested on Chrome 18.0.1025.162, Firefox 8.0.1, and IE9.
I am using Kendo UI Complete v2012.1.322

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/file/Kendo/kendo.common.min.css"/>
<link rel="stylesheet" href="/file/Kendo/kendo.black.min.css"/>
</head>
<body>
<script type="text/javascript" src="/file/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/file/Kendo/kendo.all.min.js"></script>
<script type="text/javascript">
var data = [{"Period":"1-3","Comp1":1,"Comp2":2,"Comp3":4,"Comp4":0},{"Period":"3-5","Comp1":2,"Comp2":5,"Comp3":0,"Comp4":2},{"Period":"5-7","Comp1":3,"Comp2":1,"Comp3":4,"Comp4":2},{"Period":"7-9","Comp1":2,"Comp2":3,"Comp3":5,"Comp4":1},{"Period":"9+","Comp1":3,"Comp2":1,"Comp3":2,"Comp4":2}];

function createCharts () {
$("#chartIVPayers").kendoChart({
theme: $(document).data("kendoSkin") || "black",
title: {
text: "Comps"
},
dataSource: data,
series: [{
type: "column",
field: "Comp1",
name: "Comp1",
stack: "Comp2,Comp3,Comp4"
},{
type: "column",
field: "Comp2",
name: "Comp2"
},{
type: "column",
field: "Comp3",
name: "Comp3"
},{
type: "column",
field: "Comp4",
name: "Comp4"
}],
categoryAxis: {
field: "Period"
}
});
}

setTimeout(function() {
createCharts();
},
400);

</script>
<div id="chartIVPayers"></div>
</body>
</html>

Charts

answered on 11 Jun 2013

3 answers

186 views

Kendo Combobox not clearing underlying model data MVC 4

I am using Kendo()comboBox(). I cannot get the change event of CustomerId comboBox to clear StateAbbreviation comboBox

<div class="SectionBoxGradient" style="padding: 10px">

@using (@Html.BeginForm("AddCustomer", "TotalvCRM", FormMethod.Post, new{id="CustomerForm"}))

{

<table>

<tr>

<td class="FieldLabel"><input type="hidden" id="CustomerName" name="CustomerName"/>@Html.LabelFor(model => model.CustomerName):</td>

<td>@(Html.Kendo().ComboBox().Name("CustomerId").DataTextField("Text").DataValueField("Value").BindTo(Model.Customers).Placeholder("-- Select a Customer --")) </td>

<td class="FieldLabel">@Html.LabelFor(model => model.CustomerId):</td>

<td class="FieldLabel" style="text-align: left;"><input type="text" id="lblCustomerId" value="@Model.CustomerId" style="background: #569bbe; border:none;" disabled="disabled"/></td>

<td class="FieldLabel"><label id="labelCreateDate" title="CreateDate"></label></td>

</tr>

<tr>

<td class="FieldLabel">@Html.LabelFor(model => model.Address1)</td>

<td>@Html.TextBoxFor(model => model.Address1,new{tabindex="2"})

@Html.ValidationMessageFor(model => model.Address1)</td>

<td class="FieldLabel">@Html.LabelFor(model => model.BusinessPhoneNumber)</td>

<td>@Html.TextBoxFor(model => model.BusinessPhoneNumber,new{tabindex="7"})</td>

<td class="FieldLabel" style="text-align: left;"><label id="labelAssignedReps" title="Assigned Representitive" >Assigned Representatives:</label></td>

</tr>

<tr>

<td class="FieldLabel">@Html.LabelFor(model => model.Address2)</td>

<td>@Html.TextBoxFor(model => model.Address2,new{tabindex="3"})</td>

<td class="FieldLabel">@Html.LabelFor(model => model.FaxPhoneNumber):</td>

<td>@Html.TextBoxFor(model => model.FaxPhoneNumber, new { tabindex = "8" })</td>

<td rowspan="3">@Html.ListBox("AssignedReps",Model.AssignedReps, new{disabled = "disabled", style = "width:100px"})</td>

</tr>

<tr>

<td class="FieldLabel">@Html.LabelFor(model => model.City)</td>

<td>@Html.TextBoxFor(model => model.City, new{tabindex = "4"})

@Html.ValidationMessageFor(model => model.City)</td>

<td class="FieldLabel">@Html.LabelFor(model => model.WebUrl):</td>

<td>@Html.TextBoxFor(model => model.WebUrl, new { tabindex = "9" })</td>

</tr>

<tr>

<td class="FieldLabel"><label id="labelState" title="State">State:</label></td>

<td> @(Html.Kendo().ComboBox()

.Name("StateAbbreviation")

.DataTextField("Text")

.DataValueField("Value")

.Filter(FilterType.Contains)

.DataSource(source => source.Read(read => read.Action("GetStatesList", "List")))

.Placeholder("-- Select a State --"))</td>

<td class="FieldLabel"></td>

<td></td>

</tr>

<tr>

<td class="FieldLabel">@Html.LabelFor(model => model.ZipCode)</td>

<td>@Html.TextBoxFor(model => model.ZipCode, new{tabindex="6"})

@Html.ValidationMessageFor(model => model.ZipCode)</td>

<td></td>

<td>

@if (Model.CustomerId == 0)

{ <a href=@Url.Action("AssignReps", "TotalvCRM", new { id = Model.CustomerId}) id="lnkAssignRepsAction" disabled = "disabled" class="button" >Assign Reps...</a> }

else

{<a href=@Url.Action("AssignReps", "TotalvCRM", new { id = Model.CustomerId }) id="lnkAssignRepsAction" class="button">Assign Reps...</a>}

</td>

</tr>

<tr>

<td class="FieldLabel"><label id="labelNotes" title="Notes" >Notes:</label></td>

<td colspan="3">@Html.TextAreaFor(model => model.Note, new { @cols = "75", @rows = "5", tabindex = "11" })</td>

<td>

<table>

<tr>

<td class="FieldLabel" style="text-align: left;"><label id="labelCustomerCategories" title="CustomerCategories" >Customer Categories:</label></td>

</tr>

<tr>

<td>@Html.ListBox("CustomerCategories", Model.CustomerCategories, new { disabled = "disabled", style = "width:100px" })</td>

</tr>

<tr>

<td>@if (Model.CustomerId == 0)

{ <a href=@Url.Action("CustomerCategories", "TotalvCRM", new { id = Model.CustomerId}) id="lnkCustomerCategories" disabled = "disabled" class="button" >Customer Categories...</a> }

else

{<a href=@Url.Action("CustomerCategories", "TotalvCRM", new { id = Model.CustomerId }) id="lnkCustomerCategories" class="button">Customer Categories...</a>} </td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="4" >

<a href="JavaScript:void(0);" onclick="formSubmit();" class="button">Add Customer</a>

@if (Roles.IsUserInRole("Administrator") || Roles.IsUserInRole("Manager"))

{

<a href="javascript:void(0);" onclick="DeleteCustomer()" class="button">Delete Customer</a>

}

@if (Model.CustomerId == 0)

{

<a href="@Url.Action("UploadCustomerFile", "TotalvCRM", new {id= Model.CustomerId })" disabled="disabled" class="button">Add Attachment</a>

}

else

{

<a href="@Url.Action("UploadCustomerFile", "TotalvCRM", new { id = Model.CustomerId })" class="button">Add Attachment</a>

}

@Html.ActionLink("Export To Excel...", "ExportCustomersToExcel", null,new{@class="button"})

</td>

</tr>

</table>

}

</div>

Here is the Jquery:

var customerCombobox = $("#CustomerId").kendoComboBox();

customerCombobox.bind("change", function (e) {

var customerId = this.value;

var stateAbbreviation = $("#StateAbbreviation");

if (!$.isNumeric(customerId)) {

//$("#CustomerId").val(this.value);

$("#CustomerName").val(this.value);

$("#lblCustomerId").val("0");

$("#Address1").val('');

$("#Address2").val('');

$("#City").val('');

$("#ZipCode").val('');

$("#WebUrl").val('');

$("#CustomerTypeId").val('');

$("#BusinessPhoneNumber").val('');

$("#FaxPhoneNumber").val('');

$("#AssignedReps").val('');

stateAbbreviation.val('');

} else {

window.location = '/Controller/Customer/' + this.value;

}

});

var $stateAbbreviation = $("#StateAbbreviation").kendoComboBox();

$stateAbbreviation.bind("change", function(e) {

e.preventDefault();

});

Here is the model:

[NotMapped]

public class EditCustomer

{

#region Customer Attributes

public int CustomerId { get; set; }

[Display(Name = "Customer Name")]

[StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]

public string CustomerName { get; set; }

[Display(Name = "Type")]

public int? CustomerTypeId { get; set; }

[Display(Name = "Web Site")]

public string WebUrl { get; set; }

[Display(Name = "Group")]

public string Group { get; set; }

public string Note { get; set; }

#endregion

#region Address Attributes

[Display(Name = "Address Id:")]

public int AddressId { get; set; }

[Display(Name = "Address Type:")]

public CRMAddressType AddressType { get; set; }

[StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]

[Display(Name = "Address 1:")]

public string Address1 { get; set; }

[StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]

[Display(Name = "Address 2:")]

public string Address2 { get; set; }

[StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]

[Display(Name = "City:")]

public string City { get; set; }

[Display(Name = "State:")]

[StringLength(2, ErrorMessage = "The {0} must be 2 characters long.")]

public string StateAbbreviation { get; set; }

[StringLength(10, ErrorMessage = "The {0} must be less than 10 characters long.")]

[Display(Name = "ZipCode:")]

public string ZipCode { get; set; }

#endregion

ComboBox

answered on 11 Jun 2013

4 answers

159 views

List with datasource grouping

Hi,

My list is having problems displaying new added items when bounded to grouped datasource.
When adding new items, the list shows the item itself as a group header.

I've attached an example showing it.
replace the attached file with kendoui.complete.2013.1.514.trial\examples\mobile\listview\databinding.html
you can see I've changed the original example: after 1.5 seconds i'm adding another item, and as you can see,
the item is shown as an header.
The same operation works fine on previous version.

ListView (Mobile)

answered on 11 Jun 2013

0 answers

106 views

MVVM KendoGrid and 1-D arrays

I have created an online CodePen Demo: http://codepen.io/DrYSG/pen/wnDxL where I have a Grid bound to a KendoObservable 1-D array. The Array is meant to be (Item, Value) pairs. There are a number of clumsy things here that I would like to clean up.

I would love it if you supported Grid's that had Vertical Orientation, so that I could just have display 1-D array, and use the Column Headings for each item: see: http://www.kendoui.com/forums/ui/general-discussions/vertical-grid-property-grid.aspx
Doing the lookup for the value and changing it involves hard constants (stateTable[1].Value = foo. Do I have to have a use an index table that translates integers to keys. I.e. var StatusKey = 0, TileCountKey = 1, etc. (then it would be stateTable[TileCountKey] = 2) Still seems clumsy.
This would be especially fragile, if the user could add and delete rows. (batch editing).
The KendoObservable.set() is not working for this example. So I am doing a manual trigger, which I saw in a post by Alexander Valchev, but I don't see document anywhere. This also feels a bit clumsy.
Why is there a scroll bar on my Grid?

Bottom line. It works now, but I want to know if there is something in KendoUI today, that would make this cleaner, and if not, do you have anything in UserVoice planned to fix this up?

Grid

asked on 10 Jun 2013

2 answers

110 views

Background color on Image screens

I'm trying to set the background of a screen that only displays an image. I have tried a few things on the css but it seems I'm not using the correct class to achieve the background change. I want to set the background color to black since the default is white.

General Discussions

answered on 10 Jun 2013

1 answer

187 views

How do I reload tabstrip partial view that has a kendo grid on it on tab click?

I have a tabstrip with two tabs. The first tab is a list of documents in a grid. The second tab is an upload control and these work perfect independently. I need to refresh the partial view grid though on the first tab click as the users will upload files on the second tab then I need the first tab to reflect the added files.

Thanks all

TabStrip

answered on 10 Jun 2013

8 answers

246 views

Kendo Line Chart vs Kendo Stock Chart

Hey,
Ive got a set of data which im using for a kendo line chart and it renders it fine, I use the same dataset on a stockchart (type: line) and choose the same baseUnit as the line chart and it crashes. It happens probably because there are too many point. Could this be the case that a simple line chart can handle that amount of points and the stock chart cant.
Regards,
Neil

Charts

answered on 10 Jun 2013