Questions on Kendo UI for jQuery Forum

3 answers

52 views

It looks like something in SP1 has broken kendoUI icons in IE7. I confirmed with two different VMs. I cannot see icons in IE7 on any widget nor http://demos.kendoui.com/web/styling/icons.html. Using web archive I am able to see the icons in IE7 http://web.archive.org/web/20130128210046/http://demos.kendoui.com/web/styling/icons.html.

I rolled back to v2013.2.716 and the icons display properly in IE7.

General Discussions

answered on 26 Sep 2013

3 answers

124 views

How to plug in dropdownlist in kendo mobile

Hi. I need dropdownlist in my kendo mobile project and bind data to it.
I saw an example http://demos.kendoui.com/mobile/forms/index.html#/ and saw that better way is to use kendo web dropdownlist and no use standart elements like "select".
But dropdownlist not working in my project. How can i plug in dropdownlist from kendo web to kendo mobile?

My goal is 3 cascading dropdownlists in kendo mobile with data binding from remote url.

General Discussions

answered on 26 Sep 2013

1 answer

145 views

Document Browser and Video Browser

I would love to see a Document Browser tool and a Video Browser tool added to the Editor similar to the Image Browser.

Ideally, the Video Browser would also allow you to embed YouTube and Vimeo videos.

Is that in the plans?

Editor

answered on 26 Sep 2013

1 answer

71 views

Point me in the right direction?

I want to have an icon on the homepage that when hovered over, shows a templated tooltip.

Difference from the demos being I don't want to show details of a single item, but instead a more complex UI that contains a list of items, and a couple buttons.

...it's kind of like the telerik menu item on this page (see attached)

What I'm confused about is how to get my content into there...I would love to be able to MVVM the list item content inside of it, but I can't seem to see in my head how this all ties together (with events). I assume I have a static "content" property and in that an item template repeater...?

Steve

ToolTip

answered on 26 Sep 2013

2 answers

310 views

trying to refresh/update the listview after user presses a button

I have a simple app that allows customers to look up inventory. Its as simple as the user enters a optional customer number and part. That occurs in the search view. Then they press the go button and are shown the results view. It list the product and stock count at our branch locations.

The issue I'm having is on mobile phones. The listview does not get updated. The data doesn't change.

Here is the code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="KochAirMobileInventory._Default" %>

<!DOCTYPE html>

<html>

<head id="Head1" runat="server">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Expires" CONTENT="-1">

<title>Part Lookup</title>

<link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="Content/kendo/2013.2.716/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>

<script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>

<style>

.glass {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 100;

opacity: 0.3;

background: #fff;

}

</style>

</head>

<body>

<div id="glass" class="glass" style="display: none;"></div>

<div data-role="layout" data-id="SearchLayout">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

</div>

<div id="SearchView" data-role="view" data-title="Search" data-layout="SearchLayout">

<ul data-role="listview" data-style="inset">

<li>

<label>Customer #

<input id="Customer" type="text" value="60506" />

</label>

</li>

<li>

<label>

Part

<input id="Part" type="text" value="CF58.C" />

</label>

</li>

<li style="text-align:center;">

<label>

<a class="button" data-role="button" href="#ResultsView" onclick="GetData();">Go</a>

</label>

</li>

</ul>

</div>

<div data-role="layout" data-id="ResultsLayout">

<header data-role="header">

<div data-role="navbar">

<a class="nav-button" data-align="left" data-role="backbutton">Back</a>

<span data-role="view-title"></span>

</div>

</header>

</div>

<div data-role="view" id="ResultsView" data-transition="slide" data-init="mobileListViewDataBindInitFlat" data-title="Results" data-layout="ResultsLayout">

<ul id="flat-listview" data-role="listview" data-style="inset"></ul>

</div>

<script type="text/ecmascript">

//data that is called via ajax for our listview in the

//results view...

var flatData;

//sample of the data returned

/*

[{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":2,"AvailQty":79,"Status":"A","Location":"usa"},

{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":3,"AvailQty":105,"Status":"A","Location":"usa"},

{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":4,"AvailQty":100,"Status":"A","Location":"usa"},

{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":5,"AvailQty":66,"Status":"A","Location":"usa"},

{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":6,"AvailQty":-11,"Status":"A","Location":"usa"},

{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":7,"AvailQty":79,"Status":"A","Location":"usa"},

{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":8,"AvailQty":55,"Status":"A","Location":"usa"}]

*/

function GetData() {

showLoading();

var customer = $("#Customer").val();

var showPrice = false;

if (customer == "") {

customer = "60506";

} else {

showPrice = true;

}

$.ajax({

url: "api/branchitem/?partnumber=" + $("#Part").val() + "&customer=" + customer,

contentType: 'json',

success: function (data) {

flatData = "";

var price = "";

$.each(data, function (index, item) {

flatData += item.Location + " Quantity:" + item.AvailQty + ',';

price = item.SellPrice

});

flatData = flatData.substr(0, flatData.length - 1);

if (showPrice) {

flatData += ",Price: " + price.toString();

}

flatData = flatData.split(",");

flatData = flatData;

//attempt to destroy and recreate so the data will update...

$('#flat-listview').data('kendoMobileListView').destroy();

$("#flat-listview").kendoMobileListView({ dataSource: flatData });

hideLoading();

}

});

}

