I am new to Kendo UI and I am trying to implement a tree view using Hierarchial datasource in Kendo UI. Following is the code sample
var elementList= " {text:\"ABC\"},{text:\"DEF\",items:[{text:\"childDEF\"}]}";
var dataDefault=new kendo.data.HierarchialDataSource(
{
data:elementList
});
$("#grouptree").kendoTreeView({
dataSource:dataDefault
});
The text in elementList is formed dynamically. I have my result in an array and then the data from the array is stored in this variable. I need to show this in a tree hierarchy. But when I run it, I am getting "object doesn't support this property or method" error in the line "data:elementList".
AM i missing something here like some other parameters or is there any other way to do it?
You are giving the data source a string. Change elementList to a regular JavaScript array. You have also misspelled HierarchicalDataSource (there is a "c" missing). Here is the fixed code: http://jsbin.com/usoqoh/1/edit
Related
I am trying to make a Kendo ComboBox for Angular not crash with error "Prevent Expected value of type Object":
<kendo-combobox
formControlName="gender"
[data]="genders"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="false"
[filterable]="true"
[allowCustom]="true"
required
>
</kendo-combobox>
StackBlitz
The error can be obtained if the value is deleted and Tab is pressed (combo blur). In fact, by leaving an invalid value in the box, this error will occur.
I will explain below why I am using some settings:
textField and valueField - in my application I request complex objects and the selected value will provide some information to other form fields
[valuePrimitive]="false" - the selected value is a complex object
[allowCustom]="false" - I used this to allow the control to receive an initial value that is not among the list. In my application I am using server-side filtering with an empty initial list
When using in the application (server-side filtering) I also receive this error when pushing the arrow button, but I can get rid of this by either ensuring that initial value is within the list of values (ugly) or simply by removing the button.
Any idea about how to make this work?
According to Kendo UI for Angular you have to use a valueNormalizer function to convert what the user actually types into a valid object.
public valueNormalizer = (text: Observable<string>) => text.pipe(map((text: string) => {
return {
value: this.genders[this.genders.length - 1].value + 1, //whatever value
text: text
};
}));
Please check the updated Stackblitz and let me know if it is helpful.
valueNormalizer didn't work for me at all.
I went for a different solution (I can't post the code here because of security limitations in my company).
We want to allow an initial value and have to allow [allowCustomer]="true" because that initial value is not initially a part of the [data] array since we fetch it from the server.
I simply pushed the initial value to the [data] array and that fixes it. no need for [allowCustome]="true"
I've searched thru Corvid docs and Stack, not finding anything.
Is there a way to appendChild() in Wix Corvid(Code)?
EDIT: Wix does not allow DOM access directly. I assumed that people answering this would know i was looking for an alternative to appencChild and knew this method could not be used as is in Wix.
so to clarify: is there a way to add a child to a parent element using Wix's APIs?
It depends what you are trying to achieve,
the only thing off the top of my head is adding more items to a repeater
which you can do by first getting the initial data from the repeater, adding another item to array and reassign the data property of the repeater
const initialData = $w('#repeater').data
const newItem = {
_id: 'newItem1', // Must have an _id property
content: 'some content'
}
const newData = [...initialData, newItem]
$w('#repeater').data = newData
https://www.wix.com/corvid/reference/$w.Repeater.html#data
In Corvid, you cannot use any function which accesses the DOM.
Coming from one of the developers of Corvid:
Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can't try to trick it by using parent, window, top, etc.
Javascript files can be added to your site's Public folder, but the same limitations apply - no access to the DOM.
Read more here: https://www.wix.com/corvid/forum/main/comment/5afd2dd4f89ea1001300319e
I have a kendo combobox.
In one of the method I am fetching value from the combobox.
Is it possible to mock the kendoComboBox using jasmine.
var $categoryComboBox = $('#Category').data('kendoComboBox');
var selectedCategory = categoryComboBox.dataItem($categoryComboBox.select());
My jasmine test case is something like
var combo = spyOn($.fn, "data").and.returnValue(dummyElement);
var selectedCat = spyOn($.fn, "select").and.returnValue("1");
var selectedItem = spyOn(combo, "dataItem").and.returnValue({ 'ID': '1', 'ClaimTypeCode': 'WW' });
I am not sure what should I specify as dummyElement for this to work.
Thanks
Sounds like you haven't structured your JavaScript for unit testing. You should separate the DOM from the code, so you can test the code independently of a DOM.
Take a look at KendoUI MVVM library, as this allows you to set up a view model (which knows nothing about the DOM), bind it to the HTML elements and Kendo widgets, leaving you free to test the view model easily.
The way you have your JavaScript set up now is going to make it extremely hard to unit test. The only thing I can think of is to separate the code that gets the value from the Kendo widget from the code that does something with that value, and then test the latter, passing in the value you want to test. Still not really the right way to structure it, but it would work for now.
I java a similar nested json arrayobj, It may be from 1..X (not limited)
[{"id":"25","son": [
{"id":"26", "son": [
{"id":"28","son":[],"message":"my message 1","creationDate":"2016-05-26"},
{"id":"27","son":[],"message":"my message 2","creationDate":"2016-05-26"}
],
"message":"my message 3","creationDate":"2016-05-26"}
],"message":"my message 4","creationDate":"2016-05-26"}
]
I nedd to display it using Kendo, I am using listviewm but it just list the firt item, not the son tag items.
I am trying to implement a forum control. Can you suggest a way to do it?. Thank you in advance.
As far as I know, you won't be able to achieve what you want using a kendo listview because it wasn't designed to display hierarchical data (or nested data).
However, kendo do have other widgets that you can use to what you want to do. I think the TreeList is probably the one you are looking for. In order to use that widget, you will have to modify the data from a nested format to a id / parendId format. Using the sample data you provided, you should reformat the data like this:
var data = [
{ id:25,parentId: null, message:"my message 4",creationDate:"2016-05-26" },
{ id:26, parentId:25, message: "my message 3", creationDate:"2016-05-26"},
{ id:28, parentId:26, message":"my message 1",creationDate:"2016-05-26"},
{ id:27, parentId:26, message:"my message 2", creationDate:"2016-05-26"}
]
Depending on your need, you may also use a TreeView but this widget isn't designed to display multiple fields by default. You can also use a grid with a custom detail template but that required extra code to handle the detail grid template initialization.
I have a very big handsontable. I have dropdown columns defined, but, the values for the sources are retrieved with AJAX.
How can I set the "source" property of a "column" of type "dropdown" dynamically?
Regards!
You can, and should, use:
hotInstance.updateSettings({
columns: getNewColumns()
})
Where getNewColumns() would return an array of columns with the data and new source (or make the AJAX call from in here). That should do it!
Thank you for the answer ZekeDroid.
I was able to solve my issue.
First lets talk about a problem in the angular directive:
I am using the handsontable's angular directive. Two things happen: 1. If I associated the datarows attribute to a nested variale in the model, for example $scope.hot.data, then when I change the value of the model ( $scope.hot.data ) the grid ui is not refreshed. I am pretty sure this is an issue with the directive. Now: 2. Assume I use $scope.data and I update its value (this is the model right), then the grid ui is not refreshed either. I have to do something like hotInstance.updateSettings({data: newData}) as well.
I have to do both things; that is, update the model and call the update settings method. This is the only way I could get it work properly.
Note: if I do $scope.$apply() instead the updateSettings, I get an error in the console.