Telerik Forums
Kendo UI for jQuery Forum
2 answers
190 views
I can't bring window to front by touching neither titlebar, nor content area
http://jsfiddle.net/YreX4/
We are still on 2012.3.1114 (an upgrade requires long scrupulous testing)
Same behaviour on android (4.0) and iOS5
On desktop you can see this in latest Chrome by enabling "emulate touch events" in developer tools.

Is it a bug? Are there any workarounds?
Dimo
Telerik team
 answered on 30 Oct 2013
2 answers
759 views
I have a kendo grid (batch editable) with a detailTemplate. My detail template has two drop down lists (SubItem, and SubItemSerial). The SubItem is not showing the correct value when template is expanded.  Also when the value is changed on first drop down, in the change event, I set() the correct value on the grid's model. But as soon as I do this, the detail template closes right away, which I don't want to happen.

I am assuming that people often want to set a value from a detail template, but I could not find a good example. Here is what I have so far:
001.function MrItemsGrid(mr_ID, grid_id, is_editable, default_billable) {
002.    var self = this;
003.    self.mr_ID = mr_ID;
004.    self.GRID_ID = '#' + grid_id;
005.    self.HANDLER_URL = "/MaterialRequestItem";
006.    self.IS_EDITABLE = is_editable;
007.    self.DEFAULT_BILLABLE = default_billable;
008. 
009.    self.mr_source = new kendo.data.DataSource({
010.        batch: true,
011.        filter: [],
012.        serverPaging: true,
013.        serverSorting: true,
014.        serverFiltering: true,
015.        serverGrouping: true,
016.        serverAggregates: true,
017.        type: "aspnetmvc-ajax",
018.        pageSize: 50,
019.        schema: {
020.            data: "Data",
021.            total: "Total",
022.            errors: "Errors",
023.            model: {
024.                id: "MaterialRequestItemId",
025.                fields: {
026.                    MaterialRequestItemId: { type: "string" },
027.                    MaterialRequisitionId: { type: "string", defaultValue: self.mr_ID },
028. 
029.                    ItemID: { type: "number", defaultValue: 0 },
030.                    ItemName: { type: "string", defaultValue: "" },
031. 
032.                    SubItemId: { type: "number", defaultValue: 0 },
033.                    SubItemName: { type: "string", defaultValue: "" },
034. 
035.                    SubItemSerialId: { type: "number", defaultValue: 0 },
036.                    SubItemSerialNumber: { type: "string", defaultValue: "" },
037. 
038.                    BusinessPartnerID: { type: "number", defaultValue: 0 },
039.                    BusinessPartnerName: { type: "string", defaultValue: "" },
040. 
041.                    Description: { type: "string" },
042. 
043.                    Price: { type: "number", defaultValue: 0 },
044.                    Quantity: { type: "number", defaultValue: 0, validation: { required: true, min: 0 } },
045.                    Total: { type: "number", defaultValue: 0 },
046.                },
047.            }
048.        },
049. 
050.        transport: {
051.            prefix: "",
052.            read: {
053.                url: self.HANDLER_URL + "/Read?mrId=" + self.mr_ID,
054.                type: "GET",
055.                cache: false,
056.            },
057.            update: {
058.                url: self.HANDLER_URL + "/Update",
059.                type: "PUT",
060.            },
061.            create: {
062.                url: self.HANDLER_URL + "/Create",
063.                type: "POST",
064.            },
065.            destroy: {
066.                url: self.HANDLER_URL + "/Destroy",
067.                type: "DELETE",
068.            }
069.        },
070. 
071.        error: GridCommon.showCallBackError
072.    });
073. 
074.    self.items_src = new kendo.data.DataSource({
075.        transport: {
076.            read: {
077.                url: self.HANDLER_URL + "/GetItems",
078.                dataType: "json",
079.                type: "GET"
080.            }
081.        },
082.        error: GridCommon.showCallBackError
083.    });
084. 
085.    self.vendors_src = new kendo.data.DataSource({
086.        transport: {
087.            read: {
088.                url: self.HANDLER_URL + "/GetVendors",
089.                dataType: "json",
090.                type: "GET"
091.            }
092.        },
093.        error: GridCommon.showCallBackError
094.    });
095. 
096.    self.itemDropDownEditor = function(container, options) {
097. 
098.        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemName" data-bind="value:' + options.field + '"/>')
099.            .appendTo(container)
100.            .kendoComboBox({
101.                autoBind: false,
102.                serverFiltering: false,
103.                select: "",
104.                optionLabel: { ExtendedItemName: "", ItemID: 0 },
105.                dataSource: self.items_src,
106.                filter: "contains",
107.                change: function(e) {
108.                    options.model.set('ItemID', e.sender.dataItem().ItemID);
109.                }
110.            });
111.    };
112. 
113.    self.vendorDropDownEditor = function (container, options) {
114. 
115.        $('<input required data-text-field="BusinessPartnerName" data-value-field="BusinessPartnerName" data-bind="value:' + options.field + '"/>')
116.            .appendTo(container)
117.            .kendoComboBox({
118.                autoBind: false,
119.                filter: "contains",
120.                select: "",
121.                serverFiltering: false,
122.                optionLabel: { BusinessPartnerName: "", BusinessPartnerID: 0 },
123.                dataSource: self.vendors_src,
124.                change: function(e) {
125.                    options.model.set('VendorId', e.sender.dataItem().BusinessPartnerID);
126.                }
127.            });
128.    };
129. 
130.    self.updateTotal = function (e) {
131.        var r = e.values.Price ? e.values.Price : e.model.Price;
132.        var q = e.values.Quantity ? e.values.Quantity : e.model.Quantity;
133.        e.model.set('Total', q * r);
134.    }
135. 
136.    self.init = function () {
137. 
138.        var tools = null;
139.        var row_commands = null;
140.        if (self.IS_EDITABLE) {
141.            tools = [
142.                { name: "save", text: "Save" },
143.                { name: "create", text: "Add" },
144.                { name: "cancel", text: "Cancel" }
145.            ];
146.            row_commands = [{
147.                name: "destroy",
148.                template: '<a href="##" class="k-grid-delete"></a>'
149.            }]
150.        } else {
151.            $(self.GRID_ID).addClass('readonly');
152.        }
153.        $(self.GRID_ID).kendoGrid({
154.            toolbar: tools,
155.            save: self.updateTotal,
156.            detailTemplate: kendo.template($("#SubItem").html()),
157.            detailInit: self.detailInit,
158.            dataBound: function () {
159.//              this.expandRow(this.tbody.find("tr.k-master-row").first());
160.            },
161. 
162.            columns: [
163.                { field: "ItemName", title: "Item Type", editor: self.itemDropDownEditor },
164.                { field: "BusinessPartnerName", title: "Vendor", editor: self.vendorDropDownEditor },
165.                { field: "Description" },
166.                { field: "Price", title: "Price", format: "{0:c}", width: 90, editor: GridCommon.notEditable },
167.                { field: "Quantity", title: "QTY", width: 65, editor: GridCommon.numberEditor },
168. 
169.                { field: "Total", editor: GridCommon.notEditable, format: "{0:c}", width: 95 },
170.                { command: row_commands, width: 40 }
171.            ],
172. 
173.            pageable: true,
174.            scrollable: true,
175.            editable: self.IS_EDITABLE,
176.            navigatable: true,
177.            sortable: true,
178.            batch: true,
179. 
180.            dataSource: self.mr_source,
181.            saveChanges: GridCommon.saveAll
182.        });
183.    }
184.     
185.    self.items_src = new kendo.data.DataSource({
186.        transport: {
187.            read: {
188.                url: "/EquipmentEntry/GetItems",
189.                dataType: "json",
190.                type: "GET"
191.            }
192.        },
193. 
194.        error: GridCommon.showCallBackError
195.    });
196.     
197.    self.tempSubItemId = null;
198. 
199.    self.detailInit = function (context) {
200.        var detailRow = context.detailRow;
201.        var masterRow = context.masterRow;
202.        var mrModel = context.data;
203.        var grid = this;
204.        var viewCollection = grid.dataSource.view();
205. 
206.        var subItemContainer = detailRow.find(".sub-item");
207.        var subItemSerialContainer = detailRow.find(".sub-item-serial");
208. 
209.        $('<input required data-text-field="ExtendedItemName" data-value-field="ExtendedItemName" data-bind="value: ?ItemID" data-mr-sub-uid="'+ mrModel.uid +'"/>')
210.            .appendTo(subItemContainer)
211.            .kendoDropDownList({
212.                autoBind: false,
213.                dataTextField: "ExtendedItemName",
214.                dataValueField: "ItemID",
215.                dataSource: self.items_src,
216.                optionLabel: { ExtendedItemName: GridCommon.emptyText, ItemID: 0 },
217.                change: function (ee) {
218.                    var ds = $(self.GRID_ID).data('kendoGrid').dataSource;
219.                    var mrUid = ee.sender.element.data('mr-sub-uid');
220.                    var mr = grid.dataSource.getByUid(mrUid);
221.                    var newItem = ee.sender.dataItem();
222.                    mr.set('SubItemId', newItem.ItemID);
223.                    mr.set('SubItemName', newItem.ItemName);
224.                    //self.tempSubItemId = ee.sender.dataItem().ItemID;
225.                }
226.            });
227. 
228. 
229.        $('<input required data-text-field="Description" data-value-field="Description" data-bind="value:SubItemSerialId"/>')
230.            .appendTo(subItemSerialContainer)
231.            .kendoDropDownList({
232.                autoBind: false,
233.                dataTextField: "Description",
234.                dataValueField: "ItemSerialID",
235.                optionLabel: { Description: GridCommon.emptyText, ItemSerialID: 0 },
236.                dataBound: function () {
237.                    if (this.dataSource.data().length == 0) {
238.                        this.enable(false);
239. 
240.                        this.text("No items found");
241.                    }
242.                },
243.                dataSource: {
244.                    transport: {
245.                        read: {
246.                            url: "/EquipmentEntry/GetSerials",
247.                            dataType: "json",
248.                            type: "GET",
249.                            data: function () {
250.                                return {
251.                                    itemid: self.tempSubItemId,
252.                                    exclude_List: "0"
253.                                };
254.                            }
255.                        }
256.                    },
257. 
258.                    error: GridCommon.showCallBackError
259.                }
260.            });
261.    }
262.}
Any ideas?
Shea
Top achievements
Rank 1
 answered on 30 Oct 2013
