I am trying to set up a check box in my grid for selection. Here is my sample grid looks like.
<div class="row section-top">
<div class="col">
<SfGrid #ref="GridInstance" DataSource="#_names" AllowSelection="true" AllowPaging="true">
<GridSelectionSettings CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>
<GridColumns>
<GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>
<GridColumn Field="#nameof(Id)" HeaderText="Id" IsPrimaryKey="true"></GridColumn>
<GridColumn Field="#nameof(Name)" HeaderText="Name"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
It does show me checkbox and also select all works. But How Do i bind this to the grid so i can get the selected records/objects?
I tried this on click event but not working.
var selectedItems = this.GridInstance.GetSelectedRecordsAsync();
var selectedItemIds = new List<int>();
selectedItems.GetAwaiter().OnCompleted(() =>
{
selectedItemIds = selectedItems.Result.Select(s => s.Id).ToList();
});
Can anyone help how i can get selected grid rows from Syncfusion Blazor SFGrid?
Related
I am new to FormGroup, so I guess I making some very silly mistakes, but I am not able to figure out where.
I have designed this below UI:
Now, as it can be seen, there are 3 checkboxes under Select Server Option. So, what I want is on click of the Download button, to submit the values of the checkbox.
What I have tried till now is as shown here:
this.systemlogsform = this.fb.group({
logtype: ['installlogs', Validators.required],
servers: [[], Validators.required]
});
getServiceListData(type) {
this.nodeList = [];
this.apiservice.getClusterInfo()
.subscribe(data => {
if (Array.isArray(data.NodeList)) {
this.nodeList = data.NodeList;
} else {
this.nodeList.push(data.NodeList);
}
})
}
The below is the html code:
<div class="large-12 small-12 medium-12" *ngIf="systemlogsform.value.logtype==='installlogs'">
<div>
<label class="col-md-12 md-padding--s md-padding__left--l md-padding__top--s" for="" formGroupName="systemService"><strong>
Select Server Option
</strong></label>
<div
class="col-md-3"
*ngFor="let node of nodeList; let j=index;"
>
<md-checkbox
style="padding-left:45px;"
name="TDG"
value="{{node.FQDN}}"
label="{{node.FQDN}}"
htmlId="{{node.HostName}}"
[formControl]="node"
[formControlName]="j">
</md-checkbox>
</div>
</div>
</div>
The checkbox values will be coming from an api call. So, I can not hard code the values in the form group.
1) So, how do I submit multiple values of the checkbox if more than 1 of them are clicked.
2) Also, I am facing issue in retrieving the value of the checkbox, can someone please help me with this.
I have a dynamic list, containing varying no. of items, being displayed based on some selection.
If the list has more than 7 items, on hovering, the list shows a scroll bar. (If there are fewer items, there will be no scroll bar.)
I have found the element of the scroll bar based on its class name but tring to scroll using webdriver fails.
Here is the code:
//hover
Actions action = new Actions(driver);
WebElement placesList = driver.findElement(By.id("divPlaces"));
action.moveToElement(placesList).perform();
//scroll the list
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true)", element);
HTML code:
<div class="blk">
<div class="smlhead">
Places
</div>
<div id="divPlacesCont" class="sbarPrnt" style="height: 179.219px;">
<div id="divPlaces" class="tilewrap sbarcont" style="height: 179px;">
<div class="blksmlr smlhead sngline">
hyd
</div>
(removed 7 more items for simplicity...)
<div class="sbar" style="display: block;">
<div class="sbarpos" style="height: 152.576px; top: 0px;"></div>
</div>
</div>
</div>
</div>
Update: I got a thought to share. The list element is always visible on the left of the page (and I need not move/scroll to this element to make it visible as actions.moveToElement() does). When I hover, scroll bar within this list appears and I can click the bar, drag it down to see (last) items.
With the above code, it is moving the "frame" up i.e. everything from 'Country' to the list below move a bit up but still the last hidden item in the dynamic is not visible.
I want to validate the state of toggle button, whether it is ON or OFF?
I tried a lot but the one thing which is very strange is that, HTML is not getting changed in both the state.
<div class="c-form-section">
<div class="o-grid">
<div class="o-grid__col o-grid__col--1-of-1">
<div class="o-grid__col o-grid__col--1-of-1 o-grid__col-tb--1-of-2"> </div>
<div class="o-grid__col o-grid__col--1-of-1 o-grid__col-tb--1-of-2 o-grid__col--spaced-tb">
<div class="u-spaced-top--quarter-square">
<section class="c-permission-fields">
<div class="c-permission-fields__block c-permission-fields__block--main ">
<div class="u-display--flex">
<div class="u-flex--grow">
<div>
<label class="c-control c-control--toggle ">
<input id="cardActivity" class="c-control__input" type="checkbox" value="1" name="cardActivity">
<span class="c-control__fake-input"></span>
<span class="c-control__label"> </span>
</label>
</div>
</div>
</div>
How m i suppose to validate this?
Thanks in advance!
You can use is_selected()(Python):
elem = driver.find_element_by_id("cardActivity")
if elem.is_selected():
# do stuff if selected
is_selected() will check if checkbox is selected.
In Java would be like this:
WebElement element = driver.findElement(By.id("cardActivity"));
if (element.isSelected()){
//do stuff
}
In Java binding:
boolean isChecked = driver.findElement(By.id("cardActivity")).isSelected();
or here is a method for checking/unchecking control:
public void checkCheckbox(boolean checked)
{
WebElement checkbox = driver.findElement(By.id("cardActivity"));
if (checked != checkbox.isSelected())
{
checkbox.click();
}
}
This code can be generalized for all controls of the same type but this is just general logic.
Dears follows a snippet using get_attribute("checked") method. Analyzing the attributes, it fits perfectly for what you want to do.
switch = instance.find_by_id(SWITCH_ID)
if switch.get_attribute("checked") == "false":
# do something because the toggle button is unchecked
I have a list in which data is filled as such:
<ul ui-sortable="sortableOptions" ng-model="hiringstagelist" class="sortable list">
<li ng-repeat="y in hiringstagelist">
<div class="row">
<div class="col-md-1">
<label class="switch">
<input id="{{y.id}}" class="switch-input" type="checkbox" ng-model="y.isDeleted" ng-click="deletehiringstage(y.id)" />
<span id="data_{{y.id}}" class="switch-label" data-on="" data-off=""></span>
<span class="switch-handle"></span>
</label>
</div>
<div class="col-md-11">
{{y.stageName}}
<span style="float:right;margin-right:10px;"><img src="~/Images/sortarrow.png" /></span>
</div>
</div>
</li>
</ul>
As I'm using angularjs drag and drop hence as soon as I drag and drop any item in the list an event gets triggered which is :
$scope.sortableOptions = {
stop: function (e, ui) {
var model = ui.item.model;
console.log(model);
var index = ui.item.sortable.index;
var draggedModel = ui.item.sortable.model;
var newProdArray = ui.item.sortable.resort.$modelValue;
}
}
With index I only get the old value of the item in the list. "newProdArray" doesn't seems to work. Can i use anything so that i can get a model with new index values along with other parameters od the item like id etc ?
Please guide
I think you want ui.item.sortable.dropindex which gives you the index the item was dropped at. See here for documentation.
I'm a noob to AngularJS. As a learning exercise I am creating a typeahead control.
The typeahead is comprised of a text box for filtering the options, an unordered list for displaying the menu of short-listed options, and a Show/Hide button for manually toggling the list.
The text box filters the li elements using ng-repeat. When selecting an li item from the list, I populate the text box with the selected value, and then hide the list.
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="hideMenu(); query.id = item.id">
{{item.id}}
</li>
</ul>
</div>
My issue is that when the value is assigned to the text box, the list is momentarily filtered to the one option selected (because the text box is also the source of the ng-repeat filter), before hiding the menu. What I want id for the menu to be hidden without being refreshed with the filter first.
It should be noted that this only occurs when using CSS transitions which I am using to fade the menu out.
Here is a plnkr to illustrate.
Here's a working Plnkr. I basically gave your menu time to finish its animation before setting the value. Relevant code is as follows:
$scope.selectItem = function(id){
$scope.isActive = false;
$timeout(function(){
$scope.query.id = id;
}, 250);
}
...and the HTML using the newly created selectItem method:
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="selectItem(item.id)">
{{item.id}}
</li>
</ul>
</div>