Questions on Kendo UI for jQuery Forum

1 answer

138 views

Custom Tooltips Text

How to add custom tool tips text in any chart. Like i want two show hardcore title or number text.

Charts

answered on 29 Jul 2020

2 answers

262 views

Databinder : element undefined after calling clearAllFiles with kendoUpload

Hello,

I defined a custom "required" binding with kendo.data.binders :

kendo.data.binders.required = kendo.data.Binder.extend({
init: function(element, bindings, options) {
Kendo.data.Binder.fn.init.call(this, element, bindings, options);
},
refresh: function() {
var required = this.bindings['required'].get();

$(this.element).prop('required', !!required);
if($(this.element).getKendoUpload()) console.log('required changed');
}
});

And my input file :
<input type="file" data-role="kendoUpload" name="file0" data-bind="required: myCheckFunction">

The console.log display "required changed" correctly but after calling the clearAllFiles/clearFile/removeAllFiles/removeFile method of the kendo upload widget, the log is no longer displayed because "this.element" is undefined.

What the problem ?

I tried to define the required binding in kendo.data.binders.widget.required instead of kendo.data.binders.required but, I don't know why, even if the input is a widget, the event binding is called in the kendo.data.binders.required.

Thanks a lot.
moosh

MVVM

answered on 28 Jul 2020

9 answers

1.9K+ views

Grid Filter on a string column fails with '.toLowerCase is not a function'

Hi!

I'm getting an error when I try to use the filter row to filter a string value: (d.Status || "").toLowerCase is not a function

Grid:

01.$("#KendoParkingCards").kendoGrid({

02. dataSource: {

03. transport: {

04. read: {

05. url: window.BASE_URL + "Ajax/GetPassInfo",

06. type: "get",

07. dataType: "json",

08. data: { lookupType: lookupType.value(), lookupValue: $("#LookupValue").val() }

09. }

10. },

11. pageSize: 10

12. },

13. sortable: true,

14. resizable: true,

15. pageable: { pageSizes: true, buttonCount: 5 },

16. filterable: { mode: "row" },

17. selectable: "single",

18. columns: [

19. { field: "ParkingCardId", title: "Parking Card Id" },

20. { field: "StaffNo", title: "Staff Id" },

21. { field: "AirportPassNumber", title: "Airport Pass" },

22. { field: "Name", title: "Staff Name" },

23. //{ field: "Status", title: "Status", template: "#= resolveStatusName(Status) #" },

24.

{ field: "Status", title: "Status", template: function (dataItem) { return kendo.toString(resolveStatusName(dataItem.Status)); } },

25.

{ field: "PassIssueDate", title: "Pass Issued On", type: "date", template: "#= kendo.toString(PassIssueDate, 'dd-MMM-yyyy') #", width: 150 },

26.

{ field: "PassExpiryDate", title: "Pass Expired On", type: "date", template: "#= kendo.toString(PassExpiryDate, 'dd-MMM-yyyy') #", width: 150 },

27. { field: "ServiceCode", title: "Service", template: "#= resolveServiceName(ServiceCode) #" },

28. { field: "TerminalId", title: "Terminal", template: "#= resolveTerminalName(TerminalId) #" }

29. ],

30. change: function(e) {

31. var grid = e.sender;

32. var currentDataItem = grid.dataItem(this.select());

33.

34. $('#ParkingCardId').val(currentDataItem.ParkingCardId);

35. console.log($('#ParkingCardId').val());

36. }

37.});

Lines 23 and 24 both produces same error.

Function:

01.function resolveStatusName(statusId) {

02. var result;

03.

04. switch (statusId) {

05. case 0: result = 'Pending Apprvoal'; break;

06. case 1: result = 'Rejected By Admin'; break;

07. case 2: result = 'Manager Approval'; break;

08. case 3: result = 'Rejected By Manager'; break;

09. case 4: result = 'Send To Admin'; break;

10. case 5: result = 'Approved'; break;

11. case 6: result = 'Completed'; break;

12. case 7: result = 'Delivered'; break;

13. case 8: result = 'Cancel'; break;

14. case 9: result = 'Programmer'; break;

15. case 11: result = 'Expired'; break;

16. case 15: result = 'Pending Payments'; break;

17. case 16: result = 'More Info Required'; break;

18. case 17: result = 'Response Given'; break;

19. case 20: result = 'Pending Payment / Third Party'; break;

20. case 21: result = 'Pending Payment / Company'; break;

21.

22. default: result = '?';

23. }

24.

25. return result.toString();

26.}