2 answers
1.0K+ views
Hello, I am building some kind of single page application with Kendo UI controls included on each view;

Navigation between sites is written in javascript with no server page reload (main div container is re-rendering depending on the content via ajax call).

Main view contains Kendo.Window, and looks like this:

<div id="content">
    <!-- SOME PAGE CONTENT-->
</div>
 
<div id="Window">
    <div class="group">
        <div class="toolbar">
            <input type="WindowButton" id="Add" class="icon add" />
        </div>
        <!-- SOME WINDOW CONTENT-->
    <div>
</div>
My kendo window render function is placed in script file, which starts with the page, when it is "$(document).ready()"; here is the code:

jQuery("#Window").kendoWindow({
                "open": //some function,
                "refresh": //some function,
                "height": "340px",
                "width": "550px",
                "modal": true,
                "title": //some title,
                "draggable": true,
                "visible": false
            });


When I open this view for the first time and click the button to open the window - it becomes visible; when I click on "#WindowButton" it shows one alert "button clicked!";


Problem starts, when I go to other view, and back again to this first view (I remind: with no page refresh, it is single page app) - then, when I open the window, and click on "#WindowButton", alert "button clicked!" openes two times - one after the other. When I go to other view and back to this once again (for the 3rd time), it shows 3 times and so on;

