Telerik Forums
Kendo UI for jQuery Forum
2 answers
315 views
Hi,

I'm using a line graph with one serie:
(piece of the json object)
series:[
{
name:"Orange Tree",
data:[0.981422,0.981422,0.981422,0.981422,0.981422]}],
valueAxis:{labels:{format:{0}%}}

As you can see the value of the data is constant; but when the chart is rendered in the screen I get a lot of labels in the valueAxis:
1.2 1 0.8 0.6 0.4 0.2 0

How can I control the number of labels in the value axis?

Thank
Ignacio
Top achievements
Rank 1
 answered on 13 Nov 2012
1 answer
189 views
Hi, All.
Could you help me to resolve the problem "TypeError: source.unbind is not a function" whith popup editor for grid?
I do the page for edit user roles. The row grid present information about user and popup editor is used for editing user properties and user roles.
To show the list of roles in popup editor I add source template for Roles which show roles as list of checkboxes. The problem is that  jscript error occur after click cancel button.
Here it is the demonstration of the problem: http://jsfiddle.net/grenal/KGsSL/73/.
To reproduce error. Push edit button in grid and push cancel in pop up dialog. I expected dialog closing, but it does't.
steven
Top achievements
Rank 1
 answered on 13 Nov 2012
1 answer
141 views
Is it possible to skip the on edit tabbing.  I have a grid with image columns (that are a links).  The databound column is a boolean (so normally it would be a checkbox).  I want it to click and change the value.  I've written code to help me with this but it brings up a side affect that changes the values when I tab through the columns.  Here is example of the code I'm using (it's not exact).

OnDataBound:
$("#ReportGrid").keydown(function (ee) {
if (ee.which == 9) { // tab
ee.stopPropagation();
ee.preventDefault();
}
});
$('#ReportGrid').find('td.toggleImages').click(function (ee) {
var grid = $('#ReportGrid').data("kendoGrid");
grid.editCell($(this).parent());
});
OnEdit:
if (e.container.hasClass('toggleImages')) {
var acCell = $(e.container).find('a');
e.model.set(acCell.attr('name'), changeStyle(acCell));  //changeStyle changes the visual and flips the state.
}

If I place a break pint on each of these and hit "tab" to move into the image cell the OnEdit triggers before the KeyDown event.

Thoughts?
Petur Subev
Telerik team
 answered on 13 Nov 2012
5 answers
303 views
I have a grid that is grouped by an account id.  In this case it is valid for the end user to be able to change the account id that each row is associated with.  Right now, when the end user updates the account id via inline editing the data is updated but it is still in the previous grouping.

My question is how to do I force the row to move to the correct group, as well as update the group totals, after the account id has been changed?

Thanks,
Kyle Tillman
Alexander Valchev
Telerik team
 answered on 13 Nov 2012
1 answer
113 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
194 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
131 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
312 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
210 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
80 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
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
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
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
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?