Questions on Kendo UI for jQuery Forum

2 answers

322 views

Hello,

I apologize if this isn't the correct place for this question, but wasn't sure how else to get help with it.

We are using Kendo.Mvc.Dll with our web page and we are running into some issue. We are receiving errors on two of our pages and can't figure out why it is failing. The following is the situation:

Web page deployed to machine -> Can't access the two pages, get the attached two errors (1 for each page) on any machine that access the website.
We have two developer computers that can get the error when debugging the solution.
We have two other developer computers that can NOT get the error when debugging the solution and the pages work fine with the grid.

Could anyone provide any direction/support on what may be the cause? I've check to make sure all the relevant stuff is installed on the machine and it appears that there isn't anything missing that I can tell between a working and non-working computer.

We are using Kendo.Mvc.dll - 2014.2.903.340 -> Kendo Web Extensions for ASP.NET MVC

Thank you!

Grid

answered on 11 Feb 2019

10 answers

2.6K+ views

Kendo MVC Grid - Refresh after AJAX Row Operation

Hello, I am using the Kendo MVC Grid and would like to know how to refresh the grid server-side after one of the AJAX row operations such as Destroy, Update, or Create. The reason for this is I have my columns "ranked" let's say from 0 to 100. A user can update the row that is ranked 100 to 3 and all items in between must be re-ranked to account for the update. This works fine server-side, but the client does not actually rebind. Is there a javascript method that I can run after the AJAX operation succeeds similar to the "Error" method used to trap and show AJAX errors?

Thank you as always,

Scott

Grid

answered on 11 Feb 2019

6 answers

231 views

Add the possibility to have a grip element for dragging a treeview node

Presently, the draggable zone is on the entire node. It would be nice to have the possibility to specify a dragging element in the node instead. You can see the dragging icon on my screenshot.

The initialization of the control could be something like that with the dragFilter option:

$("#categories-treeview").kendoTreeView({

dragAndDrop: true,

dragFilter: ".drag-handler"

});

This feature would answer some requested feature here:

I already have the solution working on my side and I can give it to Telerik anytime. This is as simple as 3-4 lines of code added to the TreeView control. I think it could be a great addition to the control.

TreeView

answered on 11 Feb 2019

2 answers

396 views

Updating DataSource - Destroy Method called after sync()

I have a grid that displays steps in a process. The users are allowed to move rows up or down, reordering the steps. If that happens a jquery method is called that updated the sequence numbers on each row. The sequence numbers are stored with the data in the database so at the end of this process, the sync() method is called. All works as expected except that as the Update method is called for each of the rows that was updated, the Destroy method will be called for one of the rows and the row is deleted from the database:

function resequence(grid) {

for (var i = 0; i < grid.dataSource.data().length; i++) {

grid.dataSource.data()[i].ActionSequenceNum = i + 1;

grid.dataSource.data()[i].dirty = true;

}

grid.dataSource.sync();

}

I can't seem to figure out why one row is also triggering the Destroy method.

Data Source

answered on 11 Feb 2019

5 answers

149 views

[Solved] hiding columns problem

I have a spreadsheet with the first 2 columns frozen.

I want to hide the non-frozen columns but when I do this the first column A is repeated in the non-frozen column section.

See the example dojo and image attached - click the "Hide non frozen columns" button to see the problem

Thanks

Tony

Spreadsheet

answered on 11 Feb 2019

5 answers

1.1K+ views

"no data found" localization

Hi team,

The noDataTemplate configuration option defaults to string "NO DATA FOUND."

It seems this is not localized in kendo.message.xx-XX.js

Please advise.

Best regards.

General Discussions

answered on 11 Feb 2019

7 answers

703 views

Multiple DropDownList MVVM with same DataSource

Hello, have Multiple DropDownList MVVM with same/shared DataSource. The problem is when selected a value from the earlier selected values get reset.
I tried having multiple as that even works. I also tried in this https://docs.telerik.com/kendo-ui/controls/editors/multiselect/troubleshoot/troubleshooting#selected-item-is-lost-when-bound-to-shared-datasource
That also Here is my code.

Inside Template:

<script id="SegmentSelectionGridRowTemplate" type="text/x-kendo-template" class="AirPricingDivScript">

<tr>

<td>

<label>#= data.SegmentDetailsToDisplay #</label>

</td>

<td>

<input data-role="dropdownlist" data-value-primitive="true" data-text-field="AirRequestToDisplay" data-value-field="ReservationRequestItemId"

data-bind="value: ReservationRequestItemID, source: SegList" />

</td>

</tr>

</script>

<div data-role="grid" id="SegmentSelectionGrid" class="margin-top" style="margin-left: 0px;" data-bind="source: AirPNRViewModel.Segments" data-toolbar="<div><i class='fa fa-plane' aria-hidden='true'></i> <b>Flight Segment(s)</b> </div>"

data-columns='[

{ "field": "PNRSegment", "title": "PNR Segment","width":"220"},

{"field": "RequestRoute","title":"Request Route","width":"80"}]'

data-row-template="SegmentSelectionGridRowTemplate"></div>

Script:

var viewModel = kendo.observable({

SegList :[{"ReservationRequestItemId":1716,"AirRequestToDisplay":"SIN-LAD 03-06-2018"},{"ReservationRequestItemId":1716,"AirRequestToDisplay":"LAD-SIN 13-06-2018"},{"ReservationRequestItemId":1716,"AirRequestToDisplay":"SIN-BKK 02-06-2018"}],

AirPNRViewModel:{

Segments: [

{"ReservationRequestItemID":0,"SegmentDetailsToDisplay":"TG 410"},

{"ReservationRequestItemID":0,"SegmentDetailsToDisplay":"ET 619"}

]

DropDownList

answered on 11 Feb 2019

6 answers

494 views

Grid MVVM: too much object makes the Grid work slow

Hello,
A sample would be hard to show because of complexity.

Scenario: I have a kendo-template which has Grid in MVVM . When i pass small array/dataSource it is ok but when array / dataSource size grows it slows down in operation. I have 28 array length object which is creating issue of slowness.

Grid data is set using below code:

var tstDataSource = new kendo.data.DataSource({

data: TstData1,

group: [{ field: "OptionFilters.PricingPccInformation.PCCCode", dir: "asc" }]

});

tstDataSource.read();

tstGrid.Items.set("Tsts", tstDataSource);

Below code is Grid template Code:

<script id="ImportPNRPricingFareFamilyRowTemplate" type="text/x-kendo-template">

<tr data-bind="attr: { class: savedtst }">

#= new Array($("\#ImportPnrPricingTSTGrid").data('kendoGrid').dataSource.group().length + 1).join('<td class="k-group-cell"></td>') #

<td>

#if(data.Segments!=null){#

#for(var x=0; x < data.Segments.length; x++){#

#if(data.Segments[x].FareBasis!=null){#

<div> #=data.Segments[x].FareBasis#</div>

#}else {#

<div></div>

#}#

</td>

<td>

<div>

#if(data.ReservationSystemInternalID>0){#

<div>#=data.ReservationSystemInternalID#</div>

#}else {#

<div></div>

#}#

</div>

</td>

<td>

#if(data.OptionFilters.Customer.Name!=null){#

<div>

#= data.OptionFilters.ValidatingCarrier.airline_value #

</div>

#}else {#

<div></div>

#}#

</td>

<td>

#if(data.OptionFilters.Customer!=null){#

<div id="customer_list">

#if(data.OptionFilters.Customer.Name!=null){#

#if(data.OptionFilters.Customer.ShortName!=null){#

<div class="customer-ellipsis" title="#: data.OptionFilters.Customer.Name #"> #=data.OptionFilters.Customer.ShortName# </div>

#}else {#

<div class="customer-ellipsis" title="#: data.OptionFilters.Customer.Name #"> #=data.OptionFilters.Customer.Name# </div>

#}#

#}else {#

<div></div>

#}#

</div>

#}else {#

<div></div>

#}#

</td>

<td>

<div id="supplier_list">

<input data-role="dropdownlist" data-text-field="ShortName" data-template="SupplierItemTemplate" style="width:280px"

required="required" data-supplier-msg="Supplier is invalid" data-value-field="SupplierID"

data-value-primitive="false" validationMessage="Supplier is Invalid/Required" data-auto-bind="true"

data-bind="value: OptionFilters.SupplierInfo,source: OptionFilters.SupplierSource" />

</div>

</td>

<td>

#if(data.OptionFilters.PricingPccInformation!=null){#

<div id="supplier_list">

#if(data.OptionFilters.PricingPccInformation.PCCCode!=null){#

<div title="#: data.OptionFilters.PricingPccInformation.PCCCode #"> #=data.OptionFilters.PricingPccInformation.PCCCode# </div>

#}else {#

<div></div>

#}#

</div>

#}else {#

<div></div>

#}#

</td>

<td>

#if(data.Segments!=null){#

#for(var x=0; x < data.Segments.length; x++){#

<div> #=data.Segments[x].CabinClass#</div>

#}#

</td>

<td>

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

data-text-field="Name" data-template="FareItemTemplate" style="width:350px"

data-value-field="Id" required="required" data-auto-bind="true"

data-value-primitive="true" validationMessage="Fare Template is Invalid/Required"

data-bind=

"value: FareTemplateID,source: FareTypeCodeSource, events: {change : PricingTemplateOnChange,dataBound: OnDataBoundPricingTemplate}"

/>

</td>

<td>

#if(data.Segments!=null){#

#for(var x=0; x < data.Segments.length; x++){#

<div><span> #=data.Segments[x].SegmentDetailsToDisplayPricing#</span></div>

#}#

</td>

<td>

#if(data.Segments!=null){#

#for(var x=0; x < data.Segments.length; x++){#

#if(data.Segments[x].Baggage.Unit!=null){#

<div> <span> #=data.Segments[x].Baggage.Quantity#</span> <span> #=data.Segments[x].Baggage.Unit#</span></div>

#}#

</td>

<td>

#var parentvm=data #

#if(data.UnitQualifier=='SC'){#

# var ptc = data.QueryPTC #

# var paxhtml = "<div style='text-align:left;width:max-content;' class='courierfont'>" #

# var number= parseInt(1);#

#for(var x=0; x < data.PNRPassengerInfos.length; x++){#

#if(ptc.search("CH")>-1) { #

# if(parentvm.PNRPassengerInfos[x].lkpPassengerType.search("CH") > -1){ #

# paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #

# number++ #

#}#

# if(ptc==parentvm.PNRPassengerInfos[x].lkpPassengerType){ #

# paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #

# number++ #

#}#

# paxhtml = paxhtml+ "</div>" #

#=data.UnitQualifier# -> #=data.QueryPTC# <span style="text-align:left;" data-role="tooltip" title="#: paxhtml#"><i class="fa fa-info-circle info-icon" aria-hidden="true"></i> </span>

#}else {#

# var ptc = data.QueryPTC#

# var paxhtml = "<div style='text-align:left;width:max-content;' class='courierfont'>" #

# var number= parseInt(1)#

#for(var x=0; x < parentvm.PNRPassengerInfos.length; x++){#

#if(ptc.search("CH")>-1) { #

# if(parentvm.PNRPassengerInfos[x].lkpPassengerType.search("CH") > -1){ #

# paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #

# number++; #

#}#

#}else {#

# paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #

# number=number+1; #

#}#

# paxhtml = paxhtml +"</div>" #

#=data.QueryPTC# <span style="text-align:left;" data-role="tooltip" title="#: paxhtml#"><i class="fa fa-info-circle info-icon" aria-hidden="true"></i></span>

#}#

</td>

<td>

<div data-bind="text: Quantity"></div>

</td>

<td>

<div

>#= data.PricingCommercialSkeleton.SupplierCommercials.SupplierHeads.CurrencyCode # #= data.PricingCommercialSkeleton.SupplierCommercials.SupplierHeads.NetFareInclTax # </

div>

</td>

<td>

<i class="fa fa-check hand text-primary pricing-window-buttons select" title="Select" data-bind="click: SelectFareFamily" aria-hidden="true"></i>

<i class="fa fa-list-alt hand text-primary pricing-window-buttons minirule" title="Mini Rule" style="display:none;" data-bind="click: SelectMiniRule" aria-hidden="true"></i>

<i class="fa fa-file-text hand text-primary pricing-window-buttons fullrule" title="Full Rule" data-bind="click: SelectFullRule" aria-hidden="true"></i>

# if((data.lkpStatus!="D")){ #

<i class="fa fa-trash text-danger hand pricing-window-buttons deletetst" data-bind="click: DeleteTst"></i>

#}#

<i class="fa fa-pencil-square-o hand text-primary pricing-window-buttons" style="display:none;" title="Edit" data-bind="click: EditFareFamily" aria-hidden="true"></i>

</td>

</tr>

</script>

<script id="TstGridTemplate" type="text/x-kendo-template">

<div data-role="grid" id="ImportPnrPricingTSTGrid" style="margin-left: 0px;margin-top: 4px;" data-bind="source: Tsts, events: {dataBound: TSTGridonDataBound}"

data-columns='[

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

{"field": "ReservationSystemInternalID","title":"TST/TSM Ref"},

{"field": "ReservationSystemInternalID","title":"VC"},

{"field": "OptionFilters.Customer.PCCCode", "title": "Customer"},

{"field": "OptionFilters.SupplierInfo.DisplayName", "title": "Supplier","width":290},

{"field": "OptionFilters.PricingPccInformation.PCCCode", "title": "PricingPCC"},

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

{"field": "OptionFilters.FareTypeCode","title":"PricingTemplate","width":360},

{"field": "Segments","title":"Segment" ,"width":300,"id":"grid-segment"},

{"field": "Baggage","title":"Baggage" },

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

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

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

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

{ text: "Select", title: "Action"}

]}

]' data-row-template="ImportPNRPricingFareFamilyRowTemplate" data-groupable="false" data-selectable="row"></div>