I noticed that all kendo controls are rendering on every single view load, and the old ones aren't replaced by new rendered, but they are duplicating, below the code from google chrome developer tools:

First view opened for the first time:


01.<html>
02.  <head>...something here...</head>
03.  <body>
04.    <div id="content">
05.      SOMETHING HERE
06.    </div>
07.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
08.  </body>
09.</html>

Control is rendered on the 7th line - when I open window, property "display" changes its value from "none" to "block" - it is obvious and correct;

When I open the same view for the second time (without server page reload), my HTML looks like this:

01.<html>
02.  <head>...something here...</head>
03.  <body>
04.    <div id="content">
05.      SOMETHING HERE
06.    </div>
07.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
08.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
09.  </body>
10.</html>

As you can see, kendo window control is rendered two times, so when I call button, placed on a window, the action is called two times :/ (action is recognized by jQuery function when element with id="WindowButton" is clicked - now there are two same buttons with the same ID). When I go to this page 3rd, 4th, 5th and so on, I receive html with as many duplicates of kendo controls as many times I have been opening this view.

Ofcourse it is simplified code above, true code is much, much heavier.


When I click refresh button on my web browser - html shows one kendo window, and all is back set to normal.


What should I do to avoid this problem? Maybe should I manually delete kendo html elements from view "on view detach" in javascript function? Are there any detach functions for kendo UI controls?
Michal
Top achievements
Rank 1
 answered on 30 Oct 2013
