How to set new dataSource and refresh kendo grid with new data? - javascript

I have $scope.addProcessOwner function in Add owner grid config now when user click on each owner i am creating new array object with selectedOwners, Now i want to set selectedOwners as dataSource of selected owner grid.
1- How can i set selectedOwners as a dataSource of selectedOwnerGridOptions ?
2- How can i refresh selected owner grid once owner is selected from Add owner grid ?
grid.html
Add owner
<div kendo-grid="ownerSearch" options="ownerSearchResultGrid"
k-rebind="getOwnerSearchResultGrid"></div>
selected owner
<div kendo-grid="selectedOwner" options="selectedOwnerGridOptions" k-data-source="selectedOwnerGrid"></div>
Ctrl.js
var selectedOwners = [];
$scope.addProcessOwner = function(dataItem){
var selectedOwner = {
fullName: dataItem.fullName,
workerKey: dataItem.workerKey,
stdId: dataItem.stdId,
workEmailAddressText: dataItem.workEmailAddressText
};
var isExists = function(e) {
if (e.fullName === selectedOwner.fullName && e.workerKey === selectedOwner.workerKey) {
return true;
}
};
if (!selectedOwners.some(isExists)) {
selectedOwners.push(selectedOwner);
}
console.log('WORKER DATA',JSON.stringify(selectedOwners));
$scope.selectedOwnerGrid = selectedOwners;
$scope.selectedOwnerGridOptions.dataSource.read();
};

Instead of this:
$scope.selectedOwnerGrid = selectedOwners;
$scope.selectedOwnerGridOptions.dataSource.read();
Try this:
$scope.selectedOwnerGridOptions.dataSource.data(selectedOwners);

Related

Only first element is visible in Dynamic Dropdown list

I am trying to have a dependent Dropdown list, Districts based on the value of selected State. But my code is rendering only the first element of the dynamic dropdown list.
<div class="input-field col s3">
<select id="nativeDistr">
<option value="" disabled selected>
Native District
</option>
</select>
<label>Destination District</label>
;
Appscript Code Snippet.
function getDistricts(state) {
Logger.log("Selected State=" + state);
var fileName = "states-and-districts.json";
var files = DriveApp.getFilesByName(fileName);
try {
if (files.hasNext()) {
var file = files.next();
var content = file.getBlob().getDataAsString();
var json = JSON.parse(content).states_districts;
for (var i = 0; i < json.length; i++) {
if (json[i]["state"] === state) {
var districts = json[i]["districts"];
}
}
}
var optList = generateOptions(districts);
Logger.log(optList);
return optList;
} catch (err) {
return "Error getting data";
}
}
Javascript code
<script>
document.getElementById("nativeState").addEventListener("change", getDistr);
function getDistr() {
var state = document.getElementById("nativeState").value;
console.log("state scriptt:" + state);
google.script.run.withSuccessHandler(updatedistricts).getDistricts(state);
}
function updatedistricts(districts) {
console.log("From districts:" + districts);
var nativeDistr = document.getElementById("nativeDistr");
nativeDistr.innerHTML = districts;
M.updateTextFields();
} // When user selects the state the valuee off the state should get registered for district search
Blockquote
Durin execution I am getting the complete list of dynamic dropdown but while rendering the page only the first element is getting displayed.
Blockquote
M.updateTextFields() do not update dynamic dropdown, it updates the text fields. So there is a need to store a global reference to materialize select box to initialize it, post that there is a need to destroy that instance, and then reinitialize the select box again.
<script>
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll("select");
var instances = M.FormSelect.init(elems);
});
document.getElementById("nativeState").addEventListener("change", getDistr);
function getDistr() {
var state = document.getElementById("nativeState").value;
google.script.run.withSuccessHandler(updatedistricts).getDistricts(state);
}
function updatedistricts(distrList){
nativeDistr.innerHTML = distrList;
var subcatSelectElem = document.querySelectorAll("select");
var subcatSelectInstance = M.FormSelect.init(subcatSelectElem, {});
}
Credit for soln.: Chicago Computer Classes

After refresh the page image is not show in the view in AngularJS?