</script>

The 'Select' in Action, also renders a template which shows details of row (template code not shared). please find attached file for dataSource attached to grid .

MVVM

answered on 11 Feb 2019

5 answers

1.1K+ views

Switch change event not fireing

I am working on an old site that uses the old MVC wrappers(before kendo), not sure if that has anything to do wit my problem.
I have added several kendo switches to a page, I tried using the Kendo MVC wrappers but I just get a plain checkbox, so using the plan old kendo JavaScript widgets and they are showing up just fine. My problem is that the events don't fire.

my code

<div class="form-group">

@Html.LabelFor(Function(model) model.OrderCompleted, htmlAttributes:=New With {.class = "control-label"})

<div>

@Html.EditorFor(Function(model) model.OrderCompleted, New With {.htmlAttributes = New With {.class = "form-control kendo-switch", .data_change = "switchChange"}})

@Html.ValidationMessageFor(Function(model) model.OrderCompleted, "", New With {.class = "text-danger"})

</div>

resulting html

<div>

<span class="km-switch km-widget km-switch-off" style="-ms-touch-action: double-tap-zoom pinch-zoom;"><input name="OrderCompleted" class="form-control kendo-switch check-box km-widget" id="OrderCompleted" type="checkbox" value="true" data-role="switch" data-val-required="The OrderCompleted field is required." data-val="true" data-change="switchChange"> <span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: 0px;"></span></span> <span class="km-switch-container"><span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);"> <span class="km-switch-label-on">YES</span> <span class="km-switch-label-off">NO</span> </span> </span></span><input name="OrderCompleted" type="hidden" value="false">

<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="OrderCompleted"></span>

</div>

<script>

function setBoolean() {

if ($(".kendo-switch").length) {

$(".kendo-switch").kendoMobileSwitch({

onLabel: "YES",

offLabel: "NO"

});

}

function switchChange(e) {

alert()

// alert(e.checked)

// alert(e.id)

}

setBoolean()

</script>

Thanks

Switch (Mobile)

answered on 11 Feb 2019

1 answer

200 views

Kendo Directory upload in IE browser

Hi Team,

Am using kendo directory upload, it works in chrome browser but not in IE.
either am looking for kendo drag and drop or in RAD - explorer to make it work in IE.

Upload

answered on 08 Feb 2019