Questions on Kendo UI for jQuery Forum

2 answers

664 views

Hi,

I have a chart with big checkboxes for mobile.

Unfortunately it takes a lot of space on my chart so I'd like to reduce the gap between each legends. (see screenshot).

I tried to change legend.label.margin = 0 and legend.label.padding = 0, without success.

The code to generate my legend looks like this:

"legend": {
"position": "bottom",
"labels": {
"color": "#5d707c",
"font": title_legend_font_size,
"margin": 0,
"padding": 0,
},
"item": {
visual: function(e) {
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var rect = new kendo.geometry.Rect([0, 0], [350, 100]);
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
var cbSymbol = e.active ? "☑" : "☐";
var cb = new kendo.drawing.Text(cbSymbol, [0, 0], {
fill: {
color: labelColor
},
font: checkbox_font_size
});
var defaultVisual = e.createVisual();
layout.append(cb, defaultVisual);
layout.reflow()
return layout;
}
}
},

Charts

answered on 21 Jul 2017

2 answers

439 views

custom popup editor with customize width not in the center

Hii all
i making custom popup editor with customize width, so my problem is a window not in center, but widen to right
this my code :

...

editable: { mode: "popup", template: $("#popup_brand").html() },

edit: function(e) {

$(e.container).parent().css({

width: 900

});

},

so, how to make that template window into the center.

Thank

Grid

answered on 21 Jul 2017

5 answers

587 views

Spreadsheet Clear Undo/Redo History

Hi Kendo UI Team

I'm trying to customize my kendo spreadsheet and I am trying to find a way to clear a user's undo/redo history on a button click. I also want to do this without losing the undo/redo functionality. I noticed that there is an undoRedoStack in $('#SpreadsheetName').data("kendoSpreadsheet")._workbook, but when I pop from this undoRedoStack it gives an error when the user tries to undo/redo again.

Is there a way to clear the undo history in the spreadsheet?

Many thanks,

Jeff

Spreadsheet

answered on 21 Jul 2017

1 answer

223 views

Create a horizontal bar chart that grows from the right

How would I create a bar chart that grows from right to left, with the labels on the right as well? See attached which correlates to the below code but the bars are growing from the left (I'd like them to come from the right).

<div kendo-chart

k-series-defaults="{ type: 'bar', stack: true, categoryField: 'Company' }"

k-series-colors="util.config('seriesColors2')"

k-data-source="reference.ChartData"

k-value-axis="{ axisCrossingValue: [100, 0] }"

k-series="[{

name: 'Off',

field: 'CountOff'

}, {

name: 'Overdue',

field: 'CountOverDue'

}, {

name: 'Today',

field: 'CountToday'

}, {

name: 'Pending',

field: 'CountPending'

}]"

k-legend="{ visible: false }"

k-chart-area="{ height: 500 }"></div>

Charts

answered on 21 Jul 2017

3 answers

425 views

Kendo Window + Angular JS Position Problem

Window is okay after the first click at the button and is expected to be at the center of screen but on the next clicks, it doesn't go to the center and goes to other position.

See pictures for reference.

Code Below:

$scope.EditModal;

$scope.OpenWindow = function ()
{
$scope.DlgOptions = {
width: 1350,
visible: false,
draggable: false,
actions: [
"Close"
],
};

$scope.EditModal.setOptions($scope.DlgOptions);

$scope.EditModal.center().open();
};

Window

answered on 21 Jul 2017

5 answers

531 views

Keep focus while opening modal

Hello,

I need to open a modal when the user clicks on an editable cell.

I added in the cell template editable a button that opens a modal, but when it opens soon it closes.

Is there any way to keep the field editable while the modal is open?

Grid

answered on 20 Jul 2017

3 answers

144 views

Kendo MVVM binding 2 source in same remote template

   I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There are 2 source binding. Only 1st works i.e Segment . i dont know why . Even if you use <label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label>  still result would be same.

     Please tell what would be correct way

Note: ALL below code is in 1 file.

<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

<div>

<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>

<div style="text-align:center;">

<button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">

<i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save

</button>

<button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>

</div>

</script>

<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

<div data-bind="source: Segment" data-template="SegmentTemplate"></div>

<div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>

</script>

<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

<label data-bind="text: SegmentDetailsToDisplayPricing"></label>

</script>

<script id="PaxInfoTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

<div>

<label data-bind="text: Pax.PersonName"></label>

<input data-role="dropdownlist"

data-text-field="PassportNumber"

data-value-field="PassportNumberID"

data-bind="source: PossiblePassports" />

<input data-role="dropdownlist"

data-text-field="FrequentFlyernumber"

data-value-field="FrequentFlyernumberID"

data-bind="source: PossibleFrequentFlyers" />

</div>

</script>

General Discussions

answered on 20 Jul 2017

1 answer

134 views

autoFitColumns only works with Grid footer?

Hello,

we have noticed that the autoFitColumn(column) method of the Grid only works properly if the Grid displays a footer.

The autoFitColumn does a Math.max on the outerWidth of the column's header, body and footer, but if no footer is available, the Math.max return NaN, thus breaking the autoFitColumn correct behavior.

Is it possible to correct this?

Kind regards

Grid

answered on 20 Jul 2017

2 answers

356 views

Window - missing documentation about "sender"

The doc at: http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-close

for the close event, does not mention that the argument passed to the function will have a "sender" property, which is the kendoWindow object reference.

Window