Questions on Kendo UI for jQuery Forum

1 answer

255 views

Drag stops when mouse hovers over iframe - suggested fix?

I have a series of kendo windows and some may contain iframe tags within their contents. When a user drags a window, dragging stops while the mouse is over the iframe. There is a jquery plugin that fixes this issue when using jquery drag, is there something similar for Kendo or could I use the same plugin? The plugin is posted below:

$.ui.plugin.add("resizable", "iframeFix",

start: function() {

var o = $(this).data('draggable').options;

$(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {

$('<div class="ui-draggable-iframeFix" style="background: #fff;"></div>')

.css({

width: this.offsetWidth+"px", height: this.offsetHeight+"px",

position: "absolute", opacity: "0.001", zIndex: 1000

})

.css($(this).offset())

.appendTo("body");

});

},

stop: function() {

$("div.ui-draggable-iframeFix").each(function() {

this.parentNode.removeChild(this);

}); //Remove frame helpers

}

});

Window

answered on 03 Apr 2013

1 answer

31 views

Chart with Navigator

For some reason I cant add a post in http://www.kendoui.com/forums/dataviz/chart/chart-with-navigator.aspx
The Q1 release did not contain this requested feature.
Is there any date for an internal build with this capbability ?
Thx
Sagi

Charts

answered on 03 Apr 2013

1 answer

301 views

MVVM not working with DropDownList when typeof data value is boolean

Hello Kendo,

I just used the following test code with kendo DropDownList mvvm as to your demo:

<script>
$(function() {
var vm = kendo.observable({
dropdownlistSource: [
{ text: 'True', value: true },
{ text: 'False', value: false }
],
selected: null
});

vm.selected = vm.dropdownlistSource[1];
kendo.bind($('body'), vm);
});
</script>
</head>
<body>
<input data-role="dropdownlist" data-text-field="text" data-value-field="value" data-bind="source: dropdownlistSource, value: selected" />
</body>

However, the widget just display the first item every time, not the value demonstrated in data-bind attr. When i switch the value field of data source to interger 1 and 0, that works perfect.

I think this would be a bug in your control, and please pay attention to it when u r free.

Wenhao

DropDownList

answered on 03 Apr 2013

1 answer

670 views

saveChanges callback

I'm having some timing issues and was wondering if there is a way for saveChanges to have a callback when it's save is complete?

Grid

answered on 03 Apr 2013

1 answer

64 views

Kendo charts in hybrid MVC4 desktop/mobile app

A project we are just starting requires us to display graphs on both desktop and mobile versions of the app.

The browsers available to us within Visual Studio 2012 and Webmatrix are as follows:
Desktop: Firefox, Google Chrome, Internet Explorer, Opera Internet Browser, Safari
Mobile: Windows Phone 7, Opera Mobile Emulator, Electric Plum iPhone/iPad simulator

The chart appears on all browser types except for the Electric Plum iPhone/iPad emulator. The main mobile focus for us are the iOS devices so we really need to get it working.

I created a test application (as a 'Kendo UI for MVC Web Application') and the only files I have altered are those in the attached zip file. I wonder if you could let us know what we need to do to get the graph to appear please?

General Discussions

answered on 03 Apr 2013

5 answers

105 views

Local shared data source issue

Your documentation implies that this should work, but it doesn't. How do I use a local shared data source that allows multiple charts and grids to sort the same data?

If I get the data source from an XML file, it works, but not from a local JS array.

var salesData = [{
employee: "Joe Smith",
sales: 2000
}, {
employee: "Jane Smith",
sales: 2250
}, {
employee: "Will Roberts",
sales: 1550
}];

var localDataSource = new kendo.data.DataSource({ data: salesData });

