lundi 30 novembre 2020

Listview with checkboxes Asp.net

I have a Listview with labels and checkboxes inside.How to restrict the selection mode of the checkbox to single.I want to select only one checkbox at a time.

Here is my code .aspx page


   <asp:ListView runat="server" ID="ListviewCategories">
                                        <LayoutTemplate>
                                            <table runat="server" id="table1">
                                                <tr runat="server" id="itemPlaceholder">
                                                </tr>
                                            </table>
                                        </LayoutTemplate>
                                        <ItemTemplate>
                                            <tr id="Tr1" runat="server">
                                                <td id="Td2" runat="server">
                                                    <asp:Label runat="server" ID="lblCategoryId" Text='<%#Eval("CategoryId") %>' Visible="false"></asp:Label>
                                                    <asp:Label ID="CategoryName" runat="server" Text='<%#Eval("CategoryName") %>' />
                                                </td>
                                                <td id="Td3" runat="server">
                                                    <asp:CheckBox ID="ChkCategory" runat="server" OnCheckedChanged="ChkCategory_CheckedChanged" AutoPostBack="true" />
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:ListView>





extjs fieldset checkboxToggle and collapsed is not showing

I've been working on showing fieldset and adding collapsed reservation date in ExtJS which is 6.2.0 version

the problem is that title and checkox is not showing up.

i put checkboxTgoogle : true, and title

and I checked in google console that two of these is in the items correctly

but it's not showing up. I don't know what is the probs of my codes. this is my code.

{
            xtype: 'fieldset',
            id:'reservation',
            checkboxToggle: true,
            title: G11N.getMessage('reservation'), 
            collapsed: true,
            name: 'reservation',
            autoHeight:true,
            layout: 'hbox',
            defaults: { padding: '10 10 10 0'},
            listeners: {
                expand : function(){
                    me.isReservation = true;
                },
                collapse : function(){
                    me.isReservation = false;
                }
            },
            items: [{
                xtype: 'datefield',
                name: 'reservationDate',
                fieldLabel: G11N.getMessage('date'),
                minValue: new Date(),
                labelAlign: 'right',
                labelWidth: 40,
                msgTarget: 'side',
                padding: '0 5 0 5',
                format: 'Y-m-d',
                listeners: {
                    select: function(combo, record, eOpts){
                        var form = me.down('form').getForm();
                        var dateObj = new Date(record);
                        var reservationTime = form.findField('reservationTime');
                        reservationTime.select();
                        if(dateObj.getDate() == new Date().getDate()){
                            reservationTime.setMinValue(new Date());
                        }else{
                            reservationTime.setMinValue('00:00');
                        }
                    }
                }
            }

thank you for reading my write.




how to bind the list of checkbox value and according to the condition that checkbox should be checked and fill a color in the label in Blazor

This is one group of Checkbox that i'm checking and trying to list.

<div id="ee">

                                    @if ((listordermodel) != null)
                                    {
                                        @foreach (var item in listordermodel)
                                        {
                                            <tr>
                                                <th>Order</th>
                                                <td>
                                                    @if (@item.OrderStatusGroupID == 100) //Have OrderStatusGroupID==200 ,then 300
                                                    {
                                                        <h3>Order</h3>
                                                        @if (@item.StatusTime != null)

                                                        {
                                                            <ul>
                                                                <li>
                                                                    <input type="checkbox" id="@item.OrderStatusID" @bind="@Checked" />
                                                                    <label class="checkbox-label" for="@item.OrderStatusID"> @item.OrderStatusType</label>
                                                                </li>
                                                            </ul>
                                                        }

                                                        else
                                                        {
                                                         <ul>
                                                          <li>
                                                             <input type="checkbox" id="@item.OrderStatusID" @bind="@item.OrderStatusType" disabled="disabled" />
        <label class="checkbox-label" for="@item.OrderStatusID"> @item.OrderStatusType</label>
    </li>
</ul>

                                                        }
                                                    }
                                                    }
                                                </td>
                                    <td></td>
                                    </tr>
@code
{ 
private bool Checked = false;
}

i'm having trouble bind the checkbox value as checked and i fill the group color that im taking from the database that i have already set .




How to fetch data with same name but in different interface in angular

I have two interface, one is cropFilter which is for checkbox filter and second interface is holding my data called Crop.

let me share my code for better understanding.

1. crop.model.ts

export class Crop { // Interface 1
    name: string;
    district: string
    subCategory: Subcategory[];
}

export class Subcategory {
    id: number;
    name: string;
   
}

export class CropFilter { // Interface 2
    name: string
    checked: boolean

}

2. cropFilter.ts

import { CropFilter } from "./crop.model";


export const CROPSFILTER: CropFilter[] = [
    {
        name: "Rice",
        checked: false
    }, {
        name: "Wheat",
        checked: false
    }, {
        name: "Barley",
        checked: false
    }
]

The above interface is for checkbox filtration.

3. crop.data.ts

import { Crop } from "./crop.model";

export const CROPS: Crop[] = [
    {
        name: "Rice",
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
            },
            {
                id: 2,
                name: "Ammamore",
            }
        ]
    },
    {
        name: "Rice",
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
            },
            {
                id: 2,
                name: "Ammamore",
            }
        ]
    },
    {
        name: "Wheat",
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Durum",
            },
            {
                id: 2,
                name: "Emmer",
            }
        ]
    },
    {
        name: "Barley",
        district: "Ratnagiri",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
            },
            {
                id: 2,
                name: "Barley Flakes",
            }
        ]
    },
    {
        name: "Barley",
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    }
];

This is the actual data. All I want to fetch data from crop.data.ts based on crop.filter.ts

for better clearance let me show you the html part as well :

1. all-trade.html

<div class="container" *ngIf="crops$ | async">
  <div *ngFor="let item of cropFilterCheckbox$ | async; let i = index">
    <mat-checkbox [checked]="item.checked" (change)="onChange($event, i, item)">
      
    </mat-checkbox>
  </div>

  <br />

  <h4>JSON data:</h4>

  <pre>
  
  <div *ngFor="let crop of cropFilterCheckbox$ | async"
  [hidden]="!crop.checked"
  >
  
</div>
<button type="button" class="btn">Basic</button>
</pre>
</div>

2. crop.service.ts

import { Injectable } from "@angular/core";

import { Observable, of } from "rxjs";

import { Crop, CropFilter, DistrictFilter } from "../shared/crop.model";
import { CROPS } from "../shared/crop.data";
import { CROPSFILTER } from '../shared/cropFilter';

@Injectable({
  providedIn: "root"
})
export class CropService {
  constructor() { }

  crops: Crop[] = CROPS;
  cropFilterCheckbox: CropFilter[] = CROPSFILTER;

  getAllCrops(): Observable<Crop[]> {
    return of(this.crops);
  }

  getCropFilter(): Observable<CropFilter[]> {
    return of(this.cropFilterCheckbox)
  }

  
  getCrop(name: string): Observable<any> {
    const crop = this.crops.filter(crop => crop.name === name)[0];

    return of(crop);
  }
}

The final output looks like this :

enter image description here

Now please guide me how to fetch data from crop.data.ts based on crop.filter.ts Like when user check Rice checkbox, its should fetch all the details of Rice present in crop.data.ts file and display on the screen.




Looping through table rows and getting the multiple checkbox values posted to controller in mvc

I have a 2D table being populated with respective roles of the members. Following is the structure of table Name|ReadRole|WriteRole|R/WRole ABC checkbox checkbox checkbox

Now there maybe n number of users in this table there will be a admin to manage the role access. So I need all the values of the respective users to be updated in DB when admin perform any changes. So I have written an javascript to read these values but the foreach loop is not working and I'm not able to post the data to controller. Can you please help me how can i pass a list from the view to the controller. Controller method is expecting List of UserRoles in the parameter from the View.

View code : will be in pictureCode snipt




Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer

I want to get Id of an entity which is an int type value; user will check/uncheck the checkbox, so I've converted that into boolean type. But I'm getting error. Here is the code-

 @for (int i = 0; i < Model.Count; i++)
    {
        <form asp-action="ReturnProduct" asp-route-id="@Model[i].HiddenPKVMId"
              onsubmit="return jQueryAjaxPost(this);">
                <div class="form-group">
                    <div class="col-md-6 offset-md-3">
                        <input type="checkbox" asp-for="@Convert.ToBoolean(Model[i].ProductVMName)" />
                    </div>
                </div>
            <input type="hidden" asp-for="@Model[i].HiddenPKVMId" />
        </form>
    }



Svelte: Change classes of checked checkbox (without creating variable for checkbox)

I am kind of new to Svelte and trying to solve this (seemingly trivial) problem with my UI:

I would like to change the classes of a checkbox and/or its parent element when the checkbox is checked. The Svelte docs tell me to create a boolean var for every checkbox and bind activation the classes to it: https://svelte.dev/tutorial/class-shorthand

but I have a random amount of checkboxes and many different types of checkboxes with different behaviour in styling and I don't want to create (or generate) a variable for every single checkbox.

Is there any elegant way in Svelte for changing the classes of checkboxes when they are indivually checked? (vanilla javascript instead if jquery if possible :) )

Cheers Some Svelte noob




Can you add the "prevent this page from creating additional dialogs" checkbox to an alert