function mobileListViewDataBindInitFlat() {

//grab data from restful service

GetData();

}

var app = new kendo.mobile.Application(document.body);

function showLoading() {

$("#glass").show();

app.showLoading();

}

function hideLoading() {

$("#glass").hide();

app.hideLoading();

}

</script>

</body>

</html>

ListView (Mobile)

answered on 26 Sep 2013

1 answer

112 views

Kendo UI grid sorting

Hi

We are using Kendo UI Grid to our application with the option Pageable true. When we sort a one page the rest remain unsorted.
We would like to know is there any possibility to sort data in every pages in Kendo grid.

Thanking you,

cowderia development team

General Discussions

answered on 26 Sep 2013

2 answers

487 views

KendoEditor + dropTarget

Hi,

I am trying to implement a scenario where user can drop nodes from the tree to an editor. By default all the nodes are draggable of the kendo treeview control so I have to remove the dragAndDrop and use kendoDraggable so that parent nodes are not draggable. This is working fine by using templates.

Now, for the editor part, if I apply kendoEditor to the textarea and make it kendoDropTarget, the drop functionality is not working. However this works if I keep textarea as it is (without kendo editor) and apply kendoDropTarget to the textarea. Not sure what I am missing?

The code snippet is share at: http://jsfiddle.net/N4PVu/

Regards,
Monish.

Drag and Drop

answered on 26 Sep 2013

1 answer

383 views

Scheduler make All Day check box as unchecked in default load

Hi,

I need to unchecked the All Day check box when creating the schedules in Calender. Since i am getting always selected in default.

I am using the below code for scheduler and template.

Calender

@(Html.Kendo().Scheduler<SchedulerViewModel>()
.Name("uxAuditSchedulerView")
.Date(DateTime.Now)
.Views(views =>
{
views.DayView(day => day.Title("DAY"));
views.WeekView(week => week.Title("WEEK"));
views.MonthView(month => month.Selected(true).Title("MONTH"));
views.AgendaView(agenda => agenda.Title("TIMELINE"));
})

.DataSource(d => d
.Model(m =>
{
m.Id(f => f.SchedulerId);
m.Field(f => f.AuditDetailId);

})
.Read("GetSchedules", "Audit")
.Create("CreateSchedule", "Audit")
.Destroy("DestroySchedule", "Audit")
.Update("UpdateSchedule", "Audit")

)
.Editable(x => x.TemplateId("editor").Confirmation(Messages.DeleteConfirmation))
.Events(e=>e.Edit("Scheduler_Edit"))
)

Template

<script id="editor" type="text/x-kendo-template">
<div class="row-fluid" style="width:660px;!important; padding:0 20px;">
<div class="control-group margin_btm_20 clearfix ">
<div class="span3">



<label>Audit Id: </label>
<div class="input-controls">
@(Html.Kendo().DropDownListFor(x=>x.AuditDetailId)
.Name("AuditDetailId")
.DataTextField("Selected")
.DataValueField("Value")
.BindTo(Model.AssignedAuditIds)
.OptionLabel("Select")
.Events(e=>e.Change("onAuditDetailChange"))
.ToClientTemplate()
) </label>
</div>
</div>
<div class="span4">
<label>Start Time: </label>
<div class="input-controls">
@*<input data-role="datetimepicker" name="start" class="span12"/>*@
<input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" class="span12" />
<input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" class="span12" />
</div>
</div>
<div class="span4">
<label>End Time: </label>
<div class="input-controls">
@*<input data-role="datetimepicker" name="end" class="span12"/>*@
<input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" class="span12" />
<input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" class="span12" />
</div>
</div>
<div class="span1">
<label>All day</label>
<div class="input-controls">
@*<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">*@
<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
</div>
</div>
</div>
<div id="uxSelectedAuditDetails" class="pad10-0 " > </div>
<div class="control-group margin_btm_20 clearfix ">
<div class="span12">
<label>Note:</label>
<div class="input-controls">
<textarea name="description" data-bind="value:description" class="span12"></textarea>
</div>
</div>
</div>

</div>
</div>

</script>

Scheduler

answered on 26 Sep 2013

1 answer

197 views

kendo grid in IE 11

I am testing kendo grid with IE 11 and stumbling on a bug. Basically the grid click acts differently in various version of kendo library. In the latest version ( 2013.2.918) grid click is triggered twice and Grid click does not work all the way back until version 2012.3.1114. Here is the plunker link. http://plnkr.co/edit/MgkSCf2vqBfYehtGvKUx?p=preview

I would be happy if I can get a patch for version 2012.3.1315 which are in our production servers ( or atleast direct me on how to patch it )

Thanks
Sush

Grid