Telerik Forums
Kendo UI for jQuery Forum
3 answers
88 views
Hi,

I'm porting a simple Energy cost calculator made in Javascript.
When i use the <form> tag Kendo UI isn't correcly displayed. This simple tag ins't supported or im wrong?

How can i fix this code to work with kendo ui? how can i access to my fields watts, hours and how to call the javascript function?


<div data-role="view" id="forms" data-title="Calculadora de Consumo" data-layout="layout" data-transition="slide" data-init="initForm" >
    <ul data-role="listview" data-style="inset" data-type="group">
         
         
        <li>
         
            Sepa cuánto consumen sus artefactos.
            <ul>
                <li>
                    <input type="tel" name="watts" size="5" value="0" />Watts del artefacto
                </li>
                 
                <li>
                    <input type="tel" name="hours" size="5" value="0" />Horas de funcionamiento
                </li>
                 
                <li>
                <input type="tel" name="unitcost" size="9"  value="105" />Costo KWh
                </li>
                <li>
                    <input type="button" value="Calculate" onclick="workitout(this.form)" />
                </li>
                 
                <li>
                <input type="text" name="daycost" size="7" />Costo diario
                </li>
                <li>
                <input type="text" name="qtrcost" size="7" />Costo mensual
                </li>
                 
                <li>
                <input type="text" name="yrcost" size="7" />Costo anual
                </li>
                 
            </ul>
             
        </li>
         
    </ul>
</div>



<script language="JavaScript" type="text/JavaScript">
<!--
function workitout(form)
{
var kw = form.watts.value / 1000;
var hrs = parseInt(form.hours.value);
 
var cost = (form.unitcost.value * kw * hrs) / 100;
var annual = cost * 365;
var quarter = annual / 12;
  
cost = round(cost);
annual = round(annual);
annual = round(annual);
 
form.daycost.value = cost;
form.qtrcost.value = quarter;
form.yrcost.value = annual;
}
function round (num) {
num = Math.round(num * 100) / 100;
num = (num + 0.001) + '';
return num.substring(0, num.indexOf('.') + 3);
}   
//  End -->
</script>
Petyo
Telerik team
 answered on 27 Apr 2012
1 answer
195 views
Why is it that in the demos for both DropDownList and ComboBox, the width of the dropdown matches the input field, with apparently no special action being taken, but in my usage the input field is constant at 149px while the dropdown is only wide enough to accomodate the content?

I understand why the input field is 149px... because it's hard-code in kendo.common.css as "width: 12.4em;" but why is the dropdown width not matching?

This is all with content being added dynamically via ajax responses.

Dimo
Telerik team
 answered on 27 Apr 2012
1 answer
72 views
Hi!

Operation Add, and Sync nothing to do. No XHR queryes from client to server after sync operation.

Example:

dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: pub.root("pages/?read"),
                    type: "POST"
                },
                create: {
                    url: pub.root("pages/?create"),
                    type: "POST"
                },
                destroy: {
                    url: pub.root("pages/?delete"),
                    type: "POST"
                },
                update: {
                    url: pub.root("pages/?update"),
                    type: "POST"
                }
            },
            schema: {
                type: "xml",
                data: "Response/pages/item",
                model: {
                    id: "id",
                    fields: {
                        id: "id/text()",
                        name: "name/text()"
                    }
                },
                total: "Response/pages/@total"
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 100
        });

var item = {};
item["id"] = null;
item["name"] = 'Hello';

dataSource.add(item);
dataSource.sync();

Rosen
Telerik team
 answered on 27 Apr 2012
1 answer
67 views
In response to some of my questions, Telerik support staff has been outstanding. They provide samples, and explanations that illuminate a great deal as to what is going on inside the KendoUI, the semantics and syntax of methods, attributes, etc. As well as interactive JSFiddle demonstrations.

I feel guilty for asking some of these things, but I first pour through the documentation and if I don't find it, then I am forced to ask.

Suggestion:

In response to questions that seem to be common and thinly covered in the formal documentation (e.g. aggregation in datasource, grid and charts) consider writing up a TECH NOTE, and then cross linking it to the documentation nodes under Grid, Chart and Datasource.
In addition, if you create a JSFIDDLE, then also link that to the documentation. (call the link DIVE DEEPER, or something like that).