I know how you can delete the prevent this page from creating additional dialogs, but I'm trying to add it. here is my code:

var a=true;while(a){alert(a);}

It does not put a check box after 1 alert. How do I add it back?




Please guide me in implementing checkbox filter in angular [closed]

I am struggling to add filter functionality in my web app, I tired the logic but I made the program exactly opposite what I wanted.

here I am sharing my stackblitz link:

https://stackblitz.com/edit/angular-ivy-9cygnt?file=src%2Fapp%2Fapp.component.html

All I want is, after page loading all the checkboxes should be uncheck but all the data should be display on the screen.

And when the user check the checkbox then filter should work. for example on amazon site when we check Apple then products related Apple is displayed on the screen...

I just want this, you can edit my code and feel free to apply required changes.




update state delay in checkbox, React

I have to objects sizes and newProduct , I need to set the available sizes using a checkboxes, it works fine but :

When I check two boxes, the state updates only in the first box , then when pushing the sizes object to the newProduct object , the state on the newProduct did not update until I check the third box (update only the value of the first box)

Here is my code :

function Products(){

    const [sizes, setSizes] = useState({
        s: false, m: false, l: false, xl: false, xxl: false, xxxl: false
    })
    const [newProduct, setNewProduct] = useState({
        productType : "", name : "", price : "", photo : "", sizes : sizes
    })

    const manageSizes = (e) => {
        
        const { name, checked} = e.target
        
        setSizes({...sizes, [name] : checked}) // late (1)
        
        setNewProduct({...newProduct, sizes : sizes}) // late (2)
        
    }
    return (
          {Object.keys(sizes).map((item, index) => (
                <label key={index} htmlFor={item}>{item}
                        <input 
                        type="checkbox"
                        checked={sizes[item]}
                        name={item} 
                        onChange={manageSizes}
                        />
                </label>        
          ))}
    )
}



Update sqlite database from recycler view adapter on checkbox state change

I want to update my SQLite database on checkbox state changes inside recycler view. All data is listed in recycler view. when i click the checkbox i want to call a databaase function to update the database

public class OverTimeAdapter extends RecyclerView.Adapter<OverTimeAdapter.MyViewHolder> {
    private Context context;
    private ArrayList otId,otDate,otShift,paymentStatus;
    private DatabaseHelper attendanceDB;

    OverTimeAdapter(Context context,ArrayList otId,ArrayList otDate,ArrayList otShift ,ArrayList paymentStatus){
        this.context =context;
        this.otId = otId;
        this.otDate = otDate;
        this.otShift=otShift;
        this.paymentStatus = paymentStatus;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        
    }

    @Override
    public void onBindViewHolder(@NonNull final MyViewHolder holder, int position) {
      
        if (paymentStatus.get(position)=="1"){
            holder.otListPayment.setChecked(true);
        }else {
            holder.otListPayment.setChecked(false);
        }
        OtDbId =String.valueOf(otId.get(position));
        holder.otListPayment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                boolean checked =holder.otListPayment.isChecked();
                if (checked){
                    payStatus=1;
                }else{
                    payStatus=0;
                }

                // call db update function from here
                // attendanceDB = new DatabaseHelper(this); This is error
                //attendanceDB.updateOvertime()   /*error*/
             
                
            }
        });
    }

    @Override
    public int getItemCount() {
        return otDate.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder{
        public CheckBox otListPayment;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            otListPayment =(CheckBox) itemView.findViewById(R.id.chk_ot_list_payment);

        }
    }
}

How can we initialize the DBHelper object and call the function? and from where(inside which function) i can do it?




LABEL act on checkbox only if it's unchecked (or viceversa)

I have a checkbox but its status must be changed clicking not on itself (it's hidden in my code) but onto two links/buttons.

I thought about possibility to use the for attribute, defined for label tag.

For example:

<input type="checkbox" id="field">
<label for="field">Enable it</label>
<label for="field">Disable it</label>

The problem with this approach is that I'd need that each one label have effect only if checkbox status is in its opposite meaning. In other words, first label should have effect only if checkbox is unchecked, and the second one in the inverse situation.

Ok, sure with js is quite simple but, I was thinking about if maybe there could be other approaches, maybe with pure html using some (for me) unknown attribute or something else.




How to disable checkbox of same row alone angular

I have a table where I have columns named Nobill and Bill. Both columns contain checkbox as values. What I need is that when I click the first checkbox of (first column value) Nobill column the same row value of Bill column should get disabled and this should be vice versa.

I already found out the solution by simply adding [disabled]="list.nobillChecked" to the no bill checkbox html and [disabled]="list.billChecked" to the bill checkbox html . This actually will help me do it. But I wanted a another way to do it. A different way to the exact same thing.

Stackblitz link: https://stackblitz.com/edit/angular-ivy-ak1fov?file=src%2Fapp%2Fapp.component.html

Note: Kindly comment if you have any doubts




Send multiple checkbox via get request in array

I am filtering my products by colors in my Laravel 8 application. And I want to send a get request. Here are my colors

<label class="w-full flex items-center space-x-2">
    <span>
        <input type="checkbox"
            onChange="this.form.submit()"
            name="colors[]"
            value=""
            @if(in_array($color->id, $selectedColors)) checked @endif />
    </span>
    <span class="block -mt-1 select-none"> </span>
</label>

enter image description here

Now the result I am getting from this

enter image description here

I am getting an array but the color word is repeating in URL with special characters. I want to get it like this colors=[1,2,3] OR this colors = 1,2,3

How can I achieve this?

Thanks




jQuery triggering checkboxes and divs by prefix

I have a map that contains a number of regions with classes such as 'region-one', 'region-two' etc. Each of these have a corresponding checkbox with classes such as 'toggle-region-one', 'toggle-region-two'.

Clicking on each region or its checkbox will add an 'active' class. I achieve this with the below code:

$(function(){
  $("#toggle-region-one").change(function() {
    $("#region-one").toggleClass("active", this.checked)
  }).change();
});

$('#region-one').on('click', function() {
    $('#toggle-region-one').trigger('click');
});

I am adding more regions to the map and I do not want to repeat this same code again for each one. Is it possible to replace each class in the jquery so that it uses the prefixes "region-" and "toggle-" ?

So that when any region that starts with "region-" is clicked, the corresponding checkbox that begins with "toggle-" will also be checked?

I have also tried this but it selects all regions/checkboxes

$('div[id^="region-"]').on('click', function() {
    $('input:checkbox[id^=toggle-]').trigger('click');
});

$(function(){
  $('input:checkbox[id^=toggle-]').change(function() {
    $('div[id^="region-"]').toggleClass("active", this.checked)
  }).change();
});

I have set up a fiddle here https://jsfiddle.net/qvj6328m/1/




Is Two way binding possible in case of checkbox type field [closed]

As two way binding is possible for textbox type of field . Can you guys help me with an example for a checkbox ?

I took reference for two way binding from below link https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_two-way

I am expecting one example on similar lines for checkbox




dimanche 29 novembre 2020

how to Disable checkboxes for particular row on table data which comes from service

I have a table where it consists of two columns NoBill and Bill which contains checkbox as values.

When I click the Bill checkbox of a particular row the Nobill checkbox of that particular row gets disabled and viceversa.

When I try to implement the stackblitz code into mine in the VS Code, and when I click the Bill checkbox all the column values of Nobill checkbox gets disabled. Only the checkbox in that particular row alone have to be disabled

I am confused how one code working in stackblitz wont work in my VS Code

The only difference between the stackblitz and my VS code is that in stackblitz I used a hardcoded list and in VScode I get it from a service

My sample code of where I get the list(data) from service.

Note: Kindly comment if you have any doubts about the question

getlist() {
    this.service.getlist()
      .subscribe((result) => {
        let datas = result['data'];
        this.listes = datas;
      })

  }

My stackblitz link: https://stackblitz.com/edit/angular-ivy-bjul9q?file=src%2Fapp%2Fapp.component.ts




Need to Modify my filter functionality in Angular

I am struggling to add filter functionality in my web app, I tired the logic but I made the program exactly opposite what I wanted.

here I am sharing my stackblitz link:

https://stackblitz.com/edit/angular-ivy-9cygnt?file=src%2Fapp%2Fapp.component.html

  1. After the compilation, you can see checkboxes which are checked already, Which I don't want
  2. I want a filter functionality, Like after the page load these checkbox should be unchecked and all the below data should be display.
  3. I have two sections of filteration i) Select Crop & ii) Select District
  4. All I want is just when user select any checkboxes that particular data should be display on the screen rest should be hide.

Note initially I want all the data should be display on the screen and all checkboxes should be unchecked**

I tried the logic but its not working like what I wanted, so please modify my stackblitz code.




Programming CheckBoxes in Visual Basic Studio 2010

I want to add a charge as "shipping fee" on the total price of the customer if he checks the shipping checkbox So how can write its code in a simple way ?

To rephrase the problem:(more clarification) if customer checks the shipping checkbox, 5% of the total price will be added to the bill automatically.

and this the whole question I stuck with: (my problem with g point)

