Questions on Kendo UI for jQuery Forum

4 answers

319 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

715 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

297 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

answered on 24 Jul 2020

3 answers

290 views

Using Protractor with Kendo

Does anyone have any examples of using Protractor with Kendo controls?

Examples of how to select an item in a Kendo Dropdownlist.
Enter text in to Kendo text input
etc

General Discussions

answered on 24 Jul 2020

3 answers

250 views

Use multiselect as custom editor in treelist

Hi I need to use a multiselect control in inline edit of a treelist object.

I've not found anythings usefull in forum about that, but there is somethings about the same request in grid control.

At this link there is a usefull documentation but when I use it in my treelist control, it doesn't works.

Cannot read property 'toLowerCase' of undefined
If edit in dojo the example linked above, and changing the definition of grid in kendoTreeList, appear this error.
Is the same I get in my project.

e.slice is not a function
Removing the definition as kendo.data.DataSource to the dataSource object, it "resolve" the first problem, and TreeList data are rendered correctly, but there are no items in multiselect column selector, cause this new error.

Thanks

TreeList

answered on 23 Jul 2020

5 answers

802 views

Line Chart series color from datasource

Hi,

How can I specify different series color for a Line chart in ASP.NET MVC using Razor? I'm binding to grouped data and the color is in a field of the model.

Thanks,
Ronald

Charts

answered on 23 Jul 2020

1 answer

269 views

AutoComplete load items from google spreadsheet

Hi,

I have following code:

01.var arrlistNamaKaryawan;

02.

03.google.script.run.withSuccessHandler(populateNamaKaryawan).getNamaKaryawanReceived();

04.

05.var dataSource = new kendo.data.DataSource({data : arrlistNamaKaryawan});

06.

07.// create a new widget instance

08.$("#employee").kendoAutoComplete({ dataSource: dataSource });

09.

10. // retrieve the widget instance

11. var empAutoComplete = $("#employee").getKendoAutoComplete();

12.

13.function populateNamaKaryawan(listNamaKaryawan){

14. console.log(listNamaKaryawan);

15. console.log(Object.keys(listNamaKaryawan));

16. console.log(Object.values(listNamaKaryawan));

17. console.log(Object.entries(listNamaKaryawan));

18. console.log(arrAnimal);

19. arrlistNamaKaryawan = Object.keys(listNamaKaryawan);

20. //arrlistNamaKaryawan = listNamaKaryawan;

21.}

22.

23.function getNamaKaryawanReceived(){

24. var ss = SpreadsheetApp.openByUrl(urlStockBarangIT);

25. var ws = ss.getSheetByName("Master Karyawan");

26. var data = ws.getRange(2, 2, 3, 1).getValues();

27.

28. var options = {};

29. data.forEach(function(v){

30. options[v[0]] = null; //convert to object

31. });

32.

33. console.log(options);

34. return options;

35.

36. //console.log(data);

37. //return data;

38.}

But my #employee AutoComplete still no data

Thank you

AutoComplete

answered on 23 Jul 2020

3 answers

1.4K+ views

Server side grouping - Web grid

Hi
I am busy doing a POC to figure out if Kendo Web Grid will fulfill all our requirements for a grid. I am currently stuck with server side grouping.
Please can I ask for some clarity on how to handle the response from the server for grouping.
The grid is not grouped by default, but they can choose to group by any of the columns..one or more..so the response needs to know this as well.
We are using the HTML/Js version of the grid with Ruby on Rails.

Our data is created from a backend query that is formatted into json.

eg: of our response with no grouping :
{"items":[{"countries":{"name":"South Africa","iso_alpha_2":"ZA","iso_alpha_3":"ZAF"}},...

The grid is initialized like this
dataGrid.kendoGrid({
dataSource: data_source,
groupable: true,
sortable: true,
pageable: {
refresh: true
},
columns: [
#{columns_json}
]
});
and our Datasource like this:
data_source = new kendo.data.DataSource({
transport: {
read: {
url: "#{data_table.url}",
dataType: "json"
},
parameterMap: function (options, operation) {
return options;
}
},
batch: true,
pageSize: 10,
serverGrouping: true,
serverPaging: true,
schema: {
data: function(response){
if (response.items) {
return response.items;
} else return null;
},
total: function (response) {
if (response.items)
return response.total_count;
else
return 0;
}
}
});

How must the server response be formatted if a person has grouped by a column? I am assuming the response format is different if it is grouped compared to if it isn't...how can that scenario be easily handled as well?

I hope I am clear in my request.

Grid

answered on 23 Jul 2020

6 answers

567 views

Is it possible to use the treeList filter programmatically

Is it possible to use the treeList filter programmatically ?

For example , let's say I have a treeList with a searchBox, once the user tap something in the searchBox , I programmatically apply the filter using directly the "contains" option and show the result to the user.

TreeList