I have to upload a image in AnguarJS using firebase but problem is that the image is properly uploaded as well as i have to store the imageURL into the localStorage but after refresh the page image is remove i don't uderstand what the problem
$scope.backgroundImageURL = [];
$scope.currentUserObject = {};
$scope.uploadBackgroundImage = function(event) {
//Get the userDetail of the current logged in user
$scope.currentUserObject = localStorage.getItem('userName');
//Get the value from the input field and assign into the fireabse node
var userProductImg = $("#getImageAttribute")[0].files[0];
var PRODUCT_STORAGE_REF = firebase.storage().ref('user/image');
//get the date as well as put the imageURL from node
var rn = new Date().getTime().toString();
var task = PRODUCT_STORAGE_REF.child("loggedInUserObject").child($scope.currentUserObject).child(rn).put(userProductImg).then(function(snapshot) {
$timeout(function(){
$scope.backgroundImageURL.push(snapshot.downloadURL);
localStorage.setItem('userImageURL', $scope.backgroundImageURL);
}, 50);
})
}
<input type="file" id="getImageAttribute" ng-click="$event = $event" ng- model="display" multiple onchange="angular.element(this).scope().uploadBackgroundImage(event)"
/>
<span ng-repeat="imgURL in backgroundImageURL">
<img src="{{imgURL}}">
</span>
?
try using ng-src instead of src attribute as it will refresh the image if the there is a dynamic change in bacground img url.
You can more about this from here: https://www.w3schools.com/angular/ng_ng-src.asp
or
you can try this too : https://docs.angularjs.org/api/ng/directive/ngSrc
After refresh the page, your image array is empty:
$scope.backgroundImageURL = [];
You need a method to get images from the storage and assign them to your backgroundImageURL array, and this method has to be called as soon as you load the page.
Your code might be something like the following:
$scope.backgroundImageURL = [];
$scope.currentUserObject = {};
$scope.loadResources();
$scope.loadResources = function() {
$scope.backgroundImageURL = localStorage.getItem('userImageURL');
$scope.currentUserObject = localStorage.getItem('userName');
}
$scope.uploadBackgroundImage = function(event) {
//Get the userDetail of the current logged in user
$scope.currentUserObject = localStorage.getItem('userName');
//Get the value from the input field and assign into the fireabse node
var userProductImg = $("#getImageAttribute")[0].files[0];
var PRODUCT_STORAGE_REF = firebase.storage().ref('user/image');
//get the date as well as put the imageURL from node
var rn = new Date().getTime().toString();
var task = PRODUCT_STORAGE_REF.child("loggedInUserObject").child($scope.currentUserObject).child(rn).put(userProductImg).then(function(snapshot) {
$timeout(function(){
$scope.backgroundImageURL.push(snapshot.downloadURL);
localStorage.setItem('userImageURL', $scope.backgroundImageURL);
}, 50);
})
}

How can I set the selected option of the select box after using exFilterColumn

So what I want to do is to pre-select few filters depending on the parameters of the location.search
Example Url : index.html?Type=Building&Stage=Stage 2
Here is my code
var searchObj = searchToObj(); // {Type: 'Building', Stage: 'Stage 2'};
var presetFilters = [];
for (var filterName in searchObj){
if (filterName != 'search') {
var filterID = oTable.column(filterName+':name').index();
presetFilters.push([filterID, searchObj[filterName]]);
}
}
yadcf.exFilterColumn(oTable, presetFilters);
The table is filtered but the select boxes stay on the default label.
What can I do?

angular ui-grid event: column selected

I am trying to get selected column value based on the selection of a column on ui grid. From that value i used to filter another uigrid table so how to call a function on select of column and the selected column value.
This is my sample code which i am using presently:
$scope.gridOptions[0].onRegisterApi = function(gridApi){
$scope.gridApi.push(gridApi);
gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
var name = newRowCol.col.name;
var filterWithData = newRowCol.row.entity[name];
//$scope.filtert(name,filterWithData);
});
};
I have created a plunker for your problem. Please check:
Plunker
$scope.refreshData = function (termObj) {
$scope.gridOptions2.data = $scope.data;
if (termObj.length > 2) {
while (termObj) {
var oSearchArray = termObj.split(' ');
$scope.gridOptions2.data = $filter('filter')($scope.gridOptions2.data, oSearchArray[0], undefined);
console.log($scope.gridOptions2.data)
oSearchArray.shift();
termObj = (oSearchArray.length !== 0) ? oSearchArray.join(' ') : '';
}
}
else {
$scope.gridOptions2.data = $scope.gridData;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
}
$scope.$apply();
};

Netsuite Saved Search to Suitelet Sublist

I am trying to populate a sublist in a suitelet with data from a custom saved search that I have already created. My problem is that the sublist is only populating data from fields that correspond to the "type" of saved search I am doing. For example, in this instance the saved search is a "transaction" type search. If, for example, I want to reference a customer field withing the saved search, say "Name" and "Billing Address", this data will not populate the sublist in the suitelet. All other fields that are being referenced in the Transaction record itself populate the sublist fine. I was just wondering if anyone has ever run into the same issue, anyways here's the code I'm trying to implement.
var form,
sublist;
//GET
if (request.getMethod() == 'GET')
{
//create form
form = nlapiCreateForm('Test Custom Suitelet Form', false);
//create sublist to show results
sublist = form.addSubList('custpage_sublist_id', 'list', 'Item List');
//form buttons
form.addSubmitButton('Submit');
form.addResetButton('Reset');
// run existing saved search
var searchResults = nlapiSearchRecord('transaction','customsearchID');
var columns = searchResults[0].getAllColumns();
// Add the search column names to the sublist field
for ( var i=0; i< columns.length; i++ )
{
sublist.addField(columns[i].getName() ,'text', columns[i].getLabel() );
nlapiLogExecution('DEBUG', 'Column Label',columns[i].getLabel());
}
//additional sublist fields
sublist.addMarkAllButtons();
sublist.addField('custfield_selected', 'checkbox', 'Selected');
sublist.setLineItemValues(searchResults)
response.writePage(form);
}
If you review the nlobjSublist docs you'll see that sublist.setLineItemValues can also take an array of hashes. What does work is:
function getJoinedName(col) {
var join = col.getJoin();
return join ? col.getName() + '__' + join : col.getName();
}
searchResults[0].getAllColumns().forEach(function(col) {
sublist.addField(getJoinedName(col), 'text', col.getLabel());
nlapiLogExecution('DEBUG', 'Column Label', col.getLabel());
});
var resolvedJoins = searchResults.map(function(sr) {
var ret = {
id: sr.getId()
};
sr.getAllColumns().forEach(function(col) {
ret[getJoinedName(col)] = sr.getText(col) || sr.getValue(col);
});
return ret;
});
sublist.setLineItemValues(resolvedJoins);

Categories

Resources