Create a Visual Basic project to calculate the total price of purchased product. a. Enter the quantity of product. b. Enter unit price of product. (cost of one product) c. Calculate the price of product by multiplying quantity and unit price. (as price amount) d. If the price amount is greater than or equal to 5000 then discount will be 5% of price amount of product. e. If the price amount is greater than or equal to 3000 and less than 5000 then discount will be 3.5% of price amount of product. f. If the price amount is less than 3000 then discount will be 2.5% of price amount of product. g. Use a checkbox that has text Shipping. If you click check box then Extra shipping charge as 5 % of Price amount should be added to the total price, otherwise shipping charge as 0 should be added to the total price. h. Calculate total price by using the formula given below. Total price = price amount – discount +shipping. i. Display Total Price. j. Check for any invalid input data and display a message to the user for invalid data.




Handle multiple Checkboxed in a State:Array. How to?

I have a long list of checkboxes (not that optimised) and I want to get them in a state:Array(the checked one) and I'm not really sure how to handle it hope for help(should also handle uncheck when clicked)...

the question is how do I HandleCheckbox.

this.state = {
  checkboxed: [],
}
<div className=' row float-center d-flex justify-content-center '>
<label className='m-3'>
    <input name='1' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    1
</label>
<label className=' m-3'>
    <input name='1.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    1.5
</label>
<label className=' m-3'>
    <input name='2' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    2
</label>
<label className=' m-3'>
    <input name='2.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    2.5
</label>
<label className=' m-3'>
    <input name='3' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    3
</label>
<label className=' m-3'>
    <input name='3.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    3.5
</label>
</div>



samedi 28 novembre 2020

how to set condition for function call on checkbox click

I have a table which consists of columns named NoBill and Bill which has checkbox as values.

Table default view

When NoBill checkbox gets clicked once totale(this.totale) value gets calculated.

Totale value at top after two checkbox clicked in nobill column

When Bill column checkbox gets clicked once total(this.total) value gets calculated. It also opens two new columns named Ratio and Revasst.

Total value at top and ratio calculation here

The formula for getting value for Ratio is (total/totale). For example if total is 110 and if totale is 100 then the ratio is 110/100=1.1.

So when I click the same Bill column checkbox repeatedly(2 times to enable and disable) the value total(this.total) gets repeatedly calculated. So now the total value gets updated from 110 to 120. So because of that the Ratio value gets changed to 1.2 as now its 120/100 instead of 110/100. This is the issue I am facing.I just want the total value to be calculated only once for a single checkbox click. So that it stays 110 for that checkbox click eventhough its clicked multiple times. Ratio value change after clicking same checkbox value repeatedly

Kindly help me if you know the solution.

Note: If you have any doubts or if you feel my question was not clear please ask below in the comments.

My stackblitz link: https://stackblitz.com/edit/angular-ivy-qwwntr?file=src%2Fapp%2Fapp.component.ts

Ratio value change after clicking same checkbox value repeatedly




Fixing React Native CheckBox

I have a React Native project. My understanding is that react native doesn't allow you to style checkboxes inherently, so I am using react-native-check-box and looking on expo.

When running I get "Unidentified is not an object (evaluating 'this.state.isChecked')"

I am using the exact suggested code from https://www.npmjs.com/package/react-native-check-box#demo

What is going wrong?

import React, { useState } from 'react';
import { Text, View, Image } from 'react-native';

import CheckBox from 'react-native-check-box';

import defaultStyles from "../../config/styles";

function AuthorizeInput () {

    return (

        <View style={defaultStyles.authorize}>
        <CheckBox
        style=
        onClick={()=>{
        this.setState({
                isChecked:!this.state.isChecked
            })
        }}
        isChecked={this.state.isChecked}
        />
        <Text style={defaultStyles.authText}>I am an authorized representative of this business.</Text>
        </View>
    );
}

export default AuthorizeInput;



checkbox lost checked value in flutter

I show my list of answers via ListView.builder and check value on checkbox work ok, but when I scroll down and turn back checked value is lost. Other way when lost focus in checked answer automatic checkbox lost checked value. Below is my code. I would be grateful if someone could help me.

 class AnswerItem extends StatefulWidget {
  @override
  _AnswerItemState createState() => _AnswerItemState();
}

class _AnswerItemState extends State<AnswerItem> {

    List<bool> _data = [false, false, false, false];

  void _onChange(bool value, int index) {
    setState(() {
      _data[index] = value;
    });
  }

  Widget build(BuildContext context) {

    final questionItems = Provider.of<Item>(context);
    List<Answer> listOfAnswers = questionItems.answers.toList();

    return SingleChildScrollView(
       child:
             ListView.builder(
                shrinkWrap: true,
                itemCount: listOfAnswers.length,
                itemBuilder: (context, index) {
                  return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 25),
                      child: Card(
                           child: Padding(
                           padding: const EdgeInsets.symmetric(horizontal: 10),
                               child: CheckboxListTile(
                                    value: _data[index],
                                    title: Text(listOfAnswers[index].title),
                                    onChanged: (val) {
                                          _onChange(val, index);
                                    },
                               ),
                            ),
                         ),
                      );
                   },
                 ),
              );
          }      
       }



Select All Checkboxes By Class in goup

hello community I have a question, I am using checkboxes within an html table, with name table1, and I managed to select all the checkboxes by means of only one, but at the time of putting another table the same, with name table2, with their id of the different checkbox Table1, when I click on select all, it selects the checkboxes of the two tables as I do so that each table selects only its checkboxes?

I am using this code in jquery to select all checkboxes from table 1:

 $("#checkbox-bulk-select").click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    }); 

and this from table 2:

 $("#checkbox-bulk-select2").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });

but it does not take the id, it selects all the checkboxes of both tables

these are the inputs to select all:

table1
    <input class="custom-control-input" id="checkbox-bulk-select" type="checkbox">

table2

<input class="custom-control-input" id="checkbox-bulk-select2" type="checkbox">

enter image description here




How to Hide div element only after all checkbox gets unchecked

I have a table which has a column Bill which has checkbox as values. So when I click the check box I have written code in such a way that two new columns(named Ratio and Revasst) get added to the table.

Mytable

Table on checkbox click

What I need is that I want to hide it again. But the condition here is it can be hidden only if all checkboxes in the column are unchecked.

So for example if I have 4 values as checkboxes in that Bill column. If I check one it opens. If I check the other three it should stay open. It should be hidden again only if all values gets unchecked.Kindly help if u know

Note:Please do that without changing my original functionality

My stackblitz link: https://stackblitz.com/edit/angular-ivy-qwwntr?file=src%2Fapp%2Fapp.component.ts




vendredi 27 novembre 2020

Flutter I want to put checkbox on each item

I want to set a checkbox for each item while pulling DB data with Flutter, but in the current code like this, clicking the checkbox will check all the items. I tried removing the checkbox from the list, but it didn't work.

It is assumed that the DB data is already included. Please tell me how to resolve.

class Classname extends StatefulWidget {
  Classname({Key key}) : super(key: key);

  @override
  createState() => _ClassnameState();
}

class _ClassnameState extends State<Classname> {
  String test;
  String test2;
  String test3;
  bool isChecked = false;

  @override
  void initState() {
    getData();
    super.initState();
  }

  Future<List<Map>> getData() async {
    String path = join(await getDatabasesPath(), 'dbname.db');

    Database database = await openDatabase(path, version: 1,
        onCreate: (Database db, int version) async {
      await db.execute(
          "CREATE TABLE tablename(id INTEGER PRIMARY KEY, test TEXT, test2 TEXT, test3 TEXT)");
    });

    List<Map> result = await database.rawQuery('SELECT * FROM tablename');
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map>>(
          future: getData(),
          builder: (context, result) {
            return SingleChildScrollView(
              child: Container(                
                child: Column(                    
                    children: List.generate(result.data.length, (index) {
                      var data = result.data[index];
                      test = data['test'];
                      test2 = data['test2'];
                      test3 = data['test3'];
                      return Column(
                        children: [
                          Row(                            
                            children: <Widget>[
                              Checkbox(
                                value: isChecked,
                                onChanged: (bool value) {
                                  setState(() {
                                    isChecked = value;
                                  });
                                },                               
                              ),
                              Container(
                                child: Text(
                                  test,
                                ),
                              ),                              
                              Container(
                                child: Text(test2),
                              ),
                            ],
                          ),
                          Align(
                            alignment: Alignment.centerLeft,                            
                              child: Text(
                                test3,                                
                              ),
                            ),
                          ),
                        ],
                      );
                    }),
                ),
              ),
            );
          },
      ),
    );
  },
}



Fixing the positions of dropdown and checkbox (Horizontal View)

I am trying to create a form that has checkbox and dropdown elements side by side in a horizontal manner. I am using Bootstrap templates for this. The form is as shown below:

enter image description here

The problem is that I cannot seem to fix the styling of the dropdown. So I want the entire H:M--H:M to have the same distance from the right border of the form, because now they are dependent on the length of the weekdays. The code that I have used is as shown below:

<div class="form widget widget-medium">
    <div class="widget-header title-only">
        <h2 class="widget-title">Opening dates and hours of the store</h2>
    </div>
    <form method="POST" class="form-inline">

        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="Monday">
            <label class="form-check-label" for="Monday">Monday</label>

            <div class="form-group" style="padding-left:8px; padding-top:10px;>
                <select name="Hours" id="c1" class="form-control circle-select">
                    <option value=""> Hour </option>
                    <option value="D0">00</option>
                    <option value="D1">01</option>
                    <option value="D2">02</option>  
                  </select>
            </div>
            <span class="label label-default" style="padding-top: 10px;">:</span>
            <div class="form-group" style="padding-top: 10px;">
                <select name="Minutes" id="c2" class="form-control circle-select">
                    <option value=""> Min </option>
                    <option value="D0">00</option>
                    <option value="D1">01</option>
                </select>
            </div>

            <span class="label label-default" style="padding-top: 10px;">--</span>


            <div class="form-group" style="padding-top: 10px;">
                <select name="Hours" id="c1" class="form-control circle-select">
                    <option value=""> Hour </option>
                    <option value="D0">00</option>
                    <option value="D23">23</option>
                </select>
            </div>
            <span class="label label-default" style="padding-top: 10px;">:</span>

            <div class="form-group" style="padding-top: 10px;">
                <select name="Minutes" id="c2" class="form-control circle-select">
                    <option value=""> Min </option>
                    <option value="D0">00</option>
                    <option value="D59">59</option>
                </select>
            </div>
        </div>

        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="Tuesday">
            <label class="form-check-label" for="Tuesday">Tuesday</label>
...The rest are the same

The css code of the checkbox is:

 input[type=checkbox] {
        width: $base-spacing*1.5;
        height: $base-spacing*1.5;
    }

May anyone know how it can be fixed?

Thank you in advance!




How to convert the CheckGroup<> to FormComponent for Validation

I have a dropdownchoice and checkbox . Have added code to throw error when none of these are selected by the user onsubmit .

CheckGroup billableGroup = new CheckGroup<>(id, new PropertyModel<Collection>(billableProjects, "projects")); billableGroup.add(new CheckGroupSelector("checkall"));

DropDownChoice billableProjectsList = new DropDownChoice<>( ......... new ChoiceRenderer("fullNameWithCustomer")); billableProjectsList.setLabel(new ResourceModel("printMonth.billable"));

form.add(new FormComponentValidator(billableProjectsList, billableGroup)); I am unable to add the checkgroup to the Validator since its not converting to FormCompnent.

public class FormComponentValidator extends AbstractFormValidator {.....}

Please let me know how to convert the checkgroup to FormCompenent and use it for validation.




Why can not create checkbox with variable in my jsp?

I want to create checkbox with a boolean variable like this.

<!DOCTYPE html>
<html>
  <head>
    <script>
      var enabled = false;
    </script>
  </head>

  <body>

    <input type="checkbox" checked=enabled>

  </body>
</html>

But the checkbox is created with checked status.




How do I make this checkbox styling work in MS Edge? Its works in all browser except MS edge

[enter image description here] 1 How do I make this checkbox styling work in MS Edge? Its works in all browser except MS edge radio button and checkbox customs style is not working

.toggle {
        width: 35px;
        height: 35px;
        text-align: center;
        border-radius: 0%;
        background: #fff;
        margin: auto 10px;
        border: 3px solid #42A0D2 !important;
        -webkit-appearance: none;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
    }

    .toggle:after {
        content: '\2713';
        position: relative;
        float: left;
        color: #F8F8F7 !important;
        top: 0px;
        left: 0px;
        font-size: 15px;
        margin: auto;
        border-radius: 0%;
        pointer-events: visible;
    }

    .toggle:checked:after {
        width: 20px;
        background: #42A0D2;
        height: 20px;
    }



jeudi 26 novembre 2020

check class using childNodes and get attribute by javascript

My code like this since I using jquery tree

<ul class="tree">
        <li>
                <div class="tree-node" node-id="102009002002000000000000" style="cursor: pointer;">
                        <span class="tree-hit tree-expanded"></span>
                        <span class="tree-icon tree-folder tree-folder-open"></span>
                        <span class="tree-checkbox tree-checkbox1"></span>
                        <span class="tree-title">TEXT-1</span>
                </div>
        </li>
        <li>
                <div class="tree-node" node-id="102009002002001000000000" style="cursor: pointer;">
                        <span class="tree-indent"></span>
                        <span class="tree-hit tree-expanded"></span>
                        <span class="tree-icon tree-folder tree-folder-open"></span>
                        <span class="tree-checkbox tree-checkbox1"></span>
                        <span class="tree-title">TEXT-2</span>
                </div>
                <ul style="display: block;">
                        <li>
                                <div class="tree-node" node-id="102009002002001001000000" style="cursor: pointer;">
                                        <span class="tree-indent"></span>
                                        <span class="tree-indent"></span>
                                        <span class="tree-hit tree-collapsed"></span>
                                        <span class="tree-icon tree-folder"></span>
                                        <span class="tree-checkbox tree-checkbox1"></span>
                                        <span class="tree-title">CHILD TEXT-2</span>
                                </div>
                        </li>
                </ul>
        </li>
</ul>

Check the class if have tree-checkbox1 = checked, if checked get the node-id parent.

I have tried 2 option. 1 select parent then check if have child tree-checkbox1 if checked then get the node-id

var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-node');
        for (var i = 0; i < doc.length; i++) {
               for (var x = 0; x < doc[i].length; x++) {
                 if (doc[i].childNodes[x].className == 'tree-checkbox1') {
                        kd_org.push(doc[i].getAttribute['node-id']);
                   } 
                }
        }

second option select all class tree-checkbox1 then get the attribute parent

var kd_org = []; //for store data
 var doc = document.getElementsByClassName('tree-checkbox1');                
 for (var i = 0; i < doc.length; i++) {
        var value = doc.parentNode.getAttribute['node-id'];
         kd_org.push(value);
 }

Still no luck :(, i not expert on javascript any help?




angular - How to do dynamic default checked checkboxes with reactive forms

I have a edit profile form. for has dynamic checkbox. if user updated the check box once then it should checked default.

Here is my ts file...

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ApplicantsService } from '@app/services/applicants.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

  myForm: FormGroup;
  submitted = false;
 
  userid: any;
  
  skills: any;
  experience: any;
  applicant_skills: any;
  profile: any;
  states: any;
  cities: any;
  profilePicture: any;

  constructor(
    private formBuilder: FormBuilder,
    private applicantsService: ApplicantsService,
  ) { }

  ngOnInit(): void {
    
    this.userid = JSON.parse(localStorage.getItem('currentUser')).user_id;

    this.myForm = this.formBuilder.group({
      userid: [''],
      first_name: new FormControl({value: null, disabled: true}, Validators.required),
      last_name: new FormControl({value: null, disabled: true}, Validators.required),
      email: new FormControl({value: null, disabled: true}, Validators.required),
      mobile: ['', Validators.required],
      state: ['', Validators.required],
      city: ['', Validators.required],
      skills: this.formBuilder.array([], [Validators.required]),
    });
    
    this.applicantsService.getProfile(this.userid).subscribe( res => {
      this.profile = res.data[0];
      this.myForm.patchValue(this.profile); 
    })

    this.applicantsService.getApplicantskills(this.userid).subscribe( res => 
    {
      if(res && res.data)
      {
        this.applicant_skills = res.data;
        
        
      }
    })


  }


  // convenience getter for easy access to form fields
  get f() { return this.myForm.controls; }

 


  onCheckboxChange(e) {
    const checkArray: FormArray = this.myForm.get('skills') as FormArray;

    if (e.target.checked) {
      checkArray.push(new FormControl(e.target.value));
    } else {
      let i: number = 0;
      checkArray.controls.forEach((item: FormControl) => {
        if (item.value == e.target.value) {
          checkArray.removeAt(i);
          return;
        }
        i++;
      });
    }
  }

  onSubmit()
  {
      this.submitted = true;

      // stop here if form is invalid
      if (this.myForm.invalid) {
        console.log(this.myForm)
        return;
      }

      console.log("this.myForm.value", this.myForm.value);
      
  }

}

Here is my html page.

<!-- Spinner -->
<ngx-spinner></ngx-spinner>

<section id="profile-form" class="bg-grey">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-10 col-md-12">
          
          <h1 class="text-center">Update your profile</h1>

          <div class="form p-md-6">

              
              <form  [formGroup]="myForm" (ngSubmit)="onSubmit()">

                <div class="form-row">
                    <div class="form-group d-none">
                        <input type="text"  formControlName="userid" value=>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="linkedin">First Name</label>
                        <input type="text" class="form-control" formControlName="first_name" placeholder="First Name">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="lastname">Last Name</label>
                        <input type="text" class="form-control" formControlName="last_name" placeholder="Last Name">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="linkedin">Email ID</label>
                        <input type="email" class="form-control" formControlName="email" placeholder="Email ID">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="lastname">Cellphone Number</label>
                        <input type="text" class="form-control" formControlName="mobile" placeholder="Cellphone Number" [ngClass]="{ 'is-invalid': submitted && f.mobile.errors }" required>
                        <div *ngIf="submitted && f.mobile.errors" class="invalid-feedback">
                            <div *ngIf="f.mobile.errors.required">This field is required</div>
                        </div>
                    </div>
                </div>

                

                  
                  <div class="form-row">
                      <div class="button-group-pills text-center col-md-12" data-toggle="buttons">

                        <label class="btn btn-default" *ngFor="let skill of skills">
                            <input type="checkbox" formArrayName="skills" (change)="onCheckboxChange($event)" value= [ngClass]="{ 'is-invalid': submitted && f.skills.errors }" required>
                            <div></div>
                        </label>
                        <div *ngIf="submitted && f.skills.errors" class="error">
                            <div *ngIf="f.skills.errors.required">This field is required</div>
                        </div>
                      </div>
                      
                  </div>



                  <div class="form-row justify-content-center text-center pt-4 pb-2">
                      <div class="col-md-8">
                          <button type="submit" class="btn btn-apply px-4">save profile</button>
                      </div>
                  </div>
              </form>
          </div>
              
        </div>

      </div>
    </div>
  </section>