3 answers
212 views
I am using a bar chart with stacked series in version v2013.2.726. The user can click on items in the legend to disable or enable them. I would like to determine which items are enabled.

I tried using the following property: kendoChart._sourceSeries[i].visible. But it does not seem to accurately reflect the enabled state of the legend item when in the click event handler.

Is there any way to do this?
Larry
Top achievements
Rank 1
 answered on 30 Oct 2013
5 answers
172 views
Is it possible to disable a scrollview via code? I use one as a selector, but once entry has started, it would be nice to disable it.
Kristian D. Dimitrov
Telerik team
 answered on 30 Oct 2013
1 answer
1.2K+ views
I am using WCF Data Service 5.6 to return JSON data:

DATA SERVICE CLASS
public static void InitializeService( DataServiceConfiguration config )
{
    config.SetEntitySetAccessRule( "*", EntitySetRights.AllRead );
    config.SetServiceOperationAccessRule( "*", ServiceOperationRights.All );
    config.DataServiceBehavior.MaxProtocolVersion= DataServiceProtocolVersion.V2;
}
[WebGet]
     public IQueryable<Tournament_Players_Result> Tournament_Players( int tournamentID )
     {
            return this.CurrentDataSource.Tournament_Players( tournamentID ).AsQueryable();
      }

Binding the data to a kendoGrid:

SCRIPT
var playersDataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
               read: {
                      url: http://localhost:41698/Tournament.svc/Tournament_Players?tournamentID=1,
                      dataType: "json"
                }
         }
});

$(document).ready(function () {
       $("#playersGrid").kendoGrid({
                dataSource: playersDataSource,
         });
});

Getting an error message:
ERROR
{"error":{"code":"","message":{"lang":"en-US","value":"Query options $orderby, $inlinecount, $skip and $top cannot be applied to the requested resource."}}}

Without the type="odata" in DataSource the service returns:
{"d":[{"__metadata":{"type":"TournamentModel.Tournament_Players_Result"},"PlayerID":1,"FirstName":"Tiger","LastName":"Woods","Handicap":null,"StartTime":"\/Date(1365674400000)\/","StartHole":"Mako #1"},{"__metadata":{"type":"TournamentModel.Tournament_Players_Result"},"PlayerID":2,"FirstName":"Adam","LastName":"Scott","Handicap":null,"StartTime":"\/Date(1365674400000)\/","StartHole":"Mako #1"},{"__metadata":{"type":"TournamentModel.Tournament_Players_Result"},"PlayerID":3,"FirstName":"Phil","LastName":"Mickelson","Handicap":null,"StartTime":"\/Date(1365675300000)\/","StartHole":"Mako #1"},{"__metadata":{"type":"TournamentModel.Tournament_Players_Result"},"PlayerID":4,"FirstName":"Henrik","LastName":"Stenson","Handicap":null,"StartTime":"\/Date(1365675300000)\/","StartHole":"Mako #1"},{"__metadata":{"type":"TournamentModel.Tournament_Players_Result"},"PlayerID":5,"FirstName":"Justin","LastName":"Rose","Handicap":null,"StartTime":"\/Date(1365676200000)\/","StartHole":"Hammerhead #1"},{"__metadata":{"type":"TournamentModel.Tournament_Players_Result"},"PlayerID":6,"FirstName":"Rory","LastName":"McIlroy","Handicap":null,"StartTime":"\/Date(1365676200000)\/","StartHole":"Hammerhead #1"}]}

