Questions on Kendo UI for jQuery Forum

2 answers

190 views

Hello,

I just noticed with Kendo UI 2017.3.913 that app.showLoading(); now hides on its own. Is this correct, and what is the default timeout?

Thank you.

Application

answered on 22 Sep 2017

1 answer

126 views

How can i span the existing control to show 3 months in the same calendar control?

I want the calendar to display 3 months instead of 1.

Also, the user should be able to multi select the dates in these 3 months.

What is the way to implement this?

Thanks.

Calendar

answered on 22 Sep 2017

1 answer

815 views

Grid Pager in Panel keeps disappearing after collapsing and expanding the panel.

Hi I have a grid in a panel that is collapsible , After collapsing it once and expanding it back again the Grid pager keeps on breaking , it either completely disappears or shows few icons or color . I only get this issue on IE . Its like the color and icons don't load even if the elements are present and appears right after i hover on them.

<div class="panel-collapse collapse in" aria-expanded="true">
<div class="panel-body">

<div class="row">
<div class="col-md-12">
<div class="k-grid k-widget k-display-block k-reorderable" style="touch-action: none;" data-role="grid"><div class="k-grid-header" style="padding-right: 17px;">

<div class="k-grid-header-wrap k-auto-scrollable" style="touch-action: none;" data-role="resizable"><table role="grid"><colgroup><col style="width: 171px;"><col style="width: 866px;"></colgroup><thead role="rowgroup"><tr role="row"><th class="k-header k-with-icon" role="columnheader" aria-haspopup="true" style="display: none;" rowspan="1" scope="col" data-role="columnsorter" data-index="0" data-groupable="false" ><a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#"><span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">supplier Key</a></th>

<th class="k-header k-with-icon" id="eee9c67b-6b9f-406b-a7bb-0eff143ce03f" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-index="1" data-groupable="false" data-title="Number" ><a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#">

<span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">Number</a></th>
<th class="k-header k-with-icon" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-role="columnsorter" data-index="2" data-groupable="false" data-title="Name">
<a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#">
<span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">Name</a></th></tr></thead></table></div></div>

<div class="k-grid-content k-auto-scrollable"><table class="k-selectable" role="grid" style="touch-action: none;" data-role="selectable"><tbody role="rowgroup">
<tr role="row" data-uid="4ed3b8d6-6a84-4b24-a282-a06855c2c8be"><td role="gridcell" style="display: none;"></td><td role="gridcell">901176</td><td role="gridcell">Albert</td><td role="gridcell" style="display: none;">1155 Commerce Blvd</td></tr></tbody></table></div>

<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap" data-role="pager"><a tabindex="-1" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" aria-label="Go to the first page" href="#" data-page="1">
<span class="k-icon k-i-seek-w"></span></a><a tabindex="-1" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" aria-label="Go to the previous page" href="#" data-page="1"><span class="k-icon k-i-arrow-w"></span></a><ul class="k-pager-numbers k-reset"><li class="k-current-page"><span class="k-link k-pager-nav">1</span></li><li><span class="k-state-selected">1</span></li></ul><a tabindex="-1" title="Go to the next page" class="k-link k-pager-nav k-state-disabled" aria-label="Go to the next page" href="#" data-page="1"><span class="k-icon k-i-arrow-e"></span></a><a tabindex="-1" title="Go to the last page" class="k-link k-pager-nav k-pager-last k-state-disabled" aria-label="Go to the last page" href="#" data-page="1"><span class="k-icon k-i-seek-e"></span></a><span class="k-pager-sizes k-label"><span tabindex="0" title="" class="k-widget k-dropdown k-header" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-activedescendant="5f49d1c3-a6fa-40d8-b943-42d71e570d1a" aria-owns="" unselectable="on"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">20</span><span class="k-select" aria-label="select" unselectable="on"><span class="k-icon k-i-arrow-60-down"></span></span></span><select style="display: none;" aria-label="20" data-role="dropdownlist"><option value="10">10</option><option selected="selected" value="20">20</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select></span>items per page</span><a title="Refresh" class="k-pager-refresh k-link" aria-label="Refresh" href="#"><span class="k-icon k-i-reload"></span></a><span class="k-pager-info k-label">1 - 3 of 3 items</span></div></div>
</div>
</div>
</div>
</div>

Grid

answered on 22 Sep 2017

1 answer

320 views

Clean the Paragraph format

Hello!
I'm working with the version Kendo UI v2016.2.504.
Is there any way to clean the format of tool "Paragraph format" with the "clean Formatting" button ?

Editor

answered on 22 Sep 2017

1 answer

187 views

Touch vertical scroll grid Microsoft Edge

HI,

Touch scrolling does not work on a Microsoft Surface Pro in the Edge browser. In Chrome this is working fine. Is there any workaround to get touch scroll for Edge?

Kind regards,

Marco

Grid

answered on 22 Sep 2017

1 answer

147 views

Dashboard View resizing issue.

The first photo shows the set height and width every time the page is loaded. It reverts to that certain height/width.

We want to be able to change the pre-set height/width to a custom height/width.

We have noticed that the height/width is hidden on change. But we can not pin point where the pre-set height/width is and how to change it.

Window

answered on 22 Sep 2017

3 answers

269 views

TreeList Collapse event handler prevents node collapse

Inside of the TreeList's collapse event handler I put the line e.model.loaded(false); to force the TreeList widget to reload the nodes every time it expands. It doesn't work properly though and it prevents the TreeList from collapsing the node.

TreeList

answered on 22 Sep 2017

3 answers

163 views

Question about drag functionality

Hello,

I have a question about the drag functionality that allows to select multiple points in a series.

When I click and drag the cursor from left to right, I can see the rentangle that highlights my selection.