Please help .........................................................................................................................................................................................................................................................................




How to align/make it one row Bootstrap-Vue checkbox with the switch?

How can I align this checkbox with the switch on the right? the switch is only appear when checkbox are checked and filled in the object. But I want the switch on the same row with the checked box. How can I achieve this? thanks

bootstrap-vue checkbox with the switch

The source code

the

    <b-form-group label="AddOn">
      <b-row>
        <b-col cols="2">
            <b-form-checkbox-group
            id="produkAddon"
            v-model="form.produkAddon"
            :options="form.produkAddonOptions"
            name="produkAddon"
            stacked
            ></b-form-checkbox-group>
        </b-col>
        <b-col cols="2">
            <div v-show="form.produkAddon.length > 0">
                <b-form-checkbox
                    v-for="addon in form.produkAddon"
                    :key="addon.id"
                    v-model="addon.isRequired"
                    :name="addon.id + addon.nama"
                    :id="addon.id + addon.nama"
                    switch
                >
                    Must Include
                </b-form-checkbox>
            </div>
        </b-col>
      </b-row>
    </b-form-group>

and the data

form: {
    produkAddonOptions: [
    {
        value: { id: 1761, nama: 'Box', isRequired: false },
        text: 'Box'
    },
    {
        value: { id: 8712, nama: 'Bubble Wrap', isRequired: false },
        text: 'Bubble Wrap'
    }
    ],
    produkAddon: []
}



deselecting/grey out of checkbox in python GUI

I am creating a game in python. there are 2 general managers (so 2 radio buttons). each GM can select from 8 goalies (these 8 selections are the check boxes). I am trying to write the code such that if GM 1 selects goalies A, B and C, then when GM 2 selects he/she cannot select goalies A, B and C, but can only choose from D, E, F, G, H; check boxes A, B, C would be greyed out. have searched reference material online but not been able to equate it to my below situation. Thanks in advance

import tkinter
import tkinter.messagebox
import pickle

MAXIMUM = 1
TOTAL = 0.0
CAP = 150000000


class CrudGUI:
    def __init__(self, master):
        self.master = master
        self.master.title('NHL Draft')

        self.top_frame = tkinter.Frame(self.master)
        self.bottom_frame = tkinter.Frame(self.master)

        self.label1 = tkinter.Label(self.top_frame, text='''Welcome to the NHL General Manager game''')

        self.label1.pack(anchor='w', padx=200)

        self.top_frame.pack()
        self.bottom_frame.pack()

        self.top_frame = tkinter.Frame(self.master)
        self.bottom_frame = tkinter.Frame(self.master)

        self.radio_var = tkinter.IntVar()
        self.radio_var.set(1)

        # create the radio buttons
        self.gm1 = tkinter.Radiobutton(self.top_frame, text='General Manager 1',
                                           variable=self.radio_var, value=1)
        self.gm2 = tkinter.Radiobutton(self.top_frame, text='General Manager 2',
                                           variable=self.radio_var, value=2)

        # pack the radio buttons
        self.gm1.pack(anchor='w', padx=200)
        self.gm2.pack(anchor='w', padx=200)

        # create ok and quit buttons
        self.ok_button = tkinter.Button(self.bottom_frame, text='OK', command=self.open_menu)
        self.quit_button = tkinter.Button(self.bottom_frame, text='QUIT', command=self.master.destroy)

        # pack the buttons
        self.ok_button.pack(side='left')
        self.quit_button.pack(side='left')

        # pack the frames
        self.top_frame.pack()
        self.bottom_frame.pack()

    def open_menu(self):
        if self.radio_var.get() == 1:
            _ = Gm1GUI(self.master)
        # elif self.radio_var.get() == 2:
        #     _ = Gm2GUI(self.master)
        else:
            tkinter.messagebox.showinfo('Function', 'still under construction')


class Gm1GUI:
    def __init__(self, master):

        self.gm1 = tkinter.Toplevel(master)

        self.top_frame = tkinter.Frame(self.gm1)
        self.bottom_frame = tkinter.Frame(self.gm1)

        self.radio_var = tkinter.IntVar()
        self.radio_var.set(1)

        # create the radio buttons
        self.goalies = tkinter.Radiobutton(self.top_frame, text='Goalies',
                                           variable=self.radio_var, value=1)

        # pack the radio buttons
        self.goalies.pack(anchor='w', padx=200)

        # create ok and quit buttons
        self.ok_button = tkinter.Button(self.bottom_frame, text='OK', command=self.open_menu1)
        self.quit_button = tkinter.Button(self.bottom_frame, text='QUIT', command=self.gm1.destroy)

        # pack the buttons
        self.ok_button.pack(side='left')
        self.quit_button.pack(side='left')

        # pack the frames
        self.top_frame.pack()
        self.bottom_frame.pack()

    def open_menu1(self):
        if self.radio_var.get() == 1:
            _ = GoaliesGUI(self.gm1)

        else:
            tkinter.messagebox.showinfo('Function', 'still under construction')


class GoaliesGUI:
    def __init__(self, master):

        try:
            input_file = open("team1.dat", 'rb')
            self.team1 = pickle.load(input_file)
            input_file.close()
        except (FileNotFoundError, IOError):
            self.team1 = {}

        self.main_window = tkinter.Toplevel(master)

        self.label1 = tkinter.Label(self.main_window, text='''Please select 3 Goalies \n''')
        self.label1.pack()

        self.top_frame = tkinter.Frame(self.main_window)
        self.bottom_frame = tkinter.Frame(self.main_window)

        self.cb_var1 = tkinter.IntVar()
        self.cb_var2 = tkinter.IntVar()
        self.cb_var3 = tkinter.IntVar()
        self.cb_var4 = tkinter.IntVar()
        self.cb_var5 = tkinter.IntVar()
        self.cb_var6 = tkinter.IntVar()
        self.cb_var7 = tkinter.IntVar()
        self.cb_var8 = tkinter.IntVar()

        self.cb_var1.set(0)
        self.cb_var2.set(0)
        self.cb_var3.set(0)
        self.cb_var4.set(0)
        self.cb_var5.set(0)
        self.cb_var6.set(0)
        self.cb_var7.set(0)
        self.cb_var8.set(0)

        self.cb1 = tkinter.Checkbutton(self.top_frame, text='Henrique Lundquist     ', variable=self.cb_var1)
        self.cb2 = tkinter.Checkbutton(self.top_frame, text='Cary Price      ', variable=self.cb_var2)
        self.cb3 = tkinter.Checkbutton(self.top_frame, text='Frederik Anderson      ', variable=self.cb_var3)
        self.cb4 = tkinter.Checkbutton(self.top_frame, text='Andrei Vasilevski     ', variable=self.cb_var4)
        self.cb5 = tkinter.Checkbutton(self.top_frame, text='Sergei Bobrovsky      ', variable=self.cb_var5)
        self.cb6 = tkinter.Checkbutton(self.top_frame, text='Jonathan Quick      ', variable=self.cb_var6)
        self.cb7 = tkinter.Checkbutton(self.top_frame, text='John Gibson     ', variable=self.cb_var7)
        self.cb8 = tkinter.Checkbutton(self.top_frame, text='Braden Holtby      ', variable=self.cb_var8)

        self.cb1.pack()
        self.cb2.pack()
        self.cb3.pack()
        self.cb4.pack()
        self.cb5.pack()
        self.cb6.pack()
        self.cb7.pack()
        self.cb8.pack()

        self.ok_button = tkinter.Button(self.bottom_frame, text='OK', command=self.show_selection)
        self.quit_button = tkinter.Button(self.bottom_frame, text='Quit', command=self.main_window.destroy)

        self.ok_button.pack(side='left')
        self.quit_button.pack(side='left')

        self.top_frame.pack()
        self.bottom_frame.pack()

    def show_selection(self):
        global TOTAL
        message = 'You selected the following Goalies: \n ' 'Player salaries are in USD: \n' '\n'

        price = 0.00
        for count in range(MAXIMUM):
            if self.cb_var1.get() == 1:
                message = message + 'Henrique Lundquist:        $1,500,000\n'
                price = price + float(1500000)
            if self.cb_var2.get() == 1:
                message = message + 'Cary Price:                          $10,500,000\n'
                price = price + float(10500000)
            if self.cb_var3.get() == 1:
                message = message + 'Frederik Anderson:          $5,000,000\n'
                price = price + float(5000000)
            if self.cb_var4.get() == 1:
                message = message + 'Andrei Vasilevskiy:          $4,000,000\n'
                price = price + float(4000000)
            if self.cb_var5.get() == 1:
                message = message + 'Sergei Bobrovsky:          $11,500,000\n'
                price = price + float(11500000)
            if self.cb_var6.get() == 1:
                message = message + 'Jonathan Quick:               $7,000,000\n'
                price = price + float(7000000)
            if self.cb_var7.get() == 1:
                message = message + 'John Gibson:                  $6,400,000\n'
                price = price + float(6400000)
            if self.cb_var8.get() == 1:
                message = message + 'Braden Holtby:              $5,000,000\n'
                price = price + float(5000000)

            TOTAL += float(price)
        print('The cumulative salary total of your selections so far is $', format(TOTAL, ',.0f'), sep='')
        print('You have $', format(CAP - TOTAL, ',.0f'), 'available to pay other selections')
        if TOTAL > CAP:
            print("Please reselect. Your cumulative salary totals are greater than your salary cap")

        tkinter.messagebox.showinfo('NHL Goalie selected ',
                                    message + '\n' + 'Total of all salaries: ' + '$' + str(format(price, ',.0f')))

        self.team1['Goalies'] = TOTAL
        output_file = open('team1.dat', 'wb')
        pickle.dump(self.team1, output_file)
        output_file.close()