Any help would be welcomed!

Thanks,

Greg.
Petur Subev
Telerik team
 answered on 30 Oct 2013
5 answers
975 views
I did not yet dwelve into the code.
Any provision in the framework to prevent XSS and SQL Injection?
Otherwise, what are recommended best practices?
EC
Top achievements
Rank 1
 answered on 30 Oct 2013
3 answers
78 views
When I run my application on my Lumia 920 or in Chrome using user agent "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)," all the kendo mobile controls are much too big and the application doesn't work at all (see attached screenshot). 

I've only included kendo.mobile.all.min.js, kendo.mobile.all.min.css, and the entire images file in my solution. Any ideas what might cause this?

I see the same issue when I override the user agent in Chrome on the kendo mobile demos site (http://demos.kendoui.com/mobile/m/index.html) but not on my Lumia 920.
Kamen Bundev
Telerik team
 answered on 30 Oct 2013
3 answers
349 views
The documentation is a bit spare on how custom rules should be handled in Validator. E.g., I am assuming that if you have multiple custom rules, they are all handled via decision trees in the "custom" configuration object. And if that is true, then I am assuming you have to do the same for the "message" configuration object if you want to have a different message for each custom rule.

However, it is not clear in the documentation how one should send the specific message text.

E.g., let's say we want to have two custom rules. 

  • One rule checks the "firstname" input field and fails if the value does not include "Tom".  On failure, we want the message for that field to be "Please be a Tom".
  • The other rule checks the "lastname" input field and fails if the value does not include "Smith". On failure, we want the message for that field to be "Please be a Smith".
Based on what examples I can find in the forums, my first guess at how one would do this looks like the following:

$("#myform").kendoValidator({
    rules: {
        custom: function(input) {
            var ret = true;
            if(input.is("[name=firstname]")){
                ret = (input.val() === "Tom");
            }
            else if(input.is("[name=lastname]")){
                ret = (input.val() === "Smith");
            }
            return ret;
        }
        },
    messages: {
        custom: function(input) {
            if( input.is("[name=firstname]") ) {
                    // want the message to say "Please be Tom"
                    return 'Please be a Tom'; // this does not work
                }
                else if ( input.is(["name=lastname]") ) {
                    // want the message to say "Please be Tom"
                    return 'Please be a Smith'; // this does not work
                }
            }
        }
});

The above code is for illustration and has not been actually tested.

However, I do know that the line  return 'Please be Tom'; fails to place any text in the error message.

My hunch is that there is a specific formatting function that must be used. Any hints or leads, here, for what that might be?

TIA
Michael
Top achievements
Rank 1
 answered on 30 Oct 2013
2 answers
178 views
Hi Everyone,
I'm quite new to Kendo UI Mobile on Icenium, and i'm currently trying to refresh the data i have on my mvvm viewmodel, basically i have a view model with a datasource and a function named showView: wich i would like to be called after the view is presented to the user, i tried seeking on the documentation but i wasen't unable to make raise data-show on my viewmodel. Could any one be so kind to provide me a working example, the viewmodel is created like the one on visual studio sample, with an added showView: function().. 
I need this because i need to load  fresh data from localStorage, do some stuff with it and populate the datasource to show a result on the screen.
 
Thanks
Sebastian
Sebastian
Top achievements
Rank 1
 answered on 30 Oct 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
Application
Map
Drag and Drop
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
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
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
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
AICodingAssistant
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?