I have problem with geting object props...
Here is my json file
formControlOptions: any[] = [
{
{ type: "INPUT",
value: "none,"
}
},
{
type: "SELECT_BOX",
value: "none",
options: ["select option 1", "select option 2", "select option 3"]
},
{
type: "RADIO_BTN",
value: "none",
options: ["radio option 1", "radio option 2", "radio option 3"]
}
];
Here is where I try to get data. I try to make JSON.parse() also, but always I get UNDEFINED
for (let v of this.formControlOptions) {
if (Object.keys(v) === "INPUT") {
console.log(v); // { INPUT: { value: "none" })
console.log(typeof v); // object
console.log(v.value); // undefined
console.log(Object.keys(v).value); // undefined
console.log(JSON.parse(v).value); // undefined
}
First thing, this is an array and as I understand you're trying to add mock data pending when actual API is ready. Object.keys returns an array containing all keys in an object. So Object.keys(v) === "INPUT" is false. v.value is undefined because v is an object that does not have value as a key. I think what you should be doing there is v.INPUT.value.
I suggest you change the structure of your array. So you have:
const formControlOptions: {
inputType: string;
label: string;
defaultValue: string | string[];
options?: string[];
}[] = [
{
inputType: "text",
label: "Input label",
defaultValue: ""
},
{
inputType: "select",
label: "Select label",
defaultValue: "",
options: ["select option 1", "select option 2", "select option 3"]
},
{
inputType: "radio",
label: "Radio label",
defaultValue: "",
options: ["select option 1", "select option 2", "select option 3"]
},
{
inputType: "checkbox",
label: "Checkbox label",
defaultValue: [],
options: ["check option 1", "check option 2", "check option 3"]
}
];
Then you can map over the array and use the inputType to set appropriate inputT types.
Related
how to give it default value how to give descriptor element (Types.Array) default value Fabric API Interface i try in many ways
import { Types } from "#teamfabric/xpm";
export default Types.Component({
id: "SERCH_VIEW",
label: "Serch View",
description: "Serch page ",
attributes: {
sort_by_values: Types.Array({
label: "please enter type of sorting",
default: [
{ option: "Most relevant" },
{ option: "Recently added" },
{ option: "Price (highest to lowest)" },
{ option: "Price (lowest to highest)" },
{ option: "A - Z" },
{ option: "Z - A" },
];,
children: Types.Shape({
children: {
option: Types.String({ label: "Type" }),
},
}),
}),
},
});
I have two dropdowns - where each dropdown should filter an objects key. The dropdowns should not exclude each other, or both values from dropdown should work indenpentedly from each other (ie both dropdown values does not need to be true for filtering).
When I select an item from the dropdown, I get one array with two objects, for each dropdown:
[
{
"name": "Type",
"value": [
"calibration"
],
"selected": [
{
"text": "calibration"
}
]
},
{
"name": "Function group",
"value": [
"1 - Test",
"2 - Programming"
],
"selected": [
{
"text": "1 - Test"
}
]
}
]
Above shows two objects, for the two different dropdowns - one with name "type" and one with "Function group".
The "value" in the object above is all of the dropdown items.
"selected" holds the selected item from the dropdown and the filtering should be based on that.In this case we have selected "calibration" and "Test".
The "type" dropdown should filter on the data "category" field while the "function group" should filter on "groupDescription" field. The data that needs to be filtered based on the mentioned keyes and selected values looks like this:
const mockData = [
{
operationDetails: {
id: '5119-03-03-05',
number: '41126-3',
description: 'Clutch wear, check. VCADS Pro operation',
category: 'calibration', //type dropdown
languageCode: 'en',
countryCode: 'GB'
},
functionDetails: {
groupId: 411,
groupDescription: 'Test', //function group dropdown
languageCode: '',
countryCode: ''
},
lastPerformed: '2021-02-22',
time: 20,
isFavorite: false
}
,
{
operationDetails: {
id: '5229-03-03-05',
number: '41126-3',
description: 'Defective brake pad',
category: 'calibration', ///type dropdown
languageCode: 'en',
countryCode: 'GB'
},
functionDetails: {
groupId: 411,
groupDescription: 'Programming', //function group dropdown
languageCode: '',
countryCode: ''
},
lastPerformed: '2020-01-22',
time: 20,
isFavorite: false
}
]
Playground with mock data and response example from dropdown here.
How to filter the data based on the values from the dropdown objects, for each key its responsible for?
It's not the prettiest code, but it does work. The one thing that you'd want to watch out for is the regex. It would be better to not have to parse and do a straight match like category, but if your cases are static then you should be able to figure out if this will work every time. It would also be nice to have a field key in filterDetails so you know which field to try to match in the actual data and you could program that in.
const filterDetails = [
{
name: "Type",
value: ["calibration"],
selected: [
{
text: "calibration",
},
],
},
{
name: "Function group",
value: ["1 - Test", "2 - Programming"],
selected: [
{
text: "Test",
},
],
},
];
const mockData = [
{
operationDetails: {
id: "5119-03-03-05",
number: "41126-3",
description: "Clutch wear, check. VCADS Pro operation",
category: "calibration", //type
languageCode: "en",
countryCode: "GB",
},
functionDetails: {
groupId: 411,
groupDescription: "Test", //function group
languageCode: "",
countryCode: "",
},
lastPerformed: "2021-02-22",
time: 20,
isFavorite: false,
},
{
operationDetails: {
id: "5229-03-03-05",
number: "41126-3",
description: "Defective brake pad",
category: "calibration", ///type
languageCode: "en",
countryCode: "GB",
},
functionDetails: {
groupId: 411,
groupDescription: "Programming", //function group
languageCode: "",
countryCode: "",
},
lastPerformed: "2020-01-22",
time: 20,
isFavorite: false,
},
];
console.log(
"filtered mockData: ",
mockData.filter(({ operationDetails, functionDetails }) => {
let groupDescriptionMatch = false;
let categoryMatch = false;
for (const details of filterDetails) {
if (
details.name === "Type" &&
details.selected[0].text === operationDetails.category
)
categoryMatch = true;
if (details.name === "Function group") {
let parsedGroup = details.selected[0].text.match(/[a-zA-Z]+/g);
if (parsedGroup[0] === functionDetails.groupDescription) {
groupDescriptionMatch = true;
}
}
}
return groupDescriptionMatch && categoryMatch;
})
);
Trying to put an array i've formatted into kendo UI Grid. This is the code I'm using.
$(document).ready(function (){
$("#grid").kendoGrid({
columns: [
{ title: "Ticket Number", field: "0" },
{ title: "Title", field: "1" },
{ title: "Created On", field: "2" },
{ title: "Modified On", field: "3" },
{ title: "Queue", field: "4" },
{ title: "Status", field: "5" },
{ title: "Account", field: "6" },
{ title: "Contact", field: "7" },
{ title: "Service Type", field: "8" },
{ title: "Issue Type", field: "9" }
],
dataSource: dataset
});
});
the variable dataset contains a list of columns and rows with the data I wish to display. When Running the code I get:
Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'>
I'm not sure what I'm doing wrong. The data in the array is in the correct order, and the columns are rendering on the page. but it dosen't seem to want to insert my data.
The reason for the "Invalid template" error is that it looks like you're trying to set the columns' fields by index, e.g.:
field: "0"
You're actually parsing strings here, though. Rather, you should provide the actual field names from your dataset:
<script>
$(function (){
var dataset = [
{ ticketId: "1000", title: "Lorem" },
{ ticketId: "1001", title: "Ipsum" }
];
$("#grid").kendoGrid({
columns: [
{ title: "Ticket Number", field: "ticketId" },
{ title: "Title", field: "title" }
],
dataSource: dataset
});
});
</script>
Here's a working sample.
That will probably work, but without an exacte sample of your dataset there is nothing further to assist with.
I have a kendo UI multiselect input. I am populating the values with a JSON object. I want the first value to be selected. Based on the documenation I have given as below but the value is still not selected.
$("#days").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: days,
filter: "contains",
value: [
{ text: "First", value: "1" },
]
});
var days = [
{ text: "First", value: "1" },
{ text: "Second", value: "2" },
{ text: "Third", value: "3" },
{ text: "Fourth", value: "4" },
{ text: "Fifth", value: "5" }
];
Because you have configured the dataValueField: "value" in the value array you need to provide the value property values of the days objects.
So you just need to write value: [ "1" ]:
$("#days").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: days,
filter: "contains",
value: [ "1" ]
});
Demo JSFiddle.
In case you are using server side binding, you can do this...
#(Html.Kendo().MultiSelect()
.Name("RolesVisibleToMultiSelect")
.Placeholder("Select Roles...")
.DataValueField("RoleId")
.DataTextField("RoleName")
.BindTo(Model.RequestDiscussion.RolesVisibleTo)
.Value(Model.RequestDiscussion.RolesVisibleTo.Select(r => r.RoleId).ToArray()))
I am trying to add client events to a telerik dropdownlist, but doing so makes it static. By static I mean it doesnt behave as a dropdown list anymore, Its doesnt respond when I click and hence cant view/select values. But as soon as I change the dropdown list to a combobox it works perfectly fine. It lets me click and view/select values.
Why is this happening? why can I add client events to a telerik combobox but not to a telerik dropdown list?
Here is how I populate Combo Box:
<%= Html.Telerik().ComboBox().Name("ComboBox")
.HtmlAttributes(new { #id = "ComboBox", #style = "width:104px;" })
.ClientEvents(events =>
{
events.OnDataBinding("ComboBox_onDataBinding");
})%>
function ComboBox_onDataBinding(e) {
var comboBox = $('#ComboBox').data('tComboBox');
comboBox.dataBind([
{ Text: "Product 1", Value: "1" },
{ Text: "Product 2", Value: "2", Selected: true },
{ Text: "Product 3", Value: "3" },
{ Text: "Product 4", Value: "4" },
{ Text: "Product 5", Value: "5" }
], true);
};
Here is how I populate drop-down list:
<%= Html.Telerik().DropDownList().Name("DropDownList")
.HtmlAttributes(new { #id = "DropDownList", #style = "width:104px;" })
.ClientEvents(events =>
{
events.OnDataBinding("DropDownList_onDataBinding");
})%>
function DropDownList_onDataBinding(e) {
var dropDownList = $('#DropDownList').data('tDropDownList');
dropDownList.dataBind([
{ Text: "Product 1", Value: "1" },
{ Text: "Product 2", Value: "2", Selected: true },
{ Text: "Product 3", Value: "3" },
{ Text: "Product 4", Value: "4" },
{ Text: "Product 5", Value: "5" }
], true);
};
Thanks in advance.
In your case, when you don't use Ajax or WebService client side databinding, you shouldn't configure OnDataBinding event handler. You need to configure OnLoad instead:
.ClientEvents(events => events.OnLoad("ddl_onLoad").OnChange("ddl_onChange")
handlers:
function ddl_onLoad(e) {
var ddl = $(this).data('tDropDownList');
ddl.dataBind([
{ Text: 'Product 1', Value: '1' },
{ Text: 'Product 2', Value: '2', Selected: true },
{ Text: 'Product 3', Value: '3' },
{ Text: 'Product 4', Value: '4' }
], true);
}
function ddl_onChange(e) {
//var ddl = $(this).data('tDropDownList');
console.log(e.value);
}
you're calling .dataBind() inside the OnDataBinding handler, which is just going to trigger the OnDataBinding event again, and again...
consider doing your client side databinding inside the OnLoad event or something