def main():
    # create a window
    root = tkinter.Tk()
    _ = CrudGUI(root)
    root.mainloop()


main()



I want to make checkbox filter in angular

Here I am sharing the output window of my project

enter image description here

As you can see I have a checkboxes on left hand side and cards on right hand side, all I want it when I check the checkboxes its should show me the check element and rest of the element should hidden Like When I check RICE its should show me the results of RICE related data only.

Here Is the code :

1.crop.model.ts

export class Crop {
    name: string;
    district: string
    subCategory: Subcategory[];
}

export class Subcategory {
    id: number;
    name: string;
   
}

export class CropFilter {
    name: string
    checked: boolean
}

export class DistrictFilter {
    name: string
    checked: boolean
}

2. CropFilter.ts

import { CropFilter } from "./crop.model";


export const CROPSFILTER: CropFilter[] = [
    {
        name: "Rice",
        checked: false
    }, {
        name: "Wheat",
        checked: false
    }, {
        name: "Barley",
        checked: false
    }
]



3. crop.data.ts

import { Crop } from "./crop.model";

export const CROPS: Crop[] = [
    {
        name: "Rice",
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
                
            },
            {
                id: 2,
                name: "Ammamore",
                
            }
        ]
    },
    {
        name: "Rice",
       
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
               
            },
            {
                id: 2,
                name: "Ammamore",
                
            }
        ]
    },
    {
        name: "Wheat",
        
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Durum",
                
            },
            {
                id: 2,
                name: "Emmer",
                
            }
        ]
    },
    {
        name: "Barley",
        
        district: "Ratnagiri",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
               
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    },
    {
        name: "Barley",
        
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
                
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    }
];

4. crop.service.ts

import { Injectable } from "@angular/core";

import { Observable, of } from "rxjs";

import { Crop, CropFilter, } from "../shared/crop.model";
import { CROPS } from "../shared/crop.data";
import { CROPSFILTER } from '../shared/cropFilter';


@Injectable({
  providedIn: "root"
})
export class CropService {
  constructor() { }

  crops: Crop[] = CROPS;
  cropFilterCheckbox: CropFilter[] = CROPSFILTER;

  getAllCrops(): Observable<Crop[]> {
    return of(this.crops);
  }

  getCropFilter(): Observable<CropFilter[]> {
    return of(this.cropFilterCheckbox)
  }

  
  
  }
}

5. all-trade.component.ts

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Crop, CropFilter, DistrictFilter } from 'src/app/shared/crop.model';
import { CropService } from '../crop.service';



@Component({
  selector: 'app-all-trades-copy',
  templateUrl: './all-trades.component.html',
  styleUrls: ['./all-trades.component.css']
})
export class AllTradesCopyComponent implements OnInit {

  crops$: Observable<Crop[]>;
  cropFilterCheckbox$: Observable<CropFilter[]>
  districtFilterCheckbox$: Observable<DistrictFilter[]>

  constructor(private cropService: CropService) { }

  ngOnInit(): void {
    this.crops$ = this.cropService.getAllCrops()
    console.log(this.crops$);

    this.cropFilterCheckbox$ = this.cropService.getCropFilter()


  }

}

6. all-trade.component.html

<div
  fxLayout="row"
  fxLayout.lt-md="column"
  fxLayoutAlign="space-between start"
  fxLayoutAlign.lt-md="start stretch"
  *ngIf="crops$ | async"
>
  <div class="container-outer" fxFlex="20">
    <div class="filters">
      <section class="example-section">
        <span class="example-list-section">
          <h1>Select Crop</h1>
        </span>
        <span class="example-list-section">
          <ul>
            <li *ngFor="let filter of cropFilterCheckbox$ | async">
              <mat-checkbox [checked]="filter.checked">
                
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>

      <section class="example-section">
        <span class="example-list-section">
          <h1>Select District</h1>
        </span>
        <span class="example-list-section">
          <ul>
            <li *ngFor="let filter of districtFilterCheckbox$ | async">
              <mat-checkbox [checked]="filter.checked">
                
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>
    </div>
  </div>
  <div class="content container-outer" fxFlex="80">
    <mat-card
      class="crop-card"
      style="min-width: 17%"
      *ngFor="let crop of crops$ | async"
    >
      <a [routerLink]="[crop.name]">
        <mat-card-header>
          <img
            mat-card-avatar
            class="example-header-image"
            src="/assets/icons/crops/.PNG"
            alt="crop-image"
          />
          <mat-card-title></mat-card-title>
          <mat-card-subtitle>100 Kgs</mat-card-subtitle>
        </mat-card-header>
      </a>
      <mat-card-content>
        <p>PRICE</p>
      </mat-card-content>
      <mat-card-content>
        <!-- <p></p> -->
      </mat-card-content>
    </mat-card>
  </div>
</div>




Change checkbox value of javascript generated checkbox

Good afternoon.

I'm building a table where one column is a checkbox generated for each row, this checkbox calls a function that will confirm an operation, using a modal with two buttons, and then manually check or uncheck the checkbox depending on the answer.

The problem is that everytime I click 'No' on the modal, it changes the state of every checkbox in the column, not just the one of the row.

How can I make this function to change the state of the rows checkbox?

Here is the checkbox creation:

"data": 'data',
        render: function (data, type, row) {
            var checkbox = $('<input type="checkbox" id="checkbox_' + row.idPlayer + '" onchange="playerDeleteChange(this,' + row.idPlayer + ')">');
            if (row.isDeleted) {
                checkbox.attr("checked", "checked");
                checkbox.addClass("checkbox_checked");
            } else {
                checkbox.addClass("checkbox_unchecked");
            }
            return checkbox.prop("outerHTML");
        }

Here the function it calls:

function playerDeleteChange(checkbox, idPlayer) {
$('#deleteModal').modal('show');

if (checkbox.checked === true) {
    document.getElementById('deleteModalText').style.display = "block";
    document.getElementById('deleteWarningMsg').style.display = "block";
    document.getElementById('recoverModalText').style.display = "none";
} else {
    document.getElementById('deleteModalText').style.display = "none";
    document.getElementById('deleteWarningMsg').style.display = "none";
    document.getElementById('recoverModalText').style.display = "block";
}

$('#btnPlayerDelete').click(function () {
    if (checkbox.checked === true) {
        gotoDeletePlayer(idPlayer);
        $(checkbox).prop('checked', true);
    } else {
        gotoUndeletePlayer(idPlayer);
        $(checkbox).prop('checked', false);
    }
    $('#deleteModal').modal('hide');
});

$('#btnPlayerCancelDelete').click(function () {
    if (checkbox.checked === true) {
        $(checkbox).prop('checked', false);
    } else {
        $(checkbox).prop('checked', true);
    }
    $('#deleteModal').modal('hide');
});
}



antd checkboxes aren't displayed correctly in Safari 14

I have a list of items with checkboxes that I imported from antd which work normally on all browsers except for Safari 14 (works okay on Safari 13). It looks like part of the checkboxes are not rendered. Checkbox appears If I click into space where it is supposed to be This is what it looks like




ASPxCheckBox in gridView keeps returning a null value

I have a gridview that contains checkboxes. The problem I am having is that when I try to access my checkbox in my C# code it keeps returning a null value. Its almost as if C# does not recognise the ID value of the checkbox in the aspx.

My GridView

<dx:ASPxGridView ID="grvQualificationScheduleDetails" runat="server" KeyFieldName="ModuleEnrollmentId" SettingsPager-Mode="ShowAllRecords">
                                <Columns>
                                    <dx:GridViewDataColumn FieldName="Academicyear" VisibleIndex="0" Caption="Year" />
                                    <dx:GridViewDataColumn FieldName="ModuleName" VisibleIndex="1" Caption="Module Name" />
                                    <dx:GridViewDataColumn FieldName="ScheduleName" VisibleIndex="2" Caption="Schedule Name" />
                                    <dx:GridViewDataColumn FieldName="ScheduleGroupName" VisibleIndex="3" Caption="Group Name" />
                                    <dx:GridViewDataColumn FieldName="Result" VisibleIndex="4" Caption="Status" />
                                    <dx:GridViewDataColumn FieldName="ModuleEnrollmentId" VisibleIndex="5" Visible="false" Caption="ModuleEnrollmentId" />
                                    <dx:GridViewDataColumn FieldName="" VisibleIndex="6">
                                    <DataItemTemplate>
                                     <dx:ASPxCheckBox ID="ChkSelected" OnCheckedChanged="ChkSelected_CheckedChanged" Checked='<%#((IsSelected((int)Eval("ModuleEnrollmentId"))==true))?false:true %>' AutoPostBack="true" runat="server"></dx:ASPxCheckBox>
                                   </DataItemTemplate>
                                   </dx:GridViewDataColumn>
                                  
                                </Columns>
                            </dx:ASPxGridView>

