Questions on Kendo UI for jQuery Forum

1 answer

182 views

OData Service: Invalid slug header for attachment.

I am trying to upload a file via a service that implements OData. I cannot seem to set any additional headers on the upload control. I need to set a custom slug header.

Here is the error I am receiving. Despite what it says the header format is below the error.

Invalid slug header for attachment. Slug headers must be of the form "EntitySet,ItemId,Name".

Here is how the headers should look:
Slug: MyListTitle|1|mydocument.docx

Upload

answered on 11 Jun 2013

1 answer

90 views

Resetting the scroller after a back button

We want to reset the scroller in the data-after-show function of a view. It works well everywhere except after a getting to a page using the back-button - as it seems that when we get there the app view id is still the one of the page where the button was clicked, and not the page to which we return and where the event is bound.

Is there a way around this?

Application

answered on 11 Jun 2013

1 answer

153 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

151 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

70 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

176 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

149 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

90 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

98 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