When I click and drag the cursor from right to left, the rectangle does not appear but the dragEnd event fires and the points Iwas trying to highlight were selected correctly. I just didn't have the visual feedback.

Is this normal or is there a problem with my chart?

Thank you in advance.

Charts

answered on 22 Sep 2017

2 answers

1.0K+ views

external bind data to mvvm grid after jquery ajax success

Hello, I have following external template script. there is MVVM grid id=" initially want it to get . In make jquery ajax call and on success when bind the grid the data show

kendo.bind($("#TSTGrid"), response); // when executed doesnt show data

ajax success code:

$.ajax({

type: "POST",

dataType: "json",

url: rootUrl("Fare/GetFareFamiliesMVVM"),

data: {

pricingVm: AirPricingWoPNRViewModel.Item.AirPricingVM.toJSON(), command:cmd

},

success: function (response) {

debugger;

kendo.bind($("#TSTGrid"), response);

kendo.ui.progress($("#AirPricingContainer"), false);

},

error: function (xhr, ajaxOptions, thrownError) {

debugger;

kendo.ui.progress($("#AirPricingContainer"), false);

}

});

template script:

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

<div class="row-fluid">

<div id="FareFilterHeader" class="span9">

<label class="vc-label">VC</label>

<input type="text" data-role="autocomplete" validationMessage="Validating Carrier is Invalid/Required" id="validatingcarrier"

data-min-length="2" data-value-primitive="false" data-highlight-first="true" class="validating-carrier-autocomplete"

data-text-field="airline_value" data-template="AirportItemTemplate" title="Validating Carrier" required="required"

data-bind=

"value: ValidatingCarrier,source: ValidatingCarrierSource, events: {change: ValidatingCarrierOnChange,open : ValidatingCarrierOnOpen,select : ValidatingCarrierOnSelect }"

/>

<label>Supplier</label>

<input type="text" data-role="autocomplete" class="supplier-autocomplete" required="required" name="supplierpricing" id="supplierpricing"

data-min-length="2" data-value-primitive="false" data-highlight-first="true" data-template="SupplierItemTemplate"

data-text-field="Name" title="Supplier" validationMessage="Supplier is Invalid/Required" data-supplier-msg="Supplier is invalid"

data-bind="value: OptionFilters.SupplierInfo, source: FareOptionsSupplierSource, events: {change: SupplierPricingOnChange,open : SupplierPricingOnOpen

,select : SupplierPricingOnSelect}}" />

<label class="fare-type-label">Fare Type</label>

<input data-role="dropdownlist" required="required"

data-text-field="Description" validationMessage="Fare Type is Invalid/Required" data-value-field="Value"

data-value-primitive="true" data-bind="value: OptionFilters.FareTypeCode,source: FareTypeSource ,

events: {change: FareTypeOnChange}" />

<input data-role="dropdownlist" class="fare-template"

data-text-field="Name" data-template="FareItemTemplate"

data-value-field="Id" required="required"

data-value-primitive="true"

data-bind="value: FareTemplateID,

source: PricingTemplateSource" />

<button class="k-button pricing-window-action-btn" data-bind="click: GetFareFamiliesByInformativePrice" type="button">Informative</button>

<button class="k-button pricing-window-action-btn" data-bind="click: GetFareFamiliesByBestPrice" type="button">Best</button>

<div data-role="grid" id="TSTGrid" class="fare-basis-grid"

data-columns='[

{ "field": "Segments", "title": "FareBasis"},

{"field": "Segments","title":"Cabin"},

{"field": "Segments","title":"Segment"},

{"field": "UnitQualifier","title":"PTC"},

{"field": "Quantity","title":"Qty"},

{"field": "SupplierCommercials.SupplierHeads.NetFareInclTax","title":"Total"},

{"title":"Action",command: [

{ text: "Select", click: AirPricingWoPNRViewModel.Item.SelectFareFamily, title: "Action"}

]}

]' data-row-template="FareFamilyRowTemplate"></div>

<div data-template="PricingCommercialTemplate" id="PricingCommercialContainer" ></div>

</div>

<div class="span3" id="SegPaxInfoDiv">

<div>

<b><i class="fa fa-plane passenger-plane-icon" aria-hidden="true"></i> Segments</b>

<table data-bind="source: Segments" id="Segments" data-template="SegmentTemplate" class="courierfont"></table>

</div>

<div class="passenger-div">

<b><i class="fa fa-users passenger-user-icon" aria-hidden="true"></i> Passengers</b>

<table data-bind="source: PNRPassengerInfos" data-template="PassengerTemplate" class="courierfont"></table>

</div>

</script>

Grid

answered on 22 Sep 2017

4 answers

144 views

Command Button States Sort

We have a command column in our grids that is sensitive to user level states. All users have a View button, but only the item owners have an Edit button, the remaining Edit buttons being hidden from view. When a sort is applied, the button connections are update correctly, but the button states are not conveyed with the sort. Therefore, the visible Edit buttons do not convey with their intended associated items.

While I view this potentially as a bug more so than a feature, I am hoping there is an intervention workaround that can be implemented which allows us to change the visibility or enabled state of the buttons to the properly associated columns. I also wanted to alert Telerik that the expected behavior is that button states should sort within the grid as well, rather than just the data or function binding.

For example, in a ten row grid, items 2 and 8 are visible, but the rest are hidden. When sort is applied to a column, 2 and 8 move to 1 and 5, and the associations are correct, but the Edit buttons for 2 and 8 are still visible, and the Edit buttons for 1 and 5 are not.

No code should be necessary with this explanation, but if more data is needed, please let me know. Any recommendations?

Bill Edwards

Grid

answered on 21 Sep 2017