ProductStore consist of several products and its descriptions.
product item I select from combo, description from textarea.
How can I load them back into form(combo, textarea).
Thanks in advance
I assume the combo is loaded from the store so the combo box has the id of the products. Put a listener on the combo box when a product is selected from the combo box get its id. Look up the id in the store and get the record. Take that record and get the data you need and populate the fields with it. Here's the basic idea you'll need to adapt this to your code.
var productId = combo.getValue(); //the id from the selected product in the combo box.
var rec = store.getById(productId );
//You can also use rec.get('description');
var desc = rec.data.description;
var productName= rec.data.name;
var id= rec.data.id;
//Now take these values and use them to fill in your form
textField.setValue(desc);
Related
I am working with a lightning:treegrid component.
The onrowselection attribute of lightning:treegrid invokes a method on js controller whenever a row is selected/deselected.
I am able to fetch the currently selected rows using the getSelectedRows() method.
But if I deselect a row, I am not able to find its Id or row data (which is deselected) in the js controller.
Aura:
<lightning:treeGrid columns="{!v.gridColumns}"
data="{!v.gridData}"
keyField="idRef"
aura:id="productTree"
expandedRows="{! v.gridExpandedRows }"
onrowselection="{! c.getSelectedRows}"
ontoggle = "{!c.handleToggle}"
selectedRows = "{!v.selectedIds}"
isLoading="{! v.isLoading }"
/>
JS:
getSelectedRows: function(cmp, event, helper) {
//get selected rows
var curRows = event.getParam('selectedRows');
//how to get the row that is deselected
}
Can anyone please help?
There is no standard way on lightning:treegrid component to obtain a list of deselected rows. There are many other limitations on this component which make it practically useless.
I followed these steps to obtain the deselected row:
Create an attribute that stores ids associated with all selected
rows. Let us name this oldSelectedRows.
Then obtain a list of all currently selected rows using
cmp.find("aura_id_of_treegrid").getSelectedRows(). Let us name it
selectedRows.
Find the difference between oldSelectedRows and selectedRows. This fetches you deselected item.
How to add drop-down and input field in the angular ui-grid table? If I have list of values coming as drop-down, if I want enter a new value which not available in drop-down through input field?
Accordin to the sample
it would be required to handle pushing new items to the editDropdownOptionsArray via needed action (edit or whatever) like that (the reference to the upper sample):
app.js
$scope.click = function(){
var optionsArray = $scope.gridOptions.columnDefs[2].editDropdownOptionsArray;
optionsArray.push('onemore '+ optionsArray.length);
}
index.html
<button ng-click="click()">Add new value</button>
How do we get only the last selected value in multiselect combobox and not all the selected values? For example if we select three values 1, 3 and 2, then I want to retrieve 2 as it was selected at last.
When you get the value of combo by using combo.value you will see an array that is in order how you selected the combo data from combo Box. This leads you get the last index of combo.value will be your required result.
In below code I taken a combo values and displaying the last result.
var combo = this.up().down('combo');
var CoboVal = combo.value;
var CoboValLength = CoboVal.length;
if(CoboValLength !== 0){
var CoboValData = CoboVal[CoboValLength-1];
alert(CoboValData);
}
I created a fiddle for you please check.
I have three dropdown boxes. I need to filter the data and need to be displayed in the table based on my checkbox selection(either with single checkbox or two checkboxes or three checkboxes).
I have done the following, but if we observe it clearly, I am not able to filter the data properly using AngularJS.
Like:
a. It should work for individual checkbox selection: means if I select any single checkbox either from Name or Description or Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
b. It should work for multiple(two) checkbox selection: means if I select any multiple checkboxes like either one from Name and one from Description or one from Description and one from Field4 or one from Field4 and one from Name, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
c. It should work for multiple(three) checkbox selection: means if I select the three checkboxes like one from Name and one from Description and one from Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
It is working fine for the first time checkbox selection only, means: after loading the above code/app, if we check either any one of the above selections(like whether single checkbox selection or two checkbox selection or three checkbox selection) then it's working fine, later it is not working(means if we uncheck the above any criteria and then if we select any checkbox again then it's not working, for that again we need to refresh the app/code then only it's working).
Example: if I select one from Name, then respective matched data will be displayed. Then again if I uncheck the same and check the some other checkbox like from Description then it's not working. Similarly for all the above criteria. You can observe it clearly.
Please let me know that what I have done wrong here and let me know how to filter it properly. Created Fiddle. Thanks in advance !
The problem is the convoluted filtering logic. Anytime you find yourself nesting lots of if statements, think about reorganizing the branching logic. By breaking it into smaller components, you can make it easier to manage, and if you can avoid using if altogether, then you only have to test one path, instead of several.
Every time a user checks a box, we need to make sure that we only display items that match however many boxes are checked. So we need to know 1) how many boxes are checked, n, and 2) how many items can be found with n matching fields.
We can take advantage of the fact that Boolean variables can be cast to integers (0 = false, true = 1) and use that to count the number of checked boxes, as well as the number of matches found.
We can also put the field names into an array, so that we don't have a lot of repetition in our functions.
Fiddle example here.
var fields = ["name", "description", "field4"];
//for each field, count how many fields the item matches
function getMatches(item, matchesNeeded) {
var foundMatches = 0;
fields.forEach(field => {
foundMatches += item[field] === $scope.pagedItems[field]
});
//make sure found at least one match and found desired minimum
return foundMatches && foundMatches >= matchesNeeded;
}
//count how many boxes are checked
//this will tell us how many different fields we are matching on
function numChecked() {
var count = 0;
fields.forEach(field => {
//this will auto convert falsy to 0.
//truthy values will be 1
count += Boolean($scope.pagedItems[field]);
});
return count;
}
$scope.filterItems = function(item) {
return getMatches(item, numChecked());
};
As #Larry pointed it was more based on logic. I have modified Apress book 'Pro AngularJS' Source Code from GIT for this.
Basic logic will in filter function as below -
$scope.categoryFilterFn = function (product) {
var canHave = false;//dont load by default
var atLeastOneTrue = false;//Check if previously checked any condition
angular.forEach(filterValues, function(selectedValue, key) {
var selectVals = Object.values(selectedValue);
if(selectVals.indexOf(product[key]) !== -1) {//if values exits in product.
canHave = !atLeastOneTrue ? true : canHave;
}else{
canHave = false;
}
atLeastOneTrue = true;
});
return canHave;
}
For working Fiddle.
I have a column named id in my datagrid. I have set visible:false for the field since I don't want to display the field in the grid.
But then how can I get the value in id? any hope?
I am adding column as
columns.push({'sTitle':'id','visible': 'false'},{'sTitle':'name','visible': 'false'});
And I am retrieving the value in selected row as
this.$view.on("click",function(event){
selectedRow = event.target.parentElement;
var name = selectedRow.cells[0].innerHTML;
}
Here in click event I can't get the value of id as html is not generated for the field with visible:false. So I am searching for a method to access my id field.
You should use display:none property
-Edit:
In order to specify a custom css to your angular datagrid you should also specify the columns. Something like:
$("#gridContainer").dxDataGrid({
// ...
columns: ['CompanyName', 'ContactName', 'City', 'Country']
});
Here's the page I referenced to
Edit2:
Since you're trying to retrieve the value of the field I would recommend you to take a look to this answer