$(document).ready(function () {
$("#test").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: {
data: localDataSource
},
series: [{
type: "line",
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
});

Data Source

answered on 03 Apr 2013

1 answer

125 views

Openaccess WCF Service Data Not Displaying in Grid

I have created a simple 1 table service using Openaccess Domain Model and oData Data Service. When I try to call the service using the Kendo Grid, I can see the json data (using Fiddler) being returned/parsed but it is never displayed in the grid.

When I use IE9 to run my test, i get the following error:
Error: Unable to get value of the property '__count': object is null or undefined

I don't get that error in Chrome or Firefox but the data still does not display.

I used the example at http://demos.kendoui.com/web/grid/remote-data.html and just changed the service url and data fields as needed.

My service is a oData v3 and I have included the JSONSupportBehavior attribute in my class. You can use this link http://www.thinkkentucky.com/fidatao/ftentitiesmodelservice.svc/FUNDTYPEs?$format=json to see a text file of the data returned from my service.

I would appreciate any help to understand what is causing this problem and how to fix it.

Thanks
Ben

Data Source

answered on 03 Apr 2013

1 answer

332 views

Kendo UI Grid implement sub columns under parent column

Hi,
I need to render multiple sub columns(which contain checkbox) under parent column.I have attached screen-shot the way i want to render columns and also i want the values of those sub columns checkboxes in inline edit.

Please reply.

Grid

answered on 03 Apr 2013

0 answers

222 views

MVC Wrapper + Clientrowtemplate + rowspan?

EDIT: Solved my issue. I was using wrong attribute. Need colspan instead of rowspan. Can't believe I missed that.

Hi, using Asp.Net MVC Wrappers and .ClientRowTemplate, we are trying to replicate functionality here (http://demos.telerik.com/aspnet-mvc/grid/clientrowtemplate) where there are several columns that can be used for sorting and filtering. Is this currently supported in kendo ui or only the older mvc plugin?

With the current code, sorting and filtering works but we can't figure out a way to get the template to span all 3 columns. Is it possible? Thank you!

Dim gridBuilder As Kendo.Mvc.UI.Fluent.GridBuilder(Of time_card) = _
Html.Kendo().Grid(Of time_card)().Name("TimecardGrid")
gridBuilder.DataSource(Function(c As DataSourceBuilder(Of time_card)) c.Ajax().Read(Function(r) r.Action("Cards_Read", "Home")))
gridBuilder.Columns(Function(columns As GridColumnFactory(Of time_card)) columns.Bound(Function(o) o.tc_date))
gridBuilder.Columns(Function(columns As GridColumnFactory(Of time_card)) columns.Bound(Function(o) o.tc_index))
gridBuilder.Columns(Function(columns As GridColumnFactory(Of time_card)) columns.Bound(Function(o) o.billed_hours))
gridBuilder.ClientRowTemplate("<tr><td rowspan='3'>#= tc_date #<br/>#= billed_hours #</td></tr>")
gridBuilder.Render()

Grid

asked on 03 Apr 2013

1 answer

255 views

Kendo UI Tabstrip content collision issue

In my main page, I have a treeview that acts as a menu to the left and a tabstrip to the right which takes the whole screen. When a user clicks on a node on the treeview, it loads a local JSP page on the tabstrip as a tab.

I'm experiencing a weird issue when two tabs are loaded. When the user clicks on the first loaded tab, instead of clearing the already existing content from the second tab, it loads the existing content on top of the new content from the first tab, as you can see from the bottom screenshot.There are no problems when the tabs are opened individually.

http://img203.imageshack.us/img203/7053/asdfwfr.jpg

To avoid any id collisions on div, we made sure that all ids are uniquely named on all pages.

main.jsp
function mainContentTreeView_onSelect(e) {
var mainTreeView = $("#mainVerticalMenu").data("kendoTreeView");
var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip");

var dataItem = mainTreeView.dataItem(e.node);
var selectedNodeText = dataItem.text;
var selectedNodeValue = dataItem.id;

if (dataItem.parentNode() == null || dataItem.parentNode() == "undefined")
{
$("#mainVerticalMenu").data("kendoTreeView").expand(e.node);
}
else
{
var data = mainVerticalTabStrip.element.data("mainVerticalTabContent") || [];
if (!data[selectedNodeText]) {
mainVerticalTabStrip.append({
text: selectedNodeText +
" <img src='image/image/button_cancel.png' " +
"height='10' width='10' " +
"id='" + selectedNodeValue + "' " +
"name='" + selectedNodeText + "' " +
//"onclick='javascript:mainContentTreeView_delete()' " +
//"onclick='mainVerticalTabStrip.remove($(this).closest(\"li\"))' " +
"onclick='javascript:mainContentTreeView_delete(" + selectedNodeText + ")' " +

//"onmouseover=" + this.text(e.node) + ".src='image/image/button_cancel_over.png' " +
//"onmouseout=" + this.text(e.node) + ".src='image/image/button_cancel.png' " +
">",
encoded: false,
contentUrl: "screen/" + selectedNodeValue,
selected: true
});
Object.size = function(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
data[selectedNodeText] = Object.size(data) + 1;
mainVerticalTabStrip.element.data("mainVerticalTabContent", data);
}
mainVerticalTabStrip.select(data[selectedNodeText] - 1);

// Expand 100%
var mainVerticalTabStripElement = $("#mainVerticalTabStrip").kendoTabStrip();
//var mainVerticalTabStripData = mainVerticalTabStripElement.data("kendoTabStrip");

var expandContentDivs = function(divs) {
divs.height(mainVerticalTabStripElement.innerHeight() - mainVerticalTabStripElement.children(".k-tabstrip-items").outerHeight() - 16);
}
// 16px are substracted to compensate for content div vertical paddings and borders
var resizeAll = function() {
expandContentDivs(mainVerticalTabStripElement.children(".k-content"));
}

resizeAll();

$(window).resize(function(){
resizeAll();
});
}
e.preventDefault();
}

Snippet of loaded page

<div id="SUBUL_02_TOP_MENU" class="configuration k-widget k-block" style="display: table;overflow-x: scroll;white-space: nowrap;">
<div class="SUBUL_02_MENU_FIRST_ROW">
<div id="SUBUL_02_IO_GB"
style="display: table-cell; vertical-align: middle">
<label style="margin-left: 0px;">주문구분</label>
<kendo:comboBox name="SUBUL_02_CB_IO_GB" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_CRDATE"
style="display: table-cell; vertical-align: middle; margin-left: 10px">
<label>조회일자</label>
<kendo:datePicker name="SUBUL_02_DATEPICKER_FROM" value="<%=new Date()%>" change="onFromDateChange" culture="ko-KR"></kendo:datePicker>
-
<kendo:datePicker name="SUBUL_02_DATEPICKER_TO" value="<%=new Date()%>" change="onToDateChange" culture="ko-KR"></kendo:datePicker>
</div>
<div id="SUBUL_02_CRDATE_TYPE"
style="display: table-cell; vertical-align: middle">
<input type="radio" name="SUBUL_02_CRDATE_RADIO_TYPE" value="CRDATE" checked="checked">주문일자<br>
<input type="radio" name="SUBUL_02_CRDATE_RADIO_TYPE" value="CHDATE">출고일자
</div>
<div id="SUBUL_02_DANGA"
style="display: table-cell; vertical-align: middle">
<label>단가구분</label>
<kendo:comboBox name="SUBUL_02_CB_DANGA_GB" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_DELIVERY"
style="display: table-cell; vertical-align: middle">
<label>배송구분</label>
<kendo:comboBox name="SUBUL_02_CB_DELIVERY_GB" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_PROGRESS"
style="display: table-cell; vertical-align: middle">
<label>진행상태</label>
<kendo:comboBox name="SUBUL_02_CB_PROGRESS" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_ORDER_ORIGIN"
style="display: table-cell; vertical-align: middle">
<label>등록처</label>
<kendo:comboBox name="SUBUL_02_CB_ORDER_ORIGIN" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
</div>
<div class="SUBUL_02_MENU_SECOND_ROW">
<div id="SUBUL_02_BRAND"
style="display: table-cell; vertical-align: middle">
<label style="margin-left: 0px; margin-right: 13px">브랜드</label>
<kendo:comboBox name="SUBUL_02_CB_BRAND" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_LINE"
style="display: table-cell; vertical-align: middle">
<label>라인</label>
<kendo:comboBox name="SUBUL_02_CB_LINE" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_SAP_CODE"
style="display: table-cell; vertical-align: middle">
<label>SAP 코드</label>
<input type="text" id="SUBUL_02_TB_SAP_CODE" class="k-textbox"></input>
</div>
<div id="SUBUL_02_PO_NUM"
style="display: table-cell; vertical-align: middle">
<label>PO NUM</label>
<input type="text" id="SUBUL_02_TB_PO_NO" class="k-textbox"></input>
</div>
<div id="SUBUL_02_DELIVERY_NO"
style="display: table-cell; vertical-align: middle">
<label>DELIVERY NO</label>
<input type="text" id="SUBUL_02_TB_DELIVERY_NO" class="k-textbox"></input>
</div>
<div id="SUBUL_02_TRAN_ID"
style="display: table-cell; vertical-align: middle">
<label>TRAN ID</label>
<input type="text" id="SUBUL_02_TB_TRAN_ID" class="k-textbox"></input>
</div>
<div id="SUBUL_02_SAP_NO"
style="display: table-cell; vertical-align: middle">
<label>SAP NO</label>
<input type="text" id="SUBUL_02_TB_SAP_NO" class="k-textbox"></input>
</div>
</div>
</div>

Is this a bug with tabstrip?

TabStrip

answered on 03 Apr 2013