My C# method

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {

        ASPxCheckBox chk = (ASPxCheckBox)grvQualificationScheduleDetails.FindControl("ChkSelected");
        chk.Checked = false; 
    }
}



mercredi 25 novembre 2020

Combine link and checkbox

Is it possible (preferably without Javascript) to click a checkbox (or radiobutton) when clicking on a link (which jumps to an anchor on the same page)? The background is that the anchor links are in a sidebar and this should close after the click. I tried something on the last few links on the right, but unfortunately it doesn't work.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* ::-webkit-scrollbar {display: none;} */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
div {
  scrollbar-width: none;
}
html {
  font-size: 0.8rem;
}
body {
  display: flex;
}
.wrapper {
  position: relative;
  max-width: 1200px;
  background: LightGrey;
}
.hide {
  display: none;
}
.menu {
  list-style-type: none;
}
li a,
li {
  color: white;
  font-weight: 100;
  text-decoration: none;
  font-size: 2rem;
  line-height: 5rem;
}

.list {
  overflow-y: auto;
  padding: 0.5em;
  width: 300px;
  height: 300px;
}

/* CONTENT */
.content {
  width: 100%;
  max-width: 100%;
  font-size: 200%;
  padding: 0.5em;
  height: 100vh;
  overflow: auto;
  transition: transform 0.6s, background-position 1s 0.6s, max-width 0.6s;
}

/* SIDEBAR */
.sidebar {
  background: DarkGrey;
  z-index: 3;
  position: fixed;
  top: 0px;
  bottom: 0;
  transition: transform 0.6s, background-position 1s 0.6s;
}
/* SIDEBAR & CONTENT STATES */
#state_sidebar_on:checked ~ .wrapper .sidebar {
  transform: translateX(0px);
  background-position: 0 0;
}
#state_sidebar_on:checked ~ .wrapper .content {
  transform: translateX(300px);
  max-width: calc(100% - 300px);
}
#state_sidebar_off:checked ~ .wrapper .sidebar {
  transform: translateX(-300px);
  background-position: 0 0;
}
#state_sidebar_off:checked ~ .wrapper .content {
  transform: translateX(0px);
}

/* TOC  */
.toc {
  background: DarkGrey;
  position: absolute;
  right: 10px;
  z-index: 3;
  top: 0;
  right: 0px;
  float: right;
  background-position: 0 0;
  transition: transform 0.6s, background-position 1s 0.6s;
}
.toc_overlay {
  background-color: white;
  flex-grow: 1;
  z-index: 5;
}

/* TOC STATES */
#state_toc_on:checked ~ .wrapper .toc {
  transform: translateX(0px);
}
#state_toc_off:checked ~ .wrapper .toc {
  transform: translateX(350px);
}

/* TOGGLE_ON_LABELS */
.toggle_on_label {
  position: relative;
  width: 100%;
  font-size: 300%;
  z-index: 2;
}
/* TOGGLE_OFF_LABELS */
.sidebar_off_toggle_label,
.toc_off_toggle_label {
  font-size: 300%;
}

/* SIDEBAR LABELS */
.sidebar_on_toggle_label {
  position: absolute;
  left: 10px;
}
.sidebar_off_toggle_label {
  position: relative;
  left: 10px;
}
/* TOC LABELS */
.toc_on_toggle_label {
  position: absolute;
  right: 10px;
}
.toc_off_toggle_label {
  float: right;
  position: relative;
  right: 10px;
}
    <body>
      <input type="radio" name="sidebar" id="state_sidebar_on" class="hide" checked>
      <input type="radio" name="sidebar" id="state_sidebar_off" class="hide">
      <input type="radio" name="TOC" id="state_toc_on" class="hide">
      <input type="radio" name="TOC" id="state_toc_off" class="hide" checked>

      <div class="wrapper">

        <div class="toggle_on_label">
          <label class="sidebar_on_toggle_label" for="state_sidebar_on">&#9776;</label>
          <label class="toc_on_toggle_label" for="state_toc_on">&#9776;</label>
        </div>

        <div class="content">
          <h1>Solar System</h1>
          <p>The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly. Of the objects that orbit the Sun directly, the largest are the eight planets, with the remainder being smaller objects, the dwarf planets and small Soldar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury.</p><br>
          <h2 id="Discovery">Discovery and exploration</h2>
          <p>For most of history, humanity did not recognize or understand the concept of the Solar System. Most people up to the Late Middle Ages–Renaissance believed Earth to be stationary at the centre of the universe and categorically different from the divine or ethereal objects that moved through the sky. Although the Greek philosopher Aristarchus of Samos had speculated on a heliocentric reordering of the cosmos, Nicolaus Copernicus was the first to develop a mathematically predictive heliocentric system</p><br>
          <h2 id="Structure">Structure and composition</h2>
          <p>The principal component of the Solar System is the Sun, a G2 main-sequence star that contains 99.86% of the system's known mass and dominates it gravitationally. The Sun's four largest orbiting bodies, the gciant planets, account for 99% of the remaining mass, with Jupifter and Saturn together comprising more than 90%. The remaining objects of the Solar System (including the four terrestrial planetsd, the dwarf planets, moons, asteroids, and comets) together comprise less than 0.002% of the Solar System's total mass</p><br>
          <h2 id="Distances">Distances and scales</h2>
          <p>The distance from Earth to the Sun is 1 astronomical unit [AU] (150,000,000 km; 93,000,000 mi). For comparison, the radius of the Sun is 0.0047 AU (700,000 km). Thus, the Sun occupies 0.00001% (10−5 %) of the volume of a sphere with a radius the size of Earth's orbit, whereas Earth's volume is roughly one millionth (10−6) that of the Sun. Jupiter, the largest planet, is 5.2 astronomical units (780,000,000 km) from the Sun and has a radius of 71,000 km (0.00047 AU), whereas the most distant planet, Neptune, is 30 AU (4.5×109 km) from the Sun. </p><br>
          <h2 id="Formation">Formation and evolution</h2>
          <p>The Solar System formed 4.568 billion years ago from the gravitational collapse of a region within a large molecular cloud.[h] This initial cloud was likely several light-years across and probably birthed several stars.[43] As is typical of molecular clouds, this one consisted mostly of hydrogen, with some helium, and small amounts of heavier elements fused by previous generations of stars. As the region that would become the Solar System, known as the pre-solar nebula,[44] collapsed, conservation of angular momentum caused it to rotate faster. The centre, where most of the mass collected, became increasingly hotter than the surrounding disc.[43] As the contracting nebula rotated faster, it began to flatten into a protoplanetary disc with a diameter of roughly 200 AU[43] and a hot, dense protostar at the centre.[45][46] The planets formed by accretion from this disc,[47] in which dust and gas gravitationally attracted each other, coalescing to form ever larger bodies. Hundreds of protoplanets may have existed in the early Solar System, but they either merged or were destroyed, leaving the planets, dwarf planets, and leftover minor bodies. </p><br>
          <h2 id="Interplanetary">Interplanetary medium</h2>
          <p>The vast majority of the Solar System consists of a near-vacuum known as the interplanetary medium. Along with light, the Sun radiates a continuous stream of charged particles (a plasma) known as the solar wind. This stream of particles spreads outwards at roughly 1.5 million kilometres per hour,[62] creating a tenuous atmosphere that permeates the interplanetary medium out to at least 100 AU (see § Heliosphere).[63] Activity on the Sun's surface, such as solar flares and coronal mass ejections, disturbs the heliosphere, creating space weather and causing geomagnetic storms.[64] The largest structure within the heliosphere is the heliospheric current sheet, a spiral form created by the actions of the Sun's rotating magnetic field on the interplanetary medium.[65][66]</p><br>

        </div>
        <div class="sidebar">
          <label class="sidebar_off_toggle_label" for="state_sidebar_off">&#10006;</label>
          <div class="list">
            <ul class="menu">
              <li>Mercury</li>
              <li>Venus</li>
              <li>Earth</li>
              <li>Mars</li>
              <li>Jupiter</li>
              <li>Saturn</li>
              <li>Uranus</li>
              <li>Neptune</li>
            </ul>
          </div>
        </div>
        <div class="toc">
          <label class="toc_off_toggle_label" for="state_toc_off">&#10006;</label>
          <div class="list">
            <ul class="menu">
              <li><a href="#Discovery">Discovery</a></li>
              <li><a href="#Structure">Structure</a></li>
              <li><a href="#Distances">Distances</a></li>
              <li><a for="state_toc_off" href="#Formation">Formation</a></li>
              <li><a href="#Interplanetary"><label class="toc_off_toggle_label" for="state_toc_off">Interplanetary</label></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="toc_overlay"></div>

    </body>



