I have used SegmentedControl in my application and given two options in that . I want to show two separate list according to selection of options that means if I select first option , it should show respective list of items and if I select second option , it should show the other respective list of items.
I want to show some data from database in ListView if I select option first and some other data in listView if I select second option.
Please someone tell me how should I do this ?
There is two way to achieve this..
1)Use single listview and change datamodel according to selected segment
2)Use diff listview and visible/invisible particular listview according to selected segment..
Here sample code of second way.
SegmentedControl {
id: segmented1
Option {
id: option1
text: "Option 1"
value: "option1"
selected: true
}
Option {
id: option2
text: "Option 2"
value: "option2"
}
onSelectedIndexChanged: {
var value = segmented1.selectedValue
console.debug("Selected value: " + value);
if (value == "option1") {
listview1.visible = true;
listview2.visible = false;
} else if (value == "option2") {
listview1.visible = false;
listview2.visible = true;
}
}
}
Related
Im going through SwiftUI Controls in detail and writing example code for each init.
Theres two sets of inits for Picker.
One where you fill your list from an array etc. and what you pick goes into selection: binding.
But whats the second set of inits for?
Theyre under section 'Creating a picker for a collection'
I can fill the array from a collection using both these inits ok
But how do you get the selected item using the 2nd set of inits?
The selection: param is no longer a binding to an ivar but a Keypath to fill the list.
My question is how do I get the selected item using the 2nd set of inits.
See inits here:
https://developer.apple.com/documentation/swiftui/picker
For Picker there are 6 inits.
3 under 'Creating a picker'
these are ok. I fill the list from an array for example and store the selected item in a single result specified by the selection: param. It binds the result to one ivar.
There are also 3 inits under 'Creating a picker for a collection'
I got this to display the items from a collection
e.g. I modified the example code in the apple docs. The code in the docs doesn't compile so apple may be missing stuff.
import SwiftUI
enum Thickness: String, CaseIterable, Identifiable {
case thin
case regular
case thick
var id: String { rawValue }
}
//to use in ist must be Hashable
struct Border: Identifiable {
var color: Color
var thickness: Thickness
//Identifiable > Hashable > id > String
//var id: String { return "\(color.hashValue)" }
let id = UUID()
}
extension Color{
func colorName() -> String{
if self == Color.black{
return "black"
}
else if self == Color.red{
return "red"
}
else{
return "UNHANDLED"
}
}
}
struct CLCPickers_selection_FromCollection_View: View {
#State private var selectedObjectBorders = [
Border(color: .black, thickness: .thin),
Border(color: .red, thickness: .thick)
]
var body: some View {
VStack{
//------------------------------------------------------------------
Picker(
"Border Thickness",
sources: $selectedObjectBorders,
selection: \.thickness
) {
//------------------------------------------------------------------
//I added
//id: \.self
//Picker: the selection "thin" is invalid and does not have an associated tag, this will give undefined results.
//------------------------------------------------------------------
ForEach(Thickness.allCases,
id: \.self)
{ thickness in
Text(thickness.rawValue)
}
}
//------------------------------------------------------------------
Divider()
//------------------------------------------------------------------
//This just lists the colors in the arrays of Border
//QUESTION - how do I find out the currenly selected one?
//normaly selection: in the picker would be bound to the picked item
//but for this init selection: is a keypath
//selection: \.thickness
//so I can fill the Picker list using the keypath into the Border array.
//BUT HOW DO I FIND OUT THE CURRENTLY SELECTED ITEM?
//theres no binding?
//is there a .selectedItem property some where?
List(selectedObjectBorders) {
Text("\($0.color.colorName())")
}
}
}
}
Question was answered but poster removed it for some reason.
answer: this picker init which set the thinkness ivar of EVERY Border object in the collection.
To see the change I should have displayed the result to show thickness.rawvalue to see the change in every Border object
List(selectedObjectBorders) { border in
HStack{
Text("\(border.color.colorName())")
Text("\(border.thickness.rawValue)") //<<- will change when you select an item. All will match.
}
}
How do I prevent the next text block to inherit the same styles as the first one? If I add an heading and then press enter I would like it to be a paragraph on the next line, and not another heading.
You can use onKeyDown to detect when you press Enter, use Transforms or Editor API to insert new node with desired styling.
Refer:
https://docs.slatejs.org/api/transforms#transforms.insertnodes-editor-editor-nodes-node-or-node-options
https://docs.slatejs.org/api/nodes/editor#editor.insertnode-editor-editor-node-node-greater-than-void
You can have a custom plugin like this for the editor
const { insertBreak } = editor
editor.insertBreak = () => {
const { selection } = editor
if (selection) {
const [title] = Editor.nodes(editor, {
match: n =>
!Editor.isEditor(n) &&
Element.isElement(n) &&
(n.type === 'title')
})
if(title){
Transforms.insertNodes(editor, {
children: [{text: ""}],
type: 'paragraph'
})
return
}
}
insertBreak()
}
I have a list with up to 100 items. While filtering the list with a searchbar it takes some time for every letter.
How can I speed up the search?
One possible solution is to filter only after click the search button on the keyboard.
VStack {
SearchBar(text: $searchTerm, placeholder: "Suche")
}
List {
ForEach(gesetzestextTEMPO.filter {
self.searchTerm.isEmpty ? true : $0.titel1.localizedCaseInsensitiveContains(searchTerm)
|| $0.titel1.localizedCaseInsensitiveContains(searchTerm)
|| $0.artikel.localizedCaseInsensitiveContains(searchTerm)
|| $0.marginale.localizedCaseInsensitiveContains(searchTerm)
|| $0.absatz0.localizedCaseInsensitiveContains(searchTerm)
|| $0.absatz0litaz.localizedCaseInsensitiveContains(searchTerm)
})
{ item in
Part13(gesetzestextTEMPO: item, searchTerm: self.$searchTerm)
}
}```
Try the following:
List {
// ...
}
.id(UUID())
as proposed here: How to fix slow List updates in SwiftUI
I am attempting to disable future dates on a jQuery datepicker being utilized with Tabulator but to no avail.
var table = new Tabulator("#MyDiv", {
height: "100%",
layout: "fitDataFill",
columns: [
{ title: "Date Worked", field: "DateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
{ title: "Memo", field: "Memo", width: 144, hozAlign: "left", editor: "input" },
]
});
var dateEditor = function (cell, onRendered, success, cancel) {
var cellValue = moment(cell.getValue(), "MM/DD/YYYY").format("YYYY-MM-DD");
input = document.createElement("input");
input.setAttribute("type", "date");
input.style.padding = "4px";
input.style.width = "100%";
input.style.boxSizing = "border-box";
input.value = cellValue;
onRendered(function () {
input.style.height = "100%";
//$(input).datepicker({ endDate: new Date() });
$(input).datepicker({ maxDate: 0 });
input.focus();
});
function onChange() {
if (input.value != cellValue) {
success(moment(input.value, "YYYY-MM-DD").format("MM/DD/YYYY"));
} else {
cancel();
}
};
//submit new value on blur or change
input.addEventListener("blur", onChange);
//submit new value on enter
input.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
onChange();
}
if (e.keyCode == 27) {
cancel();
}
});
return input;
};
I have attempted a couple of fixes by tweaking the datepicker options list (e.g. maxDate and endDate) but nothing seems to work. The future dates on the datepicker are selectable regardless. Is this a Tabulator issue? Or, a jQuery issue?
I have found similar questions regarding use of the jQuery datepicker on other forums and the recommended solutions always seem to revolve around use of the maxDate and endDate options.
Any assistance is greatly appreciated.
It looks like there is an issue using the datepicker inside of the cell, that I couldn't figure out. An error is thrown about the instance data missing.
Here is an example using flatpickr instead of the jQuery datepicker.
https://jsfiddle.net/nrayburn/65t1dp23/49/
The two most important parts are including a validator, so that users cannot type in a date. (I don't think they ever could, but if somehow they do it will prevent invalid dates.). The other is using the maxDate or equivalent parameter from the date picking library when you create the date picker instance.
Here is a custom validator to prevent any dates in the future. (It may not handle time differences properly in this setup.)
function noFutureDate(cell, value){
const cellValue = moment(new Date(value));
const today = moment();
if (cellValue.diff(today) > 0){
return false;
}
return true;
}
You also have to create a custom editor. Here is what you specifically need for the date picker instance. You can get the rest from the fiddle, but the other parts aren't really related to a date picker specifically.
const input = document.createElement("input");
input.value = cell.getValue();
onRendered(function(){
flatpickr(input, {
maxDate: moment().format('MM/DD/YYYY')
})
input.focus();
});
I'm displaying my results on an interactive grid. I'd like to be able to select multiple rows and click an edit button that will open up an “edit” form. I am having a number of problems:
Retrieve the car IDs of the rows selected. (I am having trouble accessing column values, I can access item values)
Pass a collection or array of ids to the edit form.
Save the collection.
Added more code in answer box by accident...……..
I made some progress but I am a little stuck. I followed the oracle blog and it was vey helpful. So on the attribute of the region I added the following code:
function (config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
toolbarGroup.controls.push(
{
type: "BUTTON",
action: "updateCar",
label: "Edit Selected Cars",
hot: true,
});
config.toolbarData = toolbarData;
config.initActions = function (actions)
{
// Defining the action for activate button
actions.add(
{
name: "updateCar",
label: "Edit Selected Cars",
action: updateCar
});
}
function updateCar(event, focusElement)
{
var i, records, model, record,
view = apex.region("ig_car").widget().interactiveGrid("getCurrentView");
var vid = "";
model = view.model;
records = view.getSelectedRecords();
if (records.length > 0)
{
for (i = 0; i < records.length; i++)
{
record = records[i];
//alert("Under Development " + record[1]);
vid = vid + record[1] + "||";
apex.item("P18_CAR").setValue(vid);// This is not needed just to test
//the output
// call next page
// pass array as sql source or directly on page
}
}
}
return config;
}
This works. A button is displayed and when selected it gets the values from the interactive grid. The part I am stuck is how to call the next page and pass the multiple values (2 columns) to the page to be displayed and in a query to do an update.
Thank you if you can help me accomplish this!