Telerik Forums
Kendo UI for jQuery Forum
4 answers
3.1K+ 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
408 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
119 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
153 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
125 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
459 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
221 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
148 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
184 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
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Drag and Drop
Application
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?