Telerik Forums
Kendo UI for jQuery Forum
4 answers
3.0K+ views
Hello,

Is it possible to to change the value(recalculate) the cell of the "Total" column in the grid while the user types in a "Quantity"(input)?  This is a shopping list grid, there is a "Price" (bound column) and I need to calculate the Total dynamically based on the Quantity that the user will input. Maybe I'm doing it wrong, can you please point me to the right direction? Thanks,

var gridResult = $("#grid").kendoGrid({
    dataSource: {
        type: "aspnetmvc-ajax",
        //                     type: "json",
        transport: {
            read: "Home/Products_Read"
        },
        schema: {
            data: "data",
            total: "total",
            model: {
                id: "products",
                fields: {
                    Code: { editable: false },
                    Number: { editable: false },
                    Name: { editable: false },
                    Supplier: { editable: false },
                    Price: { editable: false, type: "number" },
                    Quantity: { editable: true, type: "number" },
                    Total: { editable: true, type: "number" }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    selectable: "row",
    sortable: true,
    pageable: true,
    columns: [
        { field: "Number", title: "Number", width: "100px" },
        { field: "Name", title: "Name" },
        { field: "Supplier", title: "Supplier", width: "100px" },
        { field: "Price", title: "Price", width: "100px", format: "{0:n}" },
        { field: "Quantity", title: "Quantity", width: "100px", template: '<input data-role="numerictextbox" data-bind="value: Quantity" data-max-value="100" class="quantityTextArea" />' },
        { field: "Total", title: "Total", width: "100px", template: "#= Price #" }
        ],
    rowTemplate:
        '<tr data-uid="#= Code #">' +
            '<td><span>${Number}</span></td>' +
            '<td><span>${Name}</span></td>' +
            '<td><span>${Supplier}</span></td>' +
            '<td><span>${Price}</span></td>' +
            '<td><input data-role="numerictextbox" data-bind="value: Quantity" data-max-value="100" class="quantityTextArea" /></td>' +
            '<td>#=Price*Quantity#</td>' +
        '</tr>'
});

Alexander Valchev
Telerik team
 answered on 18 Jul 2013
5 answers
333 views
Hi, 

The website I am creating is responsive and displays on mobile, tablets and PCs. I'd like to know if KendoUI web has support for touch gestures such as:

Tap
Hold - e.g. to load a context menu or something similar
swipe left
swipe right
swipe up
swipe down
pinch
rotate-left
rotate-right

At the moment I am looking at Hammer.js - http://eightmedia.github.io/hammer.js/

I would much prefer if Kendo supported these features. 


Can you please let me know if :
1. Kendo UI Web does support these gestures?
2. Can I somehow use Kendo UI Mobile and Web at the same time to support these features?
3. Will these features be supported in the future for UI Web? 

Thanks
Kiril Nikolov
Telerik team
 answered on 18 Jul 2013
1 answer
72 views
In the documentation, at http://docs.kendoui.com/api/web/editor , there are two spots where the tool is incorrectly spelled "fomatting", instead of the obvious "formatting". Just so you guys know.
Alex Gyoshev
Telerik team
 answered on 18 Jul 2013
2 answers
110 views
How do we enable the use of themes for the mobile kendo application?  I downloaded the Q2 bits, upgraded my mobile application, however I don't know how to tell the application to not automatically detect a platform.  I know how to override the platform...  is there a special value to use for the platform option for the kendo mobile application?  I didn't find anything for this in the documentation:  http://docs.kendoui.com/getting-started/mobile/application

app = new kendo.mobile.Application($(document.body), {
    initial: "rootView",
    transition:'slide',
    loading: '<h1 class="loading-message">Loading...</h1>',
    platform: null
 });

Petyo
Telerik team
 answered on 18 Jul 2013
1 answer
99 views
How can i close a kendo ui mobile view and also unload all its content. This view contains a youtube video that needs to be stopped / unload once a user click on the back button at the top of the view or on android using the physical back button on the device?Here is the code to my view, but i can't seems to get the view to close. When i use the back button the view goes away but it content does not unload.


<div data-role="view" id="showpostlayout" data-layout="defaultlayout" data-reload="true">
<div data-role="header">
    <div data-role="navbar"><a data-click="closePost" data-role="button" data-align="right">Close</a> </div>
  </div>      
  <div id="mypost">
 
 </div>
</div>
 
 
 
        <script>
         function closePost() {
 
             $("#showpostlayout").kendoMobileModalView("close");
 
        }  
        </script>
Petyo
Telerik team
 answered on 18 Jul 2013
7 answers
394 views
Hello,

I'm using the beta version of kendoui and i've made this code:

<div data-role='view'>
<video>
<source src="video.mp4" type="video/mp4" />
</video>
</div>

this code works perfectly on my computer browsers like (chrome,safari, firefox). The problem is, it wont work on my ipad safari.

is this a bug or my mistake?

really having a trouble here. hoping for your response. thanks.
Don
Top achievements
Rank 1
 answered on 17 Jul 2013
2 answers
1.0K+ views
Hi,
We create the grid and fill it with data dynamically at the page startup.

We first create a div like that:
$grid = $("<div></div>");
then we set the height:
$grid.filter('div').css("height", '300px')
then set all other parameters (datasource, column,...). After initialising the grid:
$grid.kendoGrid({});
The gird height do not fill all the container DIV height. If I use paging or filter, sorting, the grid reseized and fill the container DIV
I try to call this function after initialisation:
ConstV7.prototype.resizeGrid = function(grid) {
    var gridElement = grid,
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function () {
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

This function work perfectly if I set a breakpoint before calling it. The grid resized and fill the container DIV. But if I let the code run normally, I got the same problem like if the function was called too erlied. 
Any suggestion?


Pierre
Top achievements
Rank 2
Iron
Iron
 answered on 17 Jul 2013
3 answers
173 views
Is there a way to  represent the scale labels in kilos say 100k, 200k, 1m in the radial Gauge ?
Since I have to display pointer value 2985653 and scale labels are large.
Iliana Dyankova
Telerik team
 answered on 17 Jul 2013
5 answers
111 views
I am trying to figure out why why both paging and filters are not working (sorting is fine). But I am focusing on paging first.

I think I have two different paging problems:
1) If I click on any of the 4 paging arrows nothing happens and no javascript code is triggered.
2) If I type 2 + ENTER, the parameterMap function executes, but options.pageSize is 1 instead of 2.

I can provide more info if needed.

Thanks in advance for any help,
Simon
Kiril Nikolov
Telerik team
 answered on 17 Jul 2013
3 answers
126 views
If I have a a kendo listview\template bound to local or remote json...

When a googlebot comes by...nothing gets indexed right?
JohnVS
Top achievements
Rank 1
 answered on 17 Jul 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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
Gauges
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
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?