Scenario: User clicks on item. Following code runs and opens a modal with a textbox that has the item's name populated.
$scope.edit = function (item) {
$scope.editingItem = { Name: item.Name };
};
My HTML within the modal:
<input type="text" ng-model="editingItem.Name"/>
This works fine, the modal shows (using ng-show) and the textbox is populated with the item's name.
Im using a new object to populate the textbox because I don't want the original object to change (via AngularJS auto data binding) until I press the save button.
Then this HTML:
Save
Leads to:
$scope.update = function (item) {
// What do I put in here to update the original item object that was passed
// into the edit function at the top of this question?!
};
My issue though is what to put into the update method? I want to update the original item (held in an array of items).
I would do this:
$scope.edit = function (item) {
$scope.editingItem = { Name: item.Name };
$scope.originalItem = item;//store the instance of the item to edit
};
$scope.update = function (item) {
$scope.originalItem.Name = item.Name;//copy the attributes you need to update
//clear temp items to remove any bindings from the input
$scope.originalItem = undefined;
$scope.editingItem = undefined;
};
Related
I have a HTML from to capture string data. I am saving those when I hit the save button via ajax. But the scope also includes saving the data on a sessionstorage once I focus out of the form field with the orange save button after it checks the value is not empty. The idea is to pre populate each form field with values stored in the session storage. Everything works fine but I just cant figure out the session storage part. The hard part is how to assign a unique key for each form field, and use that key to find and preload values in the field.
Here is my JS
$('.wrapper').remove()
function renderInput() {
var inputField = '<div class="wrapper"><input class="zoom-text-field" type="text" value=""/><span class="close">save</span></div>';
return inputField;
}
function hideZoomFiled(e, textData) {
$(e).parent().parent().children('.students-name-collection').val(textData);
console.log(textData)
$(e).parent().hide();
$('.students-name-collection').attr('disabled', false);
$(e).prop('disabled', false);
}
function disableInputField(obj) {
$('.students-name-collection').attr('disabled', false);
$(obj).attr('disabled', true);
}
$('.students-name-collection').on('focus', function () {
disableInputField(this);
$(this).next('.wrapper').focus();
$('.wrapper').remove();
$(this).parent().append(renderInput());
var textData = '';
$('.close').on('click', function () {
textData = $(this).parent().children().val();
hideZoomFiled(this, textData);
});
$('.zoom-text-field').on('blur', function(){
if($(this).val() !== ''){
//save the value in the sessionstorage
//This is where I am getting lost
}
});
});
$('#submitForm').on('click', function(){
sessionStorage.clear();
})
// on page load read the session storage and pre fill the form fields
Here is my fiddle
http://jsfiddle.net/sghoush1/ykshgrxg/5/
Here is how you can handle this, as you pointed out the main problem here is how to figure out how to save each input item, and how to place it back when the page loads. What you can do is give each item an index, from 0 to 4.
To get the index of the element you are on, you can add an selected class to it, then use that class in order to find the elements position by using .index($('.selected')), of course we can remove that class when we are done with it. This can be used as the key for the sessionStorage, then the textData is the value:
// Get the index of the input item we are on
$(this).addClass("selected");
var key = $(".students-name-collection").index($('.selected'));
$(this).removeClass("selected");
$('.close').on('click', function () {
var textData = $(this).parent().children().val();
hideZoomFiled(this, textData);
if(!!textData){
//save the value in the sessionstorage
sessionStorage.setItem(key, textData);
}
});
Then for loading them in you can use jQuerys .each and have that on the class .students-name-collection using an index of sessionStorage to give each input the correct value:
// on page load read the session storage and pre fill the form fields
$('.students-name-collection').each(function(index) {
if(sessionStorage[index])
$(this).val(sessionStorage[index])
});
Here is a Fiddle Example
Using a Kendo ListView and when my page reloads, if a selection has been made, I need to have my code automatically select the ListView Item that was previously selected. I'm able to obtain the Kendo DataItem by iterating over the datasource collection, but when I do listView.select(item) the UI does not display anything as selected.
Here is my list view:
$("#listview").kendoListView({
dataSource: coverages,
template: kendo.template($("#listTemplate").html()),
selectable: true,
change: function() {
var index = this.select().index();
dataItem = this.dataSource.view()[index];
if (selectedCoverageCode == null) {
selectedCoverageCode = dataItem;
}
onCodeChanged(categoryId, planId, dataItem);
}
});
And here is my code to set the previously selected item:
function setSelectedCoverageCode(code) {
var listView = $("#listview").data("kendoListView");
var dataSource = listView.dataSource.view();
if (listView) {
$.each(dataSource, function(index, item) {
if (item.Code === code) {
listView.select(item);
selectedCoverageCode = item;
}
});
}
}
I need the DOM object not the data source DataItem, I believe. The above setSelectedCoverageCode function fires the Change event, but the actual element is not selected at that point in the DOM.
How can I do this so I can show the item as already selected whenever a reload happens? Suggestions?
Thanks
You can get the DOM element for the data item by looking for its UID.
var item = // the item out of the DataSource that you want to select
var listView = $("#listview").data("kendoListView");
listView.select(listView.element.find('[data-uid="' + item.uid + '"]'));
I'm new to kendo I have a list populated from a data source (with template : Each list item has mobile switch in it).I need to get all the id's of selected mobile switches when I clicked on a single button. Can anyone let me know how to do that in kendo ?
Cheers,
Chinthaka
I solved that Using following code (Only Active Items checked items)
var checkedWorkCentersIds = new Array();
$('#workcenters :checkbox:checked').map(function () {
if (this.checked == true) {
checkedWorkCentersIds.push(this.id);
}
});
Without the code it is hard to give an exact answer, but you should be able to just loop over the data items in the array and find the ones that are selected.
For example:
var dataSource = new kendo.data.DataSource( ... );
function getSelected() {
return $.grep(dataSource.view(), function (item) {
return item.selected;
});
}
Assuming the switches/checkboxes are bound to the "selected" property.
In response to your comment, you can get the selected checkbox element IDs with jQuery:
$("#workcenters :checkbox:checked").map(function (index, checkbox) {
return $(checkbox).attr("id");
});
The following snippet uses a MultiSelect field to filter through an array of items. Filtering only occurs when items have been selected in the MultiSelect and the 'Filter' button has been clicked.
http://jsbin.com/iVIQoKiV/1/edit
How can it be set up using a DropDownList instead? Also, once an item has been selected in the DropDownList, how can the grid be filtered instantly without the need to click a button?
Edit:
Here's a new JSBin. Managed to implement a DropDownList. I've used the following change event but now filtering doesn't work:
change: function() {
var value = dropdown.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({
field: "Territories",
operator: function (itemValue) {
var matchingItem = itemValue.find(function (item) {
return $.inArray(item.TerritoryID, value) >= 0;
});
return matchingItem !== null;
}
});
}
Hello just the same scenario is covered in the Toolbar Grid online demo here. It filters instantly beucase it uses the change event of the DropDownList to invoke the filter method immediately.
I am displaying datas in a grid ,on click of active or inactive button i have to change the button ,functionality is working fine ,for changing icon i am unable to find the active clicked button ,in jquery we can use "this" ,but no idea in angular js ,pls help
$scope.activeSource = function(datasource,status)
{
$scope.loading = true;
$scope.activeInfo = {
datasource:datasource,
};
$scope.alerts = [];
if(status == "Stopped")
{
$scope.entityService.activeInfo($scope.activeInfo,
function( msg ) // success
{
$scope.loading = false;
$rootScope.successMsg.push(msg);
$('.icon-play').hide(); // this.
$('.icon-stop').show(); // this. no idea
},
function( msg ) // error
{
$scope.loading = false;
$rootScope.successMsg.push(msg);
}
);
You don't need to use this to access the button. Instead, in your controller create a javascript object that holds all the attributes for the button. Something like this:
$scope.myButton = {
src : 'foobar.png',
isVisible : true
};
Then, define your button like this:
<img ng-src="myButton.src" ng-show="myButton.isVisible" />
Now, when you want to modify any attribute of the button, you just need to change the javascript object myButton, and angular will take care of updating the actual button.
For example, if you want to hide the button:
// you don't need to do this
// $('#myButton').hide();
// instead just do this
$scope.myButton.isVisible = false;
Similarly, you can change the src of the image as well.