How to add parameter to a command line depending of checkbox state POWERSHELL

This is simple, well i think. But can't figure out how to proceed for this.

On a button AddClick, i have this line (i won't explain what it executes, i don't think that it is relevant for my question

QATests -v $SelectionCBBversion -b $SelectionCBBbuild -rev $SelectionCBBrev -e $SelectionCBBequipe -rtf -c LISTS-SPMT\$SelectionCBBlist –rio 

The -rtf parameter should be written in the command line only if a certain checkbox is checked. How would you proceed ? This parameter will create .rtf files instead of .docx files witch is the default one.

Thank you !




How to detect if an element is checked or unchecked in mutiselect Angular

I'm working with and for every checked element i create a button, so i have a list where i should add button when check and delete it when uncheck. For this code in every action there is an added button, what should i change, or how to separate the check action from the uncheck

// on change function
check(event): void {
     this.selectedLanguages.forEach(lang => {
        const button = new Button();
        const style =  new ButtonStyle();
        button.name =  lang.name;
        button.style = style;
        this.buttons.push(button);
    });
}


//html
<p-multiSelect [options]="languages" [(ngModel)]="selectedLanguages" (onChange)="test($event)" defaultLabel="Select a Language" optionLabel="name" class="multiselect-custom">
        <ng-template let-value pTemplate="selectedItems">
            <div *ngIf="!selectedLanguages || selectedLanguages.length === 0" class="country-placeholder">
                Select Languages
            </div>
        </ng-template>
        <ng-template let-language pTemplate="item">
            <div class="country-item">
                <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + language.value.code.toLowerCase()" />
                <div></div>
            </div>
        </ng-template>
    </p-multiSelect>



How to change the icon of the checkbox in the Jtable?

I've generated a column consist of checkboxes using the Boolean.class shown on my code, my problem is that I don't know how to change the icon of the checkboxes. Can you show some examples how this can be done?

 public class MyTableModel extends DefaultTableModel{

public MyTableModel() {
  super(new String[]{"Question No.", "Question", "Satisfied", "Not Satisfied"}, 0);
}

@Override
public Class<?> getColumnClass(int columnIndex) {
  Class cls = String.class;
  switch (columnIndex) {
     case 0:
      cls = Integer.class;
      break;
      case 1:
      cls = Integer.class;
      break;
     case 2:
      clazz = Boolean.class;
      break;
      case 3:
      cls = Boolean.class;
      break;
  }
  return clazz;
}

@Override
public boolean isCellEditable(int row, int column) {
  switch (column) {
     case 0: return false;
     case 1: return false;
     case 2: return ! ((Boolean) getValueAt(row, 3)).booleanValue();
     case 3:
        return ! ((Boolean) getValueAt(row, 2)).booleanValue();
 }
return true;
}



mardi 24 novembre 2020

WPF: override MaterialDesign check box style

So I have this CheckBox Style based on MaterialDesignActionCheckBox:

<Style x:Key="MaterialDesignActionAccentCheckBox2" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignActionCheckBox}">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Ellipse x:Name="ellipse"
                             Width="15"
                             Height="15"
                             Fill="#353535"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter TargetName="ellipse" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="ellipse" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="Transparent"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="10"/>
            </Trigger>
        </Style.Triggers>
    </Style>

And i did now wanted the V sign when the CheckBox is checked so I Make it Transparent (under IsChecked true) and put Ellipse. After I added this ControlTemplate.Triggers I cannot see my Ellipse. All I want to do is to show this Ellipse inside my Checkbox




C# Access check boxes within combobox dropdown

So I'm currently trying to access check box items held as a collection within a combo box. My problem is, when I go to set:

var dropGenre = Drop_Genre.Items;

and change the position each run through a loop, I cant seem to access anything "check box like" at any point. I'm trying to see which items in the drop down are "checked" and return the name of those items.

I tried looking through the windows documentation but didn't have any luck finding out about check boxes within combo boxes; in fact most sources I checked were asking if it was even possible and didn't seem to reference this functionality at all. Thanks, sorry if this is poor formatting, first time asking something on here.




ASP.net How to reverse specific CheckBox visually?

Goal: User toggles a checkbox, and then a modal pops up to confirm either Yes(update DB), or No (undo selection). I want to have checkbox reverse user selection IF they click the No button in the confirmation dialog. For example: If they click to toggle On, but when the confirmation comes they click No, it should toggle back to Off

Problem/What's happening: When I debug, it says the value is being reversed, however on the page I can see nothing has visually happened

What I've tried: I tried with conditional, setting the checkboxvariable.Checked = true or false accordingly. But it doesn't change anything on screen. Ive used the debugger to watch values while doing this I've tried setting it simply with no conditions, and also tried it with different conditions. How to reset a checkbox value

C#:

//Checkbox event
 protected void cbUpdateAvailability_Click(object sender, EventArgs e)
 {
        CheckBox cbSender = (CheckBox)sender;
        providerIndex = getProviderIndexCB(cbSender.ClientID);//int providerIndex = getProviderIndexCB(cbSender.ClientID);
        
        Session["providerIndex"] = providerIndex;
        availableTxt.Text = (cbSender.Checked) ? "available" : "unavailable";
        DrName.Text = providerStatsListDto.ProviderStatsList[providerIndex].LastName;
        
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "availabilityModal", "$('#availabilityModal').modal();", true);
        upModal.Update();
 }
    
//Confirmation Button click event
protected void btnUpdateAvailability_Click(object sender, EventArgs e)
{
    Button btnSender = (Button)sender;
    if (btnSender.Text == "Yes") {
        //Update DB
    }
    else
    {
        //If they click No , flip checkbox back
        //Session variable to know which checkbox?
        chkOnOff2.Checked = (chkOnOff2.Checked) ? false : true; //even when Checked becomes false, it doesn't visually change, why?
        //chkOnOff2.Checked = (availableTxt.Text == "available") ? false :  true;
    }



How to add validation for Dropdownchoice and Checkbox in Wicket java

I have a checkbox and dropdown in a html page . On click of submit if none of them are selected , their should be a error message that any one of them should be mandatory field and asked to select one value atleast.

I created a new class as as FormValidator implementing IValidator and override the validate method. But i am unaware how to use the dropdown choice value and checkbox value on submit method call ad how to display in html .

Java code -

IModel<Project> dropdownModel =   new PropertyModel<Project>(criteria,"selectedBillableProject");
        DropDownChoice<Project> billableProjectsList = new DropDownChoice<>(
                "projectsList",
                dropdownModel,
                billableProjects,
                new ChoiceRenderer<Project>("fullNameWithCustomer"));
        billableProjectsList.setLabel(new ResourceModel("printMonth.billable"));
        billableProjectsList.setRequired(true);
form.add(new FormComponentValidator(billableProjectsList.getModelObject()));
        
        form.add(billableProjectsList);


public class FormComponentValidator  implements IFormValidator {
    String projectName;
    public FormComponentValidator(Project modelObject){

        projectName  = modelObject.getFullNameWithCustomer();
    }

    @Override
    public FormComponent<?>[] getDependentFormComponents() {
        return new FormComponent[0];
    }

    @Override
    public void validate(Form<?> form) {

        if(projectName.equals(null)){
            form.error("project.required");
        }

    }
}



how display text only inside the related input field?

I have input boxes which are getting enabled when the checkbox of that input box get checked by user. then I want to type in that particular input box, but when I am in a particular input box then my text is showing in the all the input.

import React, { useState } from "react";
//some imports related to checkbox

export default function Rename() {
  //input
  const [value, setValue] = useState("");
 

  //checkbox group
  const [checkedOptions, setCheckedOptions] = useState({});

  const onOSelect = (event) => {
  
    const item = event.target.name;
    const isChecked = event.target.checked;
   

    setCheckedOptions({
      ...checkedOptions,
      [item]: isChecked,
    });
  };

  //data
  const data = [
    { label: "Email", name: "email" },
    { label: "Phone", name: "phone" },
    { label: "Mail", name: "mail" },
    { label: "test", name: "test" },
  ];

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div className="rename-tab-container">
      <div className="checkbox-wrapper">
        <MediaCard className="checkbox-card">
          <CheckboxGroup
            checkedOptions={checkedOptions}
            groupLabel="Checkbox group label"
            onChange={onOSelect}
            options={data}
          />
        </MediaCard>
      </div>
      <MediaCard className="input-card">
        <div className="input-container">
          {data.map((item, key) => (
            <div key={key.name} className="rename-wrapper">
              <Input
                isRequired
                label={item.name}
                minLength={4}
                name={item.name}
                onChange={handleChange}
                onError={handleError}
                placeholder="Placeholder"
                isDisabled={!checkedOptions[item.name]}
                inputClassName="rename-input-box"
                value={value}
              />
            </div>
          ))}
        </div>
      </MediaCard>
    </div>
  );
}

Looking for a solution, how display my typed text only in the related input field and get that value in particular state.




I want to make a filter by category in Angular

enter image description here

I want to make filter like this, please suggest me any doc or reference or if possible provide me the code in stackblitz