Questions on Kendo UI for jQuery Forum

1 answer

110 views

We are planning to develop a critical Business application around Sales Loyalty programs based on Kendo UI HTML and .Net Web APIs. Are there are case studies/real life examples of businesses developing complete applications using Kendo UI HTML controls and Web APIs. Could you please share information as we need to convince the customer on using Kendo UI (HTML) for complete application development.

General Discussions

answered on 28 Apr 2014

2 answers

73 views

Lose Header When Many List Items and tab through to the bottom

Hello,

I have a list view with a header. It is working fine until the list gets many. The currently we have 32 items. The problem is that when we are tabbing through the items, entering values all the way to the last item and then we try to scroll back to the top, it won't let us. It springs back to the middle and cannot get to the top nor get to the header. We have navigation buttons at the top and it is important that we get to the header. Is there any way to resolve this?

This happens in iPhone, IPad, Safari, and IE 11. All do the same thing.

My html is below (omitted in the middle since there are more than 30 items in the list):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="./Scripts/KendoUI/jquery.min.js"></script>
<script src="./Scripts/KendoUI/kendo.mobile.min.js"></script>
<script src="./Scripts/KendoUI/console.js"></script>
<script src="./Scripts/jquery.signaturepad.min.js"></script>
<script src="./Scripts/json3.min.js"></script>
<link href="./Content/KendoUI/kendo.mobile.all.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="BUBBA" id="edit-event-view" >
<header data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-role="button" class="nav-button" >Log Out</a>
            <a data-align="left" data-role="button" class="nav-button">Main</a>
            <span id="edit-event-title" data-role="view-title" />
        </div>
</header>
<ul data-role="listview" >
    <li style=""><label for="f15303">First Name</label><input type="text" id="f15303" value="" style="text-transform: uppercase;" text-casing="3" /></li>
    <li style=""><label for="f15304">Middle Name</label><input type="text" id="f15304" value="" style="text-transform: uppercase;" text-casing="3" /></li>
    <li style=""><label for="f15305">Last Name</label><input type="text" id="f15305" value="" style="text-transform: uppercase;" text-casing="3" /></li>
    <li style=""><label for="f15306">Suffix<select id="f15306" style="text-transform: uppercase;" ><option value="0"> </option><option value="3">I</option><option value="4">II</option><option value="5">III</option><option value="6">IV</option><option value="11">IX</option><option value="1">JR</option><option value="2">SR</option><option value="7">V</option><option value="8">VI</option><option value="9">VII</option><option value="10">VIII</option><option value="12">X</option></select></label></li>
....(Omitted)
    <li style=""><label for="f15307">Sex<select id="f15307" style="text-transform: uppercase;" ><option value="" selected="selected"></option><option value="M">Male</option><option value="F">Female</option><option value="U">Unknown</option></select></label></li>
<li style=""><label for="f15520">How Injury Occurred</label><textarea id="f15520" style="text-transform: uppercase;" text-casing="3" ></textarea></li>
<li style=""><label for="i15405" >Year of Death</label><input type="text" id="i15405" class="readonly-text" value="" default-value="" style="text-transform: uppercase; background-color: silver; " ></li>
<li style=""><label for="i15576" >Alert Count</label><input type="text" id="i15576" class="readonly-text" value="" default-value="" style="text-transform: uppercase; background-color: silver; " ></li>
</ul>
</div>
<script>
      window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

Thanks!

ListView (Mobile)

answered on 28 Apr 2014

2 answers

155 views

Grid behaves like a TreeView

Hello,

We would like to find a way to implement a Grid. When we click row, we want to be able to show subrow. But Is there any way or best practice to do that?

You can find a mockup as attachment. I think it would be more clean for everyone.

Many many thanks to your help,

Grid

answered on 28 Apr 2014

2 answers

124 views

k-pager-info misaligned when grid has frozen columns and Pageable pagesize is set to true in Firefox

Hello Kendo Team,
It seems that k-grid-lockedcolumns style makes that k-pager-info appears misaligned in Firefox when you set pagesize option to true of the Pageable configuration object.
You can see this effect in this link: http://trykendoui.telerik.com/ItuL

Why does k-grid-lockedcolumns style have White-space: nowrap?

Kind regards.
Oscar.

Grid

answered on 28 Apr 2014

3 answers

319 views

no icons shown

Hello

Kendo UI:    2014.1.318
OS:              Windows7 32bit
VS:              2012

As a beginner in mobile app and Kendo UI this might be odd, but I couldn't find the solution myself.

