I need to store both the name and the id of the option the user chooses in my SQL Database. Right now I am only storing the Id, by setting the value of the option to the current Id in the iteration.
#foreach (var item in selection)
{
if (item.Id.ToString() == contentId)
{
//dont mind this, just for displaying purposes
}
else
{
<option value="#item.Id" #(Request.Form["førstePrio"] != null && Request.Form["førstePrio"].ToString().Equals(item.Name.ToString()) ? " selected" : "")>#item.Name</option>
}
}
How can I store the #item.Name value as well in a separate Request.Form?
Edit:
#{
var selection = Model.Content.Site().FirstChild("Sprog").FirstChild("sommerhuse").Children()
.Where(x => x.IsVisible());
}
At the moment, the item.id is the value of the selection.
What you'd actually want to receive on the surface controller at this point would be the item / model itself
There's an example of such a controller here;
https://our.umbraco.org/documentation/Reference/Templating/Mvc/forms#creating-the-surfacecontroller-action
So you would want to post the whole object to this controller. From there you would be able to get whatever properties you needed from the model, in order to save them to the DB.
It would be something like
<option value="#item" #(Request.Form["førstePrio"] != null && Request.Form["førstePrio"].ToString().Equals(item.Name.ToString()) ? " selected" : "")>#item.Name</option>
Related
I have an array of json objects, and I want to be able to show either all of them, or remove some of them by filtering them by a key value.
I achieved this by creating a new constant:
const filtered = data.filter((item) => item.highVariance === false);
And a different constant:
const showHighVar = isHighVar ? data : filtered;
And then I have a checkbox that lets me toggle the shotHighVar constant in:
input type="checkbox" onChange={() => setHighVar(!isHighVar)}/>
In order to map it later in code:
{sorted(showHighVar).slice(0, 25 * pageIndex).map((x) => (...))}
But it seems to me like there should be a better way of doing this, but I can't figure it out.
There is nothing wrong with the way you are doing it. the one thing that i would change is that instead of creating filtered variable all the time just filter the data when isHighVar is false. So your code should look something like this -
const showHighVar = isHighVar ? data : data.filter((item) => item.highVariance === false);
{sorted(showHighVar).slice(0, 25 * pageIndex).map((x) => ( .....))}
Or when you are running the map function after sorting and slicing. just add a if statement in map function and check if isHighVar is false then return null else do whatever you are doing.
eg.
{sorted(data).slice(0, 25 * pageIndex).map((x) => {
if(isHighVar===false && x.highVariance!==false){
return null;
}
....
})}
So i have a project in which i have to display some data from the table. Now i want to change the size of the data based on a field above the table that is actually a select input field and sends a value to the angular controller. Now this is working perfectly except for the fact that the field doesn't show the selected number of data being displayed on the field.
This is the empty field. but the data is inserted correctly. Also on debugging I found another option here on the field that is not in the html code. Here's my code for the html and the controller.
View:
<li class="manual-dropdown pull-right">
<select id="ddPageSize" ng-model="PaginationInfo.pageSizeSelected" ng-change="ChangePageSize()" aria-controls="DepartmentTable" class="form-control pull-right">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="-1">All</option>
</select>
</li>
Controller:
$scope.PaginationInfo = {
maxSize: 5, // Limit number for pagination display number.
totalCount: 0, // Total number of items in all pages. initialize as a zero
pageIndex: 1, // Current page number. First page is 1.
pageSizeSelected: 5, // Maximum number of items per page.
}
GetData(searched);
function GetData(searched) {
//debugger
//var noOfPages = 1;
var SearchData = $scope.StatusSearch.Search;
if (SearchData == "") {
searched = false;
}
var Displaysize = $scope.PaginationInfo.pageSizeSelected;
var index = $scope.PaginationInfo.pageIndex;
if (searched == false) {
Get("/User/GetData?Size=" + Displaysize + "&index=" + index, false).then(function (d) {
//$("#").val()
//$scope.userAccount.CountryID = $("#ddCountryOptions").val();
// $scope.PaginationInfo.maxSize = d.info.maxSize;
$scope.PaginationInfo.totalCount = d.totalSize;
$scope.PaginationInfo.pageIndex = d.index;
$scope.PaginationInfo.pageSizeSelected = d.size;
//$scope.noOfPages = $scope.PaginationInfo.totalCount / $scope.PaginationInfo.pageSizeSelected;
$scope.accountlist = d.GetList;
$scope.$apply();
})
}
else {
// alert($scope.SearchData.Search);
Get("/User/SearchData?inputstring="+ SearchData, false).then(function (d) {
$scope.accountlist = d.GetList;
$scope.PaginationInfo.pageIndex = index;
$scope.PaginationInfo.pageSizeSelected = Displaysize;
$scope.PaginationInfo.totalCount = d.totalSize;
$scope.$apply();
});
}
}
explanation for the Controller: The data is loaded on page load so the GetData() function is called immediately. the default page size is set to 5 as shown and when i make a change to the field i recall the GetData() function with page size as a argument and the back end does the rest and returns a amount of data that i asked for. Also the reason there are 2 ajax calls in this function is to implement a search function. which check if the input field is empty or has a value and based on that output the data.
What i want to know is why is the page size field on my dropdown empty when i select a value.
Edit:
After a bit more research i found that the ng-Model is making a empty option with the value of the option i selected. Now the problem still remains i don't know how to display the value in the empty object. if i do select another option as selected, my ng-model value does not change. So i am still stuck with this. Also i have already give the ng-model an default value of 5 the same as my first dropdown option. so in case i tag any other option as selected, the ng-model option will remain 5 no matter how many times i change the dropdown value.
Alright i kind of solved my issue, though I am not sure if this is a good way to do it.
So what i did is simply bind the pageSizeSelected Value to the html select element by id.
$("#ddPageSize").val(d.size)
$scope.pageSizeSelected = $("#ddPageSize").val();
before $scope.$apply and it worked. Now when i select a value from the field it changes and displays the value i selected.
How to bind the selected dropdown values for each dropdown after move to another page and come back to the drop down list page, the value should be retain.
I used ngModel, it bind one value for all dropdowns.
But,i need like which value selected from the user that value should be retain for that particular dropdown.
I try to use [selected] in Angular 2. But, i dont know how its works. Can anyone explain that..
If you want to retain selected user value for your dropdown without saving to database.
Only thing you need to do is to store selected value in localStorage using
localstorage.setItem('dropdownSelectedItem','value1') on change event listener of select element.
And on page refresh you need to check if localStorage key 'dropdownSelectedItem' is selected or not.
If its set , then defaultValue parameter will be set with localstorage key value other wise you must be setting some default Value in your code for first time.
Only thing is set that defaultValue variable to localstorage value if set.
I get the values from local storage by using this line var dropLocalValues = JSON.parse(localStorage.getItem('localvaluekey'));
Then i build some logic.
var dropLocalValues = JSON.parse(localStorage.getItem('localvaluekey'));
var tempDropAssignValues = [];
if(dropLocalValues.length != 0)
{
for(var h=0;h<dropLocalValues.length;h++)
{
if(dropLocalValues[h].itemSeqID == this.getOneItem.seq_no)
{
for(var c=0;c<dropLocalValues[h].selectedAnswer.length;c++)
{
tempDropAssignValues.push(dropLocalValues[h].selectedAnswer[c]);
}
}
}
}
if(tempDropAssignValues.length != 0)
{
console.log(tempDropAssignValues);
for(var d=0;d<=tempDropAssignValues.length;d++)
{
for(var u=0;u<this.getOneItem.item.length;u++)
{
if(this.getOneItem.item[u].data_format_id == 9)
{
if(this.getOneItem.item[u].data_format_value[d].match_data[1].header == null || this.getOneItem.item[u].data_format_value[d].match_data[1].header == 0)
{
this.getOneItem.item[u].data_format_value[d].match_data[1].match_value = tempDropAssignValues[d-1].match_value;
this.getOneItem.item[u].data_format_value[d].match_data[1].seq_id = tempDropAssignValues[d-1].seq_id;
break;
}
}
}
}
}
I'm trying to show the parent child elements in dropdown select list.as the following image
i have the code as in foreach
#helper GetOption(List<Project_Cost_Management_System.Models.ChartOfAccount> model1, Guid? parentid)
{
foreach (var item3 in model1.Where(s => s.ParentAccountId.Equals(parentid)))
{
var zs3 = model1.Where(s => s.ParentAccountId == item3.Id);
int count3 = zs3.Count();
if (count3 >= 0)
{
if(#item3.ParentAccountId == null)
{
<option value="#item3.Id">#item3.Name</option>
}
else
{
var cout = model1.Count();
<option value="#item3.Id"> #item3.Name #model1.Where(s => s.dataid == #item3.dataparentid).Select(d => d.Name).First(). </option>
}
}
if (count3 > 0)
{
#GetOption(model1, item3.Id)
}
}
}
but it showed as
How can i display as the first picture.
You can sort of achieve what you're looking for using <optgroup>, so your rendered HTML would end up being something like:
<option value="...">Professional Fees</option>
<optgroup label="Property Related Expenses">
<option value="...">Maintenance Contribution</option>
...
</optgroup>
...
The only problem you might have with this, is that your actual groupings are not valid options themselves, i.e. you can't pick "Property Related Expenses", because it's just a grouping label. You also can't really control your right aligned descriptive text this way. In general, the HTML select element is pretty restrictive and doesn't allow a whole lot of customization.
When you need more advance functionality, you must move some sort of library that creates a "control" that mimics the functionality of a select list with more customizable HTML elements. There's a million and one different such libraries out on the interwebs, but I'm particular fond of Select2.js. In particular to your scenario, see the section there on "Templating".
I Got Answer.
Adding another field in model class as Hierarchy.
Adding space using the hierarchy. I add my code for refer.
#helper GetOption(List<Project_Cost_Management_System.Models.ChartOfAccount> model1, Guid? parentid)
{
foreach (var item3 in model1.Where(s => s.ParentAccountId.Equals(parentid)))
{
var zs3 = model1.Where(s => s.ParentAccountId == item3.Id);
int count3 = zs3.Count();
if (count3 >= 0)
{
if (#item3.ParentAccountId == null)
{
<option value="#item3.Id">#item3.Name</option>
}
else
{
int str = #item3.Hierarchy * 3;
string str1 = " ".ToString().PadRight(str);
str1 = str1.Replace(" ", "\u00a0");
<option value="#item3.Id">#str1 #item3.Name</option>
}
}
if (count3 > 0)
{
#GetOption(model1, item3.Id)
}
}
}
I implemented an advance search with 15 input fields in AngularJS.
In the page load itself the result set is return from database in JSON format and i need to do the filter in client side only.
The input criteria's equivalent column is available in the result set and i need to check in its respective column only.
I am converting each column by JSON.stringify() and check with the search params like the below :
$scope.filteredData = $scope.actualData.filter(function(item) {
return JSON.stringify(item.FirstName).toLowerCase().indexOf(lowerFirstName) != -1 &&
JSON.stringify(item.LastName).toLowerCase().indexOf(lowerLastName) != -1 &&
JSON.stringify(item.EmailAddress).toLowerCase().indexOf(lowerEmailAddress) != -1 &&
JSON.stringify(item.Address1).toLowerCase().indexOf(lowerAddress1) != -1 &&
JSON.stringify(item.Address2).toLowerCase().indexOf(lowerAddress2) != -1;
...... etc // upto 15 fields
});
Since i have the 15 input fields and the actual result set contains a minimum of 50,000 records.
So converting each record's each column by JSON.stringify() and check with search params will surely cause the performance issue.
Is there any other way to achieve the filtering in client side with other approach.
I posted a sample code in Plunker with 5 input fields only : http://plnkr.co/edit/nUWZEbGvz7HG6gb91YZP
sylwester's answer is the normal way you'd filter things. Your code looks like you want to filter down to only the object that matches every input field. You code attempts to find an object where every property matches the searchParams object. At that point, I don't see what benefit there is to finding that object, because the user already created the object again! Nonetheless, here's a proper version of your code:
Live demo here.
<div ng-repeat="data in actualData | filter:searchData()">
$scope.searchData = function() {
return function(item) {
return Object.keys(item).every(function(key) {
// skip the $$hashKey property Angular adds to objects
if (key === '$$hashKey') { return true; }
var searchKey = key.charAt(0).toLowerCase()+key.slice(1);
return item[key].toLowerCase() === $scope.searchParams[searchKey].toLowerCase();
});
};
};
You really need to limit the data coming from the server for the browser's sake and for the server's sake. It's easy to implement a LIMIT, OFFSET system. It sounds like, overall, you just need to be able to query the server for a certain record.
From your comments, it seems you definitely want Angular's built in filter filter:searchParams, and just capitalize your searchParams models to match your data. For fun, I'll include more options for finer tuning.
This one almost mimics filter:searchParams. You can change > 1 to adjust when the partial matching kicks in, or have it return true only when both items are strictly equal === to disable partial matching. The difference here is that all items are hidden until matched, whereas filter:searchParams will show all items and then remove what doesn't match.
Live demo here.
$scope.searchData = function() {
return function(item) {
return Object.keys(item).some(function(key) {
if (key === '$$hashKey') { return false; }
var searchKey = key.charAt(0).toLowerCase()+key.slice(1);
var currentVal = $scope.searchParams[searchKey].toLowerCase();
var match = item[key].toLowerCase().match(currentVal);
return currentVal.length > 1 && match;
});
};
};
Lastly, to perfectly mimic filter:searchParams, you'd just put in a check to NOT filter the items until there is user input and the input is long enough to start the partial match.
Live demo here.
$scope.searchData = function() {
var partialMatchLength = 2;
return function(item) {
var shouldFilter = Object.keys($scope.searchParams).some(function(key) {
return $scope.searchParams[key] && $scope.searchParams[key].length >= partialMatchLength;
});
if (!shouldFilter) { return true; }
return Object.keys(item).some(function(key) {
if (key === '$$hashKey') { return false; }
var searchKey = key.charAt(0).toLowerCase()+key.slice(1);
var currentVal = $scope.searchParams[searchKey].toLowerCase();
var match = item[key].toLowerCase().match(currentVal);
return currentVal.length >= partialMatchLength && match;
});
};
};
First of all you ng-repeter with 50.000 records more likely is going to kill your browser, so you should thing about pagination.
Secondly you can easy filter your data using angular filter please see that demo
http://plnkr.co/edit/R8b8G4xCMSQmX1144UJG?p=preview
<div ng-controller="ListCtrl">
<br />
First Name:
<input type="text" id="txtFirstname" ng-model="searchParams.FirstName">
<br/>Last Name:
<input type="text" id="txtLastname" ng-model="searchParams.LastName">
<br/>Email Address:
<input type="text" id="txtEmailAddress" ng-model="searchParams.EmailAddress">
<br/>Address 1:
<input type="text" id="txtAddress1" ng-model="searchParams.Address1">
<br/>Address 2:
<input type="text" id="txtAddress2" ng-model="searchParams.Address2">
<br/>
<button class="btn btn-primary" ng-click="searchData()">Search</button>
<br />
<hr />
<b>Filtered Data(s):</b>
<div ng-repeat="data in actualData | filter:searchParams ">
<span ng-bind="data.FirstName"></span>
<span ng-bind="data.LastName"></span> |
Address : {{data.Address1}}
</div>
<hr />
</div>