At runtime, when I try to filter, I get the error. How do I resolve this?

Grid

answered on 28 Jul 2020

1 answer

139 views

Drag and drop on Double Click

Can we use draggable inside touchable?

So we can drag and drop the element with double click.

Thank you in advance

Drag and Drop

answered on 28 Jul 2020

4 answers

138 views

Position and SwipeToOpen Properties Doesn't effect widget

I can successfully change position and swipeToOpen properties of my widget but it doesn't change anything. Position is always left even when I initialize Position property as right. Likely, swipeToOpen is always true even it's property value is false.

I change these values dynamically with the value of a checkbox like below;

->drawerInstance.options.mini =document.getElementById(widgetID+"toggle").checked;

This line of code above changes mini properties and it works perfectly.

->drawerInstance.options.swipeToOpen =document.getElementById(widgetID+"canSwipe").checked;

On the other side, this line of code above changes drawerInstance value properly but I can still use swipe gestures to open the drawer.

Is there are any better ways to change the values of these properties?

Drawer

answered on 27 Jul 2020

6 answers

8.8K+ views

Excel export - line breaks in cell not appearing in spreadsheet

This may not be specific just to the grid, but when using the Excel export functionality from a grid, with the 2018 R2 release, line breaks within cells appear not to be present in the generated spreadsheet, when this was not happening with previous releases. The line breaks are definitely present in the data as /r/n characters (I can output it to the console and they appear there).

Has anyone else experienced anything like this?

Regards,

Charlie

Grid

answered on 27 Jul 2020

4 answers

380 views

Uncaught type error on custom widget binding for kendoNumericTextBox

Hi there,

I wanted to create my own custom widget binding for max configuration of numeric textbox. With that, I found this article which describes on how to bind the max value of a Kendo UI numeric textbox widget. The binding of the element that I want to achieve is like this

<input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" />

However, when I implement the provided code on this article https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#custom-widget-binding-in-typescript - Custom Widget Binding I got an exception when applyBinding function is called in kendo.all.js. Please see screen shot attached.

Below is my custom widget binding implementation:

var dataStoreData = {

max_lines: 20
max_orders: 50000
max_orders_per_request: 500

}

kendo.data.binders.widget.max = kendo.data.Binder.extend({
init: (widget, bindings, options) => {
// Call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: () => {
const that = this,
value = that.bindings["max"].get(); // Get the value from the View-Model

$(that.element).data("kendoNumericTextBox").max(value); // Update the widget
}
});

maxResultSettingsViewModel = kendo.observable({
data: dataStoreData,
settings: dataStoreData,
onDataValueChange: changeData => {
console.debug("onDataValueChange event is triggered.", changeData);
},
onClickEvent: clickData => {
console.debug("onClickEvent event is triggered.", clickData);
}
});

// Bind the container element with the observable object
kendo.bind($("#collapsible-content"), maxResultSettingsViewModel);

Did I implement the above code incorrectly? Or, do I need to upgrade to new version of Kendo UI library?. currently, I'm using version 2019.3.1023

Any help is greatly appreciated.

Cheers,

Junius

NumericTextBox

answered on 26 Jul 2020

1 answer

780 views

How to enable Word-Wrapping for DropDownList Items with Virtualization concept

Issue: If the value for a drop down is too large to be fully displayed in the drop down window, the value should be wrapped.

we are not able to get Horizontal Scrollbar in drop down list or not able to get word wrapping in drop down list items when we are using virtualization concept with drop down list. we are using pagination from server side.

I have attached two files here.

we need drop down like "Horizontal_Scrollbar_dopdown_image" this image file.

and the second image "dropdownlist word-wrapping not working" which is shown our issue.

Please response as soon as possible with solution.

we are keen awaiting to your positive response.

DropDownList

answered on 24 Jul 2020

1 answer

322 views

Tutorial or Document Link to learn kendo ui

10 Days back i join new company as a UI Developer and the project which i working is using kendo ui so project start 3 years back. My part is to fix the kendo ui design issue and jquery chart issue and extend the limit of the kendo ui. So i need tutorial or guide where i can learn kendo ui. Because i facing lots of issue regarding chart related jquery code problem and how to solve them.

General Discussions