Telerik Forums
Kendo UI for jQuery Forum
16 answers
660 views
I have a pretty problem that I've been searching for an answer to and haven't found anything like what I need.  I have a kendo grid bound to a model object for my view. The model is a custom object of type BatchHeader.  BatchHeader owns a collection of Transaction objects. Each Transaction object has XML data unique to a given transaction type so the data varies by transaction.  I have TranDetail objects derived from a base class, one derived type for each transaction type, each with it's own properties and validation code.

On the View page I need to display pending Batch/Transaction/Details in a nested grid format for review, potential correction, and posting.  The first two grid objects are pretty straightforward.  The third is turning into a real pain.  The third level has to be polymorphic as the transactions in a batch may not be homogeneous.  I can't pass in an object of type object because reflection won't get it's properties for iteration (tried that already).  I can't use the base class because then all I have access to are the common properties (tried that too), many of which (but not all) I want to suppress anyhow.  So far I haven't been able to figure out how to pass in any kind of an object to the third level grid that I can work with.

One thing I thought of is to transform the detail transaction object's data into a datarow and pass that in but I haven't figured out how to bind it, iterate it, and suppress the columns I don't want.  On top of that, I'm new to C# and MVC although I've been writing code for a very long time.  Each generic transaction object can have only one detail record so it's not like I need to mix types at once, but I'm not finding a way to pass in a known type at runtime.  The other problem of course is that it's not possible to know in advance what type of detail transaction requires presentation.

Is it possible to have multiple detail grids, one per tran type, and suppress the ones' I don't need in a given instance?  That seems inelegant.  I like the datarow idea but since the page already has a model I'm not sure how to bind the datarow to the third level grid either.

Any help willl be greatly appreciated!
Richard
Top achievements
Rank 1
 answered on 30 Jan 2014
3 answers
414 views
I have a problem that I am unable to solve. 

I have an input field that shown when a modalview is opened. When I click that text input field on my iPhone 5S, it opens the keyboard. But when I enter text it is not shown in the input field. I tried debuggin an give it a focus $("element").focus(), but that' didn't bring the keyboard nor gave the input field a focus.

When I put an input field inside the main view, I get focus when I tap it.

Any suggestions how to solve this.