From the examples I implemented the scheduler in the MVVM project that is prepared by opening a new Kendo project in VS.
The app is running. The views, today button and scrolling work.
But the arrow icons are not shown, neither in tablet nor phone mode.
Do I need to add icons or shapes for it? I suppose yes, but which one and where?

Thank you for any help!

Martin

Scheduler

answered on 28 Apr 2014

1 answer

334 views

MultiSelect on losing focus still have class "k-state-focused"

MultiSelect on losing focus still have class "k-state-focused".
Its very noticeable with Bootstrap theme when blue glowing stays on Multiselect when focus is lost already.

When do you plan to have some Service Pack release for latest version of Kendo Controls?

Thanks,
Val

MultiSelect

answered on 28 Apr 2014

1 answer

124 views

RadialGauge Title and Value

I need to export an image of a RadialGauge. I would like to have a title and value included in the image. Is there anyway to do this?

Charts

answered on 28 Apr 2014

2 answers

102 views

DataSource mysteriously adding an "M" character to my ID upon update

When I submit an update given my data source, it generates the following HTTP request. Note the TEIID_TEST(2M) part - it should just be 2, corresponding to a numeric ID of 2:

PUT http://amr-dsiprod05:8080/odata/SDA/TEIID_TEST HTTP/1.1

Content-Type: application/json

Accept-Language: en-us

Authorization: Basic dXNlcjp1c2Vy

Accept: application/json, text/javascript, */*; q=0.01

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8)

Host: amr-dsiprod05:8080

Content-Length: 147

Connection: Keep-Alive

Pragma: no-cache

{"__metadata":{"uri":"http://amr-dsiprod05:8080/odata/SDA/TEIID_TEST(2M)","type":"SDA.TEIID_TEST"},"NAME":"test","FAVORITE_COLOR":"Blues","ID":"2"}

Here's my code:

<script type="text/javascript">
jQuery.support.cors = true;
var call = $.ajax({
url: "http://amr-dsiprod05:8080/odata/SDA/TEIID_TEST",
type: "GET",
headers: {
Authorization: "Basic dXNlcjp1c2Vy"
},
dataType: "json",
success: function(data){
var results = data.d.results;
var len = results.length;
var text = '<p>Successfully fetched ' + len + ' rows from the database</p>';
$('#RESULT').html(text);
},
error: function(err){
//alert(err.statusText);
$('#RESULT').html('<p>Failed to fetch data due to ' + err.statusText);
}
});
call.done(function (data, textStatus, jqXHR) {
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "NAME" },
{ "mData": "FAVORITE_COLOR" },
{ "mData": "ID" }
]
});
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
</script>

Thoughts? Why does the M appear?

Data Source

answered on 28 Apr 2014

1 answer

111 views

Dropdown in Kendo().Grid

Hello
my requirement is to put three controls in one column of Kendo grid()
1st two Controls are a dropdown list and 3rd control is numeric field with will have value like '0000.0000345'
here is my column code looks like

columns.Bound(o => o.MicGreaterLess).Title("MIC").Width(175).Encoded(false).ClientTemplate(
@Html.Kendo().DropDownList()
.Name("MICGreaterLess")
.DataTextField("Text")
.DataValueField("Value")
.Value("1")
.BindTo(
new List<SelectListItem>(){ new SelectListItem() { Text = "=", Value = "1" },
new SelectListItem() { Text = "<", Value = "2" },
new SelectListItem() { Text = ">", Value = "3" }
})
.HtmlAttributes(new { Style = "width:20px;" })
.ToClientTemplate()
.ToHtmlString()
+ " " +
@Html.TextBox("UOM", "uom", new { Style = "width:50px;" }).ToHtmlString()
+ " " +
@Html.TextBox("Value", "value", new { Style = "width:50px;" }).ToHtmlString()
).HtmlAttributes(new { Style = "vertical-align:top" });

after this all I see in the grid is three text boxs with the value 1, 'UOM', 'Value' (I need to see the drop down for 1st two controls)
and when the user selects I should be able to save these values in db.

please help - thanks in adv.

Grid

answered on 28 Apr 2014

14 answers

149 views

Kendo Stock Chart Max Value Error

Hello! I have this chart I am drawing with area chart up top, and a navigator at the bottom. Tho I have only daily data from 2010/01/01 to 2014/12/31, when using StockCharts, I get extra categoryAxis values from 2015... I cannot block this, is it a bug or a fixable problem?

Data;

[{
"date": "2010-01-01",
"revenue": 3370,
"costs": 1381,
"income": 1989
}, ....

{
"date": "2014-12-31",
"revenue": 4854,
"costs": 744,
"income": 4110
}]

I attached the resulting error;
Any help appreciated!!

Charts

answered on 28 Apr 2014