That way you will have a permanent record, decrease the customer support costs, and provide us with interactive ways (JSFiddle) to dive deeper than the thin layer of formal documentation. It allow you to leverage your staff support costs by creating a living Knowledge Base. I could even see users submitting well documented JSiddles for Telerik points. (crowd source your documentation and decrease the cost of creating the documentation corpus!).





Georgi Tunev
Telerik team
 answered on 27 Apr 2012
6 answers
580 views
Hi,

When adding rows to the grid and pressing "Create" a json package are sent to the server.

Thats fine,- but what about the server response,- how/where is it handled by the grid?

Serverside I validate for duplicates and want to tell the grid when the create did fail(or was a success) - how is this trivial task implemented?

1. Light up rows that are not valid
2. Alert the user

Been searching the forum/documentation - with no success.
Erlend
Top achievements
Rank 2
 answered on 27 Apr 2012
3 answers
1.3K+ views

Hi,
My issue is simple, I have a normal HTML Dropdown List or <select> list. I am using the following code to convert it to Kendo Drop Down

$(document).ready(function () {
            $(".mySelect").kendoDropDownList();

 }

It works, but the alignment is not good. When I open the dropdown list to choose the Items, the list is a little bit moved to the right of the base-button. 

Here is the screenshot

Click Here For Screenshot
Iliana Dyankova
Telerik team
 answered on 27 Apr 2012
4 answers
484 views
I would love to see an example of a grid bound to a viewmodel. When the user selects a row in the grid the details of the row are shown below the grid in input fields. If you edit one of the fields the grid will automatically update. Have anyone done anything like this? Can you please create a jsfiddle demonstrating it for me? I have not been able to find something like this, but I belive it is a very common thing to do.
Bjarke
Top achievements
Rank 1
 answered on 27 Apr 2012
1 answer
415 views
I'm evaluating this product for my organization and to be honest I'm very new to this stuff. I've been playing around with stuff for a couple of days but I appear to have become stuck on something pretty trivial.

I'm calling an ASP.NET web service using VS 2010. I'm calling it from the dataSource, and then binding the dataSource to the chart. It works fine when I don't try to pass parameters, I get the results into the chart and everything seems right. The Kendo definition of the datasource is

                    var dsprov = new kendo.data.DataSource({
                        schema: {
                            data: "d"
                        },
                        transport: {
                            read: {
                                url: "IndustryTrends.aspx/ChartData",
                                contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                                type: "POST"
                            }
                        }
                    });


And the definition of the web service is

<WebMethod()>
    Public Shared Function ChartData() As IEnumerable(Of BolIndustryChartDataItem)
        Dim c As New List(Of BolIndustryChartDataItem)
        c.Add(New BolIndustryChartDataItem("My name", 3,4,5))
        Return c
    End Function



...this all works fine.

But now I want to add a parameter to the read function in order to be able to read the correct data. I assumed that all I had to do was change the dataSource definition to:

   var dsprov = new kendo.data.DataSource({
                        schema: {
                            data: "d"
                        },
                        transport: {
                            read: {
                                url: "IndustryTrends.aspx/ChartData",
                                contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                                type: "POST",
data: { 
name: function() {
return "michael";
} }


                            }
                        }
                    });

....and then change the web service to 

<WebMethod()>
    Public Shared Function ChartData(byval name as string) As IEnumerable(Of BolIndustryChartDataItem)
        Dim c As New List(Of BolIndustryChartDataItem)
        c.Add(New BolIndustryChartDataItem("My name", 3,4,5))
        Return c
    End Function


....but this causes the web service to never get called. I know I missing something trivial here but I'e spend some time looking at it, tried a bunch of different things, and I can't figure out what.

Thanks!
Vivek
Top achievements
Rank 1
 answered on 27 Apr 2012
1 answer
86 views
Is there a way to turn off a widget once it has been applied?

So if I have a case like: 

$(this).kendoGrid(...)

I need to turn it off for a certain case. Is that possible?

Dimo
Telerik team
 answered on 27 Apr 2012
0 answers
104 views
Hi, I'm new to kendo and I downloaded kendo web and found no upload example on the examples/index.html.  Where can I find it please?  Thanks.

Update: Got it working, though still didn't see it as part of the examples folder.  Thanks.
ray
Top achievements
Rank 1
 asked on 26 Apr 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?