Things I've done:
- Create another input field with another id (doesn't work)
- Tried to capture the click event via jQuery - it didn't trigger any click event!
- No filters are applied to the input field (there are, but I commented them out)
- The field react to the kendoTouch>Tap event

Things I've noticed:
- Tapping on a button in a modalview transfers the click to the elements behind it (using Kendo UI Mobile v2013.2.1021) - this is another problem that I haven't solved out yet

Steve
Telerik team
 answered on 30 Jan 2014
1 answer
53 views
Good afternoon everyone,

I wanted to ask if it's possible to make the grid fully editable client-side (without synchronizing with the back end on update/delete), and
then serialize the data source so that model binder can pick it up, preferably as a list of items.

The idea is to present to the user fully interactive grid as one part of the form, let the user fill out the rest of the required data and submit everything at once, including the list of entries.
Alexander Popov
Telerik team
 answered on 30 Jan 2014
1 answer
131 views
Hello, I'm wondering if there is a way to inject a function into the kendo grid to sort a column after page load.

My issue is we are using MVC fluent wrappers to build the site and the option I need isn't available (compare), and I want to know if I can inject a compare method into the column in question.
I've tried setting
$("#ReportsGrid").data("kendoGrid").columns[3].sortable.compare

but that doesn't affect anything at run time.

Any ideas?
Alexander Valchev
Telerik team
 answered on 30 Jan 2014
2 answers
189 views
Hi, 
I have been struggling to get the code below to work and need some advice. 
Currently I am testing out the Kendo MVVM and am relatively new to javascript so my apologies upfront if I am missing out on something obvious.

My current goal is to update my viewModel with a new JSON related object after a double-click row event occurs on my grid.

The difficulty that I am having is to assign a value to my viewModel outside of the initial declaration. I want to call a different function and for it have access to the viewModel to update it.

01.Main starting point for Javascript file
02. 
03.$(document).ready(function () {
04.    console.log("Loading");
05.    var viewModel = new TradeViewModel();
06.    LoadControls();  
07.    kendo.bind($("#view"), viewModel);
08.});
09. 
10. 
11.var TradeViewModel = function() {
12.    var self = this;
13.    
14.    var dateNow = getFormattedDate();
15.    self.viewModel = kendo.observable({
16.        search: {
17.            DateFrom: dateNow,
18.            DateTo: dateNow,
19.            TradeId: null,
20.            TradeStatus: "All",
21.            IsVoice: true,
22.            IsLive: false,
23.            BuyCompany: null,
24.            SellCompany: null
25.        },
26.        tradeDetailsSearch: {
27.            LiveTradeId: 0,
28.            EngineId: 0,
29.            ServerId: 0
30.        },
31.        tradeData: "SomeData"
32.    });
33.        self.viewModel.bind("change", function (e) {
34.        // This function works and is fine.
35.        TradeSearch(param1,param2);
36.        console.log(e.field);
37.        console.log("Event Binding finished");
38.}
39. 
40.var RefreshGrid = function (apiQuery) {
41. 
42.var ds = new kendo.data.DataSource({
43.        transport: {
44.            read: {
45.                url: apiQuery,
46.                dataType: "json"
47.            }
48.        }
49.    });
50. 
51.            $("#grid").kendoGrid({
52.              // standard binding to grid etc... this works fine
53.             });
54. 
55.           // This registers a double-click listener, in my case I get the row details back.
56.           $(".k-grid-content").dblclick(DoubleClickAction);
57.};

Now this next part is the area that I am having a problem trying to get right. 

1.function DoubleClickAction() {
2.    var grid = $("#grid").data("kendoGrid");
3.    var selectedRow = grid.dataItem(grid.select());
4.    console.log("You have double clicked on " + selectedRow.LiveTradeID);
5.     
6.   // And now the different approaches I have taken to set the viewModel data.

I get an error here and for each of the examples below this because it says viewModel is not defined. I am just not sure how to reference it for this function?

1.//... same function code as above.
2. 
3.    // I get an error here that says : Uncaught ReferenceError: viewModel is not defined
4.    var testTradeData = viewModel.get("tradeData");
5.    console.log(testTradeData);
6.};

01.//... same function code as above.
02. 
03.// Get JSON data based on Id
04. 
05. $.getJSON(apiQuery)
06.      // Handle success event.
07.     .done(function (jsonData) {
08.         if (jsonData.isEmptyObject)
09.             console.log("No data received");
10.         else {
11.             console.log("JSON data: " + jsonData);
12.                        
13.              var mappedTradeArray = $.map($.makeArray(jsonData), function(tradeData)
14.              {
15.                 return new GetTradeDetails(tradeData);
16.              });
17.             // I can see this correctly works and gets the data.
18.             console.log(mappedTradeArray);
19.     
20.             // ERROR : I get the same:
21.             //  'Uncaught ReferenceError: viewModel is not defined error' message
22.             viewModel.tradeData =mappedTradeArray[0];
23. 
24.             // ERROR: I can also try to set it from the documentation
25.            // that I have read on this website but get the same error :
26.             viewModel.set("tradeData",mappedTradeArray[0]);
27.         };
28.     });
29.    

Stewart
Top achievements
Rank 1
 answered on 30 Jan 2014
3 answers
312 views
Hi,

I'm attempting to make a grid (with batch editing mode set) always display the editor for a DropDownList column -- not just when the user clicks in the cell to enter edit mode. It seems that the only way to do this is via declarative binding with a ClientTemplate set for the field.

I've gotten it to work, but performance is quite poor when first initializing the grid, and when scrolling to a new page (with virtual scrolling on). Is there a quicker way to achieve this, or is the initialization process of the kendoDropDownList simply too heavy to be done for this many items at once?

Here is a jsfiddle that shows the issue:

http://jsfiddle.net/e983a/1/

Thanks,
Nick
Kiril Nikolov
Telerik team
 answered on 30 Jan 2014
7 answers
1.0K+ views
Specifically this would be useful for grouping and sorting dates.
Take 5/1/2013 at 12:00 PM and 5/1/2013 at 1:00 PM

I'd like to provide an object with .DateTime that I can format against.
#= kendo.toString(CreateDate.DateTime, 'M/d/yyyy hh:mm tt') #
I'd also like to provide a separate property within the object to use for grouping, which would probably be an integer like 20130501, as well as another integer for sorting such as 201305012500.

I'm not having much luck so far in the fluent MVC wrapper.

I can bind to my strongly typed object that I called a 'GridDate', and have my ClientRowTemplate displaying GridDate.DisplayValue, which I format within the property.
I tried overriding GridDate's ToString to return a format of yyyyMMdd, but it spin-freezes when I try to group the column.

I'm out of ideas, need help.
Alexander Popov
Telerik team
 answered on 30 Jan 2014
3 answers
309 views
Here is the [updated Fiddle][1] to test.
I am trying to setup grid with the in-line editing. Why saveRow method doesn`t affect update function in transport definition and doesn`t exit row from edit mode ?

Also please try to change var "can_edit" to false; Why this option doesn`t affect the field "day1"


  [1]: http://jsfiddle.net/Casufi/zK489/18/
Alexander Valchev
Telerik team
 answered on 30 Jan 2014
3 answers
167 views
Hi

Numeric scale could be set to aggregate by a number of rounded units just like baseUnit=fit/maxDateGroups does.
Does Kendo plan to provide this kind of functionality?
We would need to draw area charts on numeric scale and use shared tooltips.

A side note: "scatter" option is currently missing from series type documentation:
http://docs.kendoui.com/api/dataviz/chart#configuration-series.type

V
T. Tsonev
Telerik team
 answered on 30 Jan 2014
5 answers
269 views
In the following scenario the url passed in the change event (e.url) is wrong.

If you have an index.html page with several routes like in the samples, for example /, /view1, /view2, ..., normally e.url in the change event returns /, /view1, /view2, ...

Let's say now that this page is is tracked by AddThis (or any service which works by adding tracking codes as hash values), when you call index.html#.Ut-VwxDFJ9N, the route returned by the router's change event is .Ut-VwxDFJ9N instead of /, which is wrong.

The router keeps a list of routes which it could use to check the route returned in the url property change event (e.url).
Petyo
Telerik team
 answered on 30 Jan 2014
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
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
TextArea
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
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
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
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
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?