In the next listbox I load elements with template:
<listbox model="#load(vm.resAccepted)" selectedItem="#bind(vm.selResAccepted)">
<template name="model">
<listitem>
<listcell label="#load(each.eventName)" />
<listcell label="#load(each.userName)" />
<listcell>
<button image="/img/button_mail.png"/>
</listcell>
</listitem>
</template>
</listbox>
My goal is to enable the button of the listitem ONLY for the row the user selects.
To do this, I try
<button disabled="#load(vm.selResAccepted.id=each.id?'false':'true')" />
checking if the unique field id is the same of the selected element, but it fails.
Any help will be appreciated.
You can use eq for equals comparison:
<button disabled="#load(vm.selResAccepted.id eq each.id?'false':'true')" />
or maybe even better: disabled when selected item is not the current item
<button disabled="#load(vm.selResAccepted ne each)" />
here ne is not equal
Related
I used react admin's data grid to show my data from api and put functionField with Delete mui on it. I would like to exempt one column like to toggle DeleteButton to render modal but in datagrid I always forwarded to another view, here's my sample component
<List
actions={<ListActions />}
bulkActionButtons={false}
{...props}
sort={{
field: 'name',
order: 'DESC'
}}
empty={true}
>
<Datagrid rowClick="edit" >
<TextField label="Account No." source="account_number" emptyText="-" />
<TextField label="Account ID" source="accountId" emptyText="-" />
<TextField label="Balance" source="balance" emptyText="-" />
<FunctionField label="Action" render={ (rec: any) => <Delete onClick={() => handleDelete(rec)} /> } />
</Datagrid>
</List>
but each time I click the delete button it redirect to edit view thanks
Because you specified <Datagrid rowClick="edit">, any click on a row redirects the user to the corresponding edit view. If that's not what you want, you have two options:
remove the rowClick="edit" bit, and add an <EditButton> on every row instead.
in your click event handler, cancel event propagation to avoid that it's handled by DatagridRow after you handle it.
<Delete onClick={(event) => {
handleDelete(rec);
event.stopPropagation();
}} />
How to add icons to a TextField with NativeScript like you can see on the image: here
My xhtml code:
<StackLayout>
<Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image>
<TextField #username class="input" hint="GEBRUIKERSNAAM" [(ngModel)]="user.username" autocorrect="false"
autocapitalizationType="none"></TextField>
<TextField #password class="input" hint="PASWOORD" secure="true" [(ngModel)]="user.password"></TextField>
<Button class="btn btn-primary btn-login icon" text="\e912 INLOGGEN" (tap)="login()"></Button>
<button class="btn btn-forgot-pass" text="PASWOORD VERGETEN?" (tap)="forgotpass()"></button>
Check out icon fonts for NativeScript:
https://docs.nativescript.org/ui/icon-fonts
"...
Follow the instructions on the icon font webpage to determine the hex codes of each font glyph, i.e., icon. Add a Label component to your NativeScript app and bind the Label's text property to a one-letter string generated from the character code of the icon you want to show, i.e., String.fromCharCode(0xe903).
..."
I believe this is what you're trying to do.
You can wrap your TextFields in a StackLayout with a horizontal orientation like
<StackLayout orientation="horizontal">
<!--Your password TextField-->
<TextField
#password
class="input"
hint="PASWOORD"
secure="true"
[(ngModel)]="user.password"
></TextField>
<!--You can then place the icon-->
<Label class="fa" text="" (tap)="toggleShow()"></Label>
</StackLayout>
I need to align columns in <form:SimpleForm>. I need 4 columns in a row but only 2 columns are aligned. Here is my example, Please refer JsBin
Needed output :
label input-field label input-field
current output :
label input-field
label input-field
To use a new container on the right, simply set an empty title.
But be aware tabbing won't be from left to right, top to bottom but (per container) top to bottom, left to right
After all, it just a SimpleForm ;-)
See this working example (please run the example full-page, otherwise it will still show the fields top-town because of the responsive nature):
sap.ui.controller("view1.initial", {
onInit : function() { }
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm
maxContainerCols="2"
editable="true"
layout="ResponsiveGridLayout"
labelSpanL="4"
labelSpanM="4"
emptySpanL="0"
emptySpanM="0"
columnsL="2"
columnsM="2">
<f:content>
<core:Title text="A Title" />
<Label text="1st label" required="true" />
<Input value="Blah" />
<core:Title text="" /> <!-- empty title so it looks like this container belongs to the left one -->
<Label text="2nd label" required="true" />
<Input value="Blah" />
</f:content>
</f:SimpleForm>
</mvc:View>
</script>
i have an check boxlist with (6 items under it). and i have an search button. if user clicks Search button it gets all the result.
i am binding the items for checkboxlist using database in .cs file
condition1:
but now if user selects a checkbox[item1] its gets selected
and he tries to select an 2 checkbox[item2] then firstselected checkbox[item1] should be unselected. only checkbox[item2] should be selected
condition 2:
now if user as selected checkbox1 [item1] it gets selected. and now if user again clicks on checkboxi[item1] then it should get deselected.
either you can provide me the solution in javascript or JQuery
any help would be great . looking forward for an solution
thank you
use Radio button. The only problem you will face is when you want to de-select the radio button. You can write in a javascript for 'onClick' of radio button. The onClick function can check whether radio button is selected, if it is not select it else deselect it.
Hope this helps. See Example
RDJ
While I definitely agree with the consensus that radio buttons are the way to go for your described use-case, here is a little snipped of jquery that will cause checkboxes to behave like radio buttons. You simply need to add a "groupname" attribute to your checkbox tag.
HTML:
<fieldset>
<legend>Group 1 - radio button behavior</legend>
<input type="checkbox" groupname="group1" value="1" /> Checkbox 1<br />
<input type="checkbox" groupname="group1" value="2" /> Checkbox 2<br />
<input type="checkbox" groupname="group1" value="3" /> Checkbox 3<br />
<input type="checkbox" groupname="group1" value="4" /> Checkbox 4<br />
<input type="checkbox" groupname="group1" value="5" /> Checkbox 5<br />
</fieldset>
<fieldset>
<legend>Group 2 - radio button behavior</legend>
<input type="checkbox" groupname="group2" value="1" /> Checkbox 1<br />
<input type="checkbox" groupname="group2" value="2" /> Checkbox 2<br />
<input type="checkbox" groupname="group2" value="3" /> Checkbox 3<br />
<input type="checkbox" groupname="group2" value="4" /> Checkbox 4<br />
<input type="checkbox" groupname="group2" value="5" /> Checkbox 5<br />
</fieldset>
<fieldset>
<legend>Group 3 normal checkbox behavior</legend>
<input type="checkbox" value="1" /> Checkbox 1<br />
<input type="checkbox" value="2" /> Checkbox 2<br />
<input type="checkbox" value="3" /> Checkbox 3<br />
<input type="checkbox" value="4" /> Checkbox 4<br />
<input type="checkbox" value="5" /> Checkbox 5<br />
</fieldset>
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
var groupName = $(this).attr('groupname');
if (!groupName)
return;
var checked = $(this).is(':checked');
$("input[groupname='" + groupName + "']:checked").each(function() {
$(this).prop('checked', '');
});
if (checked)
$(this).prop('checked', 'checked');
});
});
</script>
I'm sure there are opportunities to increase brevity and performance, but this should get you started.
Why don't you use radio buttons, they are ideal for the purpose that you mentioned.
Edit:
If you necessarily want to use checkbox list then assign some logical ids to those checkboxes so that you can access them in JavaScript.
On each onclick event of the checkboxes call the JavaScript and in the JavaScript loop through and see
If any checkbox is checked other
than the present clicked checkbox,
then make them unselected.
If the present checkbox is already
checked then just toggle it.
You can see if a checkbox is checked using $("#checkboxId").is(":checked") which returns true if a checkbox is checked.
Thanks
this was the code that helped me to solve this issue
just add the script -
var objChkd;
function HandleOnCheck()
{
var chkLst = document.getElementById('CheckBoxList1');
if(objChkd && objChkd.checked)
objChkd.checked=false;objChkd = event.srcElement;
}
and register the client event to the 'CheckBoxList1' at the Page_load as
CheckBoxList1.Attributes.Add("onclick","return HandleOnCheck()");
You might want to have a look at the MutuallyExclusiveCheckBoxExtender.
.aspx
<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" />
.js
$(document).ready(function () {
LimitCheckboxes('input[name*=chkList]', 3);
}
function LimitCheckboxes(control, max) {
$(control).live('click', function () {
//Count the Total Selection in CheckBoxList
var totCount = 1;
$(this).siblings().each(function () {
if ($(this).attr("checked")) { totCount++; }
});
//if number of selected item is greater than the max, dont select.
if (totCount > max) { return false; }
return true;
});
}
PS: Make sure you use the RepeatLayout="Flow" to get rid of the annoying table format.
we can do in java script to get the solution for this.
For this first get the id of the checked item and go thorough the remaining items using loop then unchecked the remaining items
http://csharpektroncmssql.blogspot.com/2011/11/uncheck-check-box-if-another-check-box.html
My jQuery solution for this is coded as follows:
$(document).ready(function () {
SetCheckboxListSingle('cblFaxTypes');
});
function SetCheckboxListSingle(cblId) {
$('#' + cblId).find('input[type="checkbox"]').each(function () {
$(this).bind('click', function () {
var clickedCbxId = $(this).attr('id');
$('#cblFaxTypes').find('input[type="checkbox"]').each(function () {
if (clickedCbxId == $(this).attr('id'))
return true;
// do not use JQuery to uncheck the here because it breaks'defaultChecked'property
// http://bugs.jquery.com/ticket/10357
document.getElementById($(this).attr('id')).checked = false;
});
});
});
}
Try this solution:
Code Behind (C#) :
foreach (ListItem listItem in checkBoxList.Items)
{
listItem.Attributes.Add("onclick", "makeSelection(this);");
}
Java Script :
function makeSelection(checkBox)
{
var checkBoxList = checkBox;
while (checkBoxList.parentElement.tagName.toLowerCase() != "table")
{
checkBoxList = checkBoxList.parentElement;
}
var aField = checkBoxList.getElementsByTagName("input");
var bChecked = checkBox.checked;
for (i = 0; i < aField.length; i++)
{
aField[i].checked = (aField[i].id == checkBox.id && bChecked);
}
}
I am able to use the following to get the value of the selected radio button (of the radio button list rblReason)
var reasonId = $('#rblReason').find('input[checked]').val();
How can I get the innerText of the radio button selected?
ty
A radio button has no innerText, it is an empty element. What is your markup?
If you have a parent which contains the text you want:
<div> <input type="radio" name="thing" value="foo" /> Hello </div>
Then you could use:
var text= $('#rblReason input:checked').parent().text();
If you have a label element associated with the radio:
<input type="radio" name="thing" value="foo" id="thing-foo" />
<label for="thing-foo"> Hello </label>
then you could do:
var id= $('#rblReason input:checked').attr('id');
var text= $('label[for='+id+']').text();
Note, use :checked to see which checkbox/radio is currently selected. [checked] means testing that the element has a checked attribute, which will always return the initially-checked radio regardless of what the user has selected. [Except in IE, due to a bug.]