Telerik Forums
Kendo UI for jQuery Forum
1 answer
86 views
Hi there, 

I checked the source code for Checkboxes(bool enabled) in the treeview builder and found the following:

 public TreeViewBuilder Checkboxes(bool enabled)
        {
            return Checkboxes(config => config.Enabled(true));
        }

Is it normal that even passing false the checkboxes are enabled? The parameter passed seems to never be used. I'm using 2012.2.913.
Vladimir Iliev
Telerik team
 answered on 13 Nov 2012
0 answers
143 views
I was looking for a PRISM like InteractionRequest to use modal dialogs with Kendo UI MVVM. I could not find one and ended up creating one. I'll share it here as it would be great if it could be improved on or even adopted in the framework. It's usage is as follows:
<div style="display: none;"
    data-role="window"
    data-bind='interactionRequest: { path: editOpportunityInteractionRequest, template: editOpportunityTemplate }'
    data-title="Edit"
    data-modal="true"
    data-visible="false">
</div>
I created a custom binding called interactionRequest. You bind it to an InterationRequest object in your view model and you need to provide the id of a template that will be rendered in the window. An InteractionRequest has a raise method that you pass a view model to be bound to the window and returns a promise that will be resolved when a result is set on the view model. I'm using TypeScript for this.
import App = module("./DataContext");
import Interactivity = module("./InteractionRequest");
import Models = module("./Models");
import ViewModels = module("./EditOpportunityViewModel");
 
export class OpportunitiesViewModel extends kendo.data.ObservableObject {
 
    editOpportunityInteractionRequest = new Interactivity.InteractionRequest();
    dataContext: App.DataContext;
 
    constructor (dataContext: App.DataContext) {
        super();
        this.set("dataContext", dataContext);
    }
 
    onCustomCreate(e: JQueryEventObject) {
        e.preventDefault();
        var opportunity = new Models.Opportunity();
        this.dataContext.opportunities.insert(0, opportunity);
        var viewModel = new ViewModels.EditOpportunityViewModel(opportunity, this.dataContext);
        this.editOpportunityInteractionRequest.raise(viewModel).done((viewModel: ViewModels.EditOpportunityViewModel) => {
            if (!viewModel.result) {
                this.dataContext.opportunities.remove(viewModel.opportunity);
            }
        });
    }
 
    onCustomEdit(e: JQueryEventObject) {
        e.preventDefault();
        var opportunity = <Models.IOpportunityModel>e.data;
        var viewModel = new ViewModels.EditOpportunityViewModel(opportunity, this.dataContext);
        this.editOpportunityInteractionRequest.raise(viewModel).done(viewModel => {
            if (!viewModel.result) {
                this.dataContext.cancelChanges();
            }
        });
    }
}


The InteractionRequest itself is very simple:
/// <reference path="..\lib\jquery.d.ts"/>
/// <reference path="..\lib\kendo.web.d.ts"/>
 
export class InteractionRequest extends kendo.data.ObservableObject {
    promise: JQueryPromise;
     
    raise(viewModel: { result: any; }) {
        this.trigger("raise", viewModel);
        return this.promise;
    }
}
The raise method expects that the raise event it triggers is handled by the interactionRequest custom binding that will set the promise on the InteractionRequest so that it may be returned by the raise method.

This is the custom binding code (which is still in JavaScript)
kendo.data.binders.widget.interactionRequest = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
        var that = this,
            binding = bindings.interactionRequest;
        that.template = kendo.template($("#" + binding.path.template).html());
        that.resultHandler = function (e) {
            if (e.field === "result") {
                that.element.close();
            }
        };
        that.closeHandler = function () {
            that.viewModel.unbind("change", that.resultHandler);
            var widget = that.element,
                container = widget.element.find(".k-edit-form-container");
            kendo.destroy(container);
            that.deferred.resolve(that.viewModel);
        };
        that.element.bind("close", that.closeHandler);
    },
    refresh: function (attribute) {
        var that = this,
            binding = that.bindings.interactionRequest,
            source = binding.source.get(binding.path.path);
        if (that.previousSource) {
            that.previousSource.unbind("change", that.raiseHandler);
        }
        that.raiseHandler = function (e) {           
            that.deferred = new $.Deferred();
            source.promise = that.deferred.promise();
            if (e instanceof kendo.data.ObservableObject) {
                that.viewModel = e;
            } else {
                that.viewModel = kendo.observable(e);
            }
            that.viewModel.bind("change", that.resultHandler);
            var widget = that.element;
            widget.content('<div class="k-edit-form-container"></div');
            var container = widget.element.find(".k-edit-form-container");
            container.html(that.template(that.viewModel));
            that.viewModel.validator = container.kendoValidator().data("kendoValidator");
            kendo.bind(container, that.viewModel);
            widget.center().open();           
        };
        source.bind("raise", that.raiseHandler);
        that.previousSource = source;
    },
    destroy: function () {
        var that = this,
            binding = that.bindings.interactionRequest,
            source = binding.source.get(binding.path);
        that.element.unbind("close", that.closeHandler);
        if (that.raiseHandler) {
            source.unbind("raise", that.raiseHandler);
        }
    }
});

It will open the window when the InteractionRequest triggers its raise event. It will bind the view model passed to the raise method of the InteractionRequest to the template rendered in the window. When a result is set on this view model, the window is closed and the deferred is resolved. In my case I set the result to true when an update button is clicked and to false when a cancel button is clicked.
import App = module("./DataContext");
import Models = module("./Models");
 
export class EditOpportunityViewModel extends kendo.data.ObservableObject {
 
    result: bool;
    validator: kendo.ui.Validator;
 
    constructor (public opportunity: Models.IOpportunityModel, public dataContext: App.DataContext) {
        super();       
    }
 
    update(e: JQueryEventObject) {
        e.preventDefault();
 
        if (!this.validator.validate()) {
            return;
        }
 
        this.dataContext.sync().done(() => {
            this.set("result", true);
        });       
    }
 
    cancel(e: JQueryEventObject) {
        e.preventDefault();
        this.set("result", false);
    }
}


I specifically think the custom binding could be improved with regards to the specification of the template to be rendered in the window. Preferably I set a custom data-template option on the div, but this does not currently get  passed into the custom binding. I will also need to figure out how to trigger validation on the dialog before I set the dialog result to true. 
EDIT: added validation
Remco
Top achievements
Rank 1
 asked on 13 Nov 2012
2 answers
90 views
I am looking for a way to target a specific window (in this case a modal pop up that I don't want any buttons on -- it is modal, after all).

I know I can do something like this:

div .k-window-action
{
    visibility: hidden;
}

but that gets all <div>s and I really don't want to do that.

The div in question:
<div id="ui-loadingPopUp">test!</div>

I've tried things like "div#loadingPopUp .k-window-action" but that doesn't work either.
Phil
Top achievements
Rank 1
 answered on 13 Nov 2012
0 answers
276 views
It works fine, but when you click after event it fires again, on ios safari.
On pc chrome works fine. 
Is any bug or just me? 
<a id="idMatch" data-role="button" data-click="cancelMatch">Cancel</a>

 function cancelMatch(e){
    e.preventDefault();
    mid = this.element.prop("id");
if (confirm("Are you sure to delete " ))  {
$.post('urldelete.php',
{matchid:mid},
function(data){
if (data['success']) {
alert(data['message']);
} else {
alert(data['message']);
}
}, "json");
 } 
    }

Juan Carlos
Top achievements
Rank 1
 asked on 13 Nov 2012
0 answers
170 views
I have a datasource that services an autocomplete control. Works great with just the basic service url defined for the read operation.

I would like to use the same datasource for other more complex queries for other controls on the page. For example, I'd like to add the $expand option to include associations but I don't want to add this complexity by default to slow down the autocomplete.

Can I modify the configuration of the datasource at runtime to service a number of controls with different needs or should I define separate datasources for each control?

For example how do I add / remove the expand property at runtime? ...

transport: {
    read: {
        url: "MyService.svc/Categories",
        data: {
            expand: "Products"
        }
    }
}

Can this be done with a filter?
Darryl
Top achievements
Rank 1
 asked on 13 Nov 2012
0 answers
58 views
Hi,

We are just trying out Kendo in developing a small html5 app for mobiles initially then moving to tablets.

We are using the Mobile version of the framework which does not support Windows Phone at this time.
It has been noted that Windows Phone will be supported at some stage in the future, do you have any indications as to when this might be?

On a related subject if I try to view the site in IE 10 on windows 8 for some reason the browser is always switching to Compatibility mode and the Kendo app initialisation fails to run - no styling is applied.
The doctype applied is simply <!DOCTYPE html> so it should be rendering in standards mode however it is not.
Any clues as to why this may be happening?

Finally with iPhone versions what resolution is used by the iPhone 4 and above as its display size?
In quick testing it appears that it is using 320x480 as the screen resolution for the app instead of the native 640x960 - is this correct?

Thanks
Gavin




Gavin
Top achievements
Rank 1
 asked on 13 Nov 2012
1 answer
541 views
Hi I'm just doing a simple task which is trying to get the selected row. I followed all the code stated in the demo site of the grid but unfortunately firebug is giving me an error saying that "this.select()" is not a method.

Here is the event for my grid.
>>>
.Events(events => events.Change(@<text> function(e){ OnChanged(e); } </text>))

And here is the script
>>>
    function OnChanged(e) {
        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

As you can see I've used the @<text> in Change event because if I only specify the function name as string like this one
Events(events => events.Change("OnChanged") 

Firebug is complaining that Onchanged can't be found.


David Beck
Top achievements
Rank 1
 answered on 12 Nov 2012
0 answers
87 views
Ok, so I was reading this example on the kendo ui blog.
http://www.kendoui.com/blogs/teamblog/posts/12-10-09/how_it_s_made_the_stock_history_demo.aspx

Looking through the source, I a set of two stylesheets referenced.
<link href="examples.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
I thought we could change the theme by changing one of the standard stylesheets such as
kendo.default.min.css

changed, to this
kendo.black.min.css

However, that doesn't seem to make any difference.  Are those two other stylesheets done with themebuilder?


AilWeb
Top achievements
Rank 1
 asked on 12 Nov 2012
7 answers
476 views
Does anyone have an example or css specifiers for making the TreeView show treelines ?

Something to do with k-first, k-in, k-last perhaps

Thanks
Richard
Richard Hyde
Top achievements
Rank 1
 answered on 12 Nov 2012
0 answers
161 views
$("#grid").kendoGrid({
                       columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                                field: "Title"
                            } , {
                                field: "phone",
                                title: "Phone Number",
                                template: '<input type=text name='phone' value=#phone# />'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                        ]
                    });
Rama
Top achievements
Rank 1
 asked on 12 Nov 2012
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?