Develop Reference

Accessing fields of a tfs work item after retrieving work items from query

I am trying to retrieve all bug work item types from a TFS server. I'm pretty sure I retrieved all the IDs of all the bug work items in the project but now I can't figure out how to get field values from those bug items.
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
usePlatformStyles: true
});
VSS.require(["VSS/Service", "TFS/WorkItemTracking/RestClient"], function (VSS_Service, TFS_Wit_WebApi) {
var projectId = VSS.getWebContext().project.id;
var witClient = VSS_Service.getCollectionClient(TFS_Wit_WebApi.WorkItemTrackingHttpClient)
var query = {
query: "Select [System.Id] From WorkItems Where [System.WorkItemType] = 'Bug' order by [System.CreatedDate] asc"
};
witClient.queryByWiql(query, projectId).then(
function (result) {
var openWorkItems = result.workItems.map(function (wi) {
return wi.id;
});
var fields = [
"System.Title",
"System.CreatedDate"
];
witClient.getWorkItems(openWorkItems, fields).then(
function (workItems) {
//
//how do I retrieve workitem fields here
//
});
});
});

Displaying Results of Add/ Delete operation dynamically in HTML using ANGULAR JS and Spring MVC

I am having an employee form where the user can add the employee details,search for employee details and delete those details . I have written separate functions for add,search and delete operations inside the controller . Whenever the user adds an employee / deletes an employee . I want the result list to be updated dynamically (Added employee should be shown on result list, deleted employee should not be shown on result list ). How can I achieve this . for example after the delete operation response is successful , should I call the search function again ? .Is there any other way to do these . I am using Angular JS and Spring MVC
This is my Controller Code for Search
$http.post('http://localhost:8080/services/employee/search/'+Systems+"", searchCriteria)
.then(function(response) {
$scope.searchresponse= [];
$scope.searchresponse = response.data.items;
if (response.data && response.data.items.length != 0) {
$scope.searchresponse = response.data.items.map(function (x) {
x.selected = false;
return x;
});
console.log($scope.searchresponse);
}
else {
$scope.showerror = true;
$scope.ErrorMsg ="There is no record matching your criteria."
}
});
This is my search Response From API
{
"items": [{
"employeeId": "ABC",
"type": "D",
"alive": "Yes"
}, {
"employeeId": "DEF",
"type": "A",
"alive": "Yes"
}],
"more": false
}
This is my Controller call for Delete
var data1=["ABC", "NPK"];
$http.delete('http://localhost:8080/services/employee/delete/'+Systems+"", {data:{"idList":data1},headers: {'Content-Type': 'application/json'}} )
.then(function(response) {
console.log("testing");
// - here i would like to implement code to remove all the fields that belong to eomployee id ABC,NPK from result page
});
I am using selectall/deselect all checkbox to give user option to remove multiple items

Let's suppose your employee has name and id properties, and you have some http resource uri to identify an employee, e.g.
http://youservice/employees/123
and a service to delete him/her.
In your view, you display the employee list as
<ul>
<li ng-repeat="employee in employeeList track by employee.id">
{{employee.name}} <button ng-click="deleteEmployee(employee.id)">delete</button>
</li>
</ul>
In your controller, the function called when the user press the delete button on an employee can be
$scope.employeeList = [...];
$scope.deleteEmployee = function(employeeId) {
let empUri = 'http://youservice/employees/'+employeeId;
$http.delete(empUri).then(function(response) {
// delete is successful, remove employee from the list
let empIndex = $scope.employeeList.findIndex(e => e.id === employeeId);
$scope.employeeList.splice(empIndex, 1);
}, function(responseError) {
// delete is in error. Display an alert...
});
}
The list shall be refreshed in the view.
UPDATE
In order to remove several employees from the search result, you can just filter the search list, e.g (from your code):
var data1=["ABC", "NPK"];
$http.delete(/* delete service url and data */).then(function(response) {
// Filter out employees from data1
let empList = $scope.searchresponse.filter(emp => {
// Is emp not in data1 ?
return !data1.some(remEmpId => remEmpId == emp.employeeId);
});
$scope.searchresponse = empList;
});

Use Array.splice to remove data from the response List
for (var i = 0; i < $scope.employeeList.length; i++) {
if ($scope.employeeList[i].employeeId == employeeId) {
$scope.employeeList.splice(i, 1);
break;
}
}
Have a look at DEMO
Hope this Helps!!!

Pass entire table data to action method using Jquery

This question might be dumb but since i am new to JS and Jquery i have been struggling to get it done.
I have a table in a page where user can edit cell values in place(I am using contenteditable attribute).
There is a Save All button, on click on which I want to send current values in all the rows of the table to server side action method.
Please suggest me on how to achieve this or a better way of achieving the same functionality.

When the Save All button is clicked, you can do something like this:
$("#saveAllBtnId").click ( function () {
// read the data from the table using loop
$('#myTable > tbody > tr').each(function() {
// here retrieve the values from the table cells
// Example
var cellValue = $(this).... // you need to fill this code as per your table structure
// store all the data in an array
var mydata = new Array ( cellValue, ....);
var jsonData = JSON.stringify(mydata);
// send the data to backend, e.g.
$.post ("back/end/code", { data : jsonData }, function () {});
});
});

Thanks a lot. This is what i wanted. However, a little modification was needed while creating array.Below is the working code.
function btnClicked() {
// read the data from the table using loop
var mydata = [];
$('#testTable > tbody > tr').each(function() {
// here retrieve the values from the table cells
// Example
var name = ($(this).find(".name").html());
var age = ($(this).find(".age").html());
var obj = { name: name, age: age };
// store all the data in an array
mydata.push(obj);
});
var jsonData = JSON.stringify(mydata);
// send the data to backend, e.g.
//for now adding an alert
for (var i = 0 ; i < mydata.length; i++) {
alert(mydata[i].name + mydata[i].age);
}
$.post ("Test/SomeAction", { data : jsonData }, function () {});
}

Get selected data from checkbox in a form

I have a form with multiple checkboxes where I display checkbox data from a JSON file using ng-repeat. Now, when I submit the form, I want to get the checked data from the checkboxes. How can I access checked data after the form is submitted?
I did some research and now I can display the checked data on page itself using ng-model="s.checked" but how can I access the checked data at controller's end.
See this Plunk for details

The structure of $scope.List hasn't changed when you submit, it's still an array of objects. You could do something like
$scope.submit = function() {
var checkedItems = $scope.List.filter(function(item){
return item.checked;
});
console.log(checkedItems);
};
The values of the List items have changed.
(Also, it's generally a good idea to use ngSubmit)

You have array of objects:
$scope.list = [
{"ID":5000,"Name":"ABC",checked:true},
{"ID":5001,"Name":"DEF",checked:false},
{"ID":5002,"Name":"XYZ",checked:false}];
so you can access the values of checked properties like this:
$scope.submit = function() {
var val1 = $scope.list[0].checked;
var val2 = $scope.list[1].checked;
var val3 = $scope.list[2].checked;
}
Or with the use of forEach statement:
$scope.submit = function() {
angular.forEach($scope.list, function (listValue) {
var val = listValue.checked;
});
}

How to serialize delete data with jqGrid, multiselection, and Spring?

Currently, I have an overridden delGridRow call that looks like this (credit to Krams and his Spring tutorial):
var row = $('#grid').jqGrid('getGridParam','selrow');
$('#grid').jqGrid( 'delGridRow', row,
{ url:'deleteRequirement.html',
recreateForm: true,
beforeShowForm: function(form) {
//Change title
$(".delmsg").replaceWith('<span style="white-space: pre;">' +
'Delete selected record?' + '</span>');
//hide arrows
$('#pData').hide();
$('#nData').hide();
},
reloadAfterSubmit:true,
closeAfterDelete: true,
serializeDelData: function (postdata) {
var rowdata = $('#grid').getRowData(postdata.id);
// append postdata with any information
return {id: postdata.id, oper: postdata.oper, reqID: rowdata.reqID};
},
afterSubmit : function(response, postdata)
{
var result = eval('(' + response.responseText + ')');
var errors = "";
if (result.success == false) {
for (var i = 0; i < result.message.length; i++) {
errors += result.message[i] + "<br/>";
}
} else {
$('#msgbox').text('Entry has been deleted successfully');
$('#msgbox').dialog(
{ title: 'Success',
modal: true,
buttons: {"Ok": function() {
$(this).dialog("close");
}
}
});
}
// only used for adding new records
var newId = null;
return [result.success, errors, newId];
}
});
else {
$('#msgbox').text('You must select a record first!');
$('#msgbox').dialog(
{ title: 'Error',
modal: true,
buttons: {"Ok": function() {
$(this).dialog("close");}
}
});
}
In order to add support for multiselection deletes, I changed the "selrow" first line to this:
var rowList = jQuery("#grid").getGridParam('selarrrow');
After this, things start getting sketchy fast. The spec says that the default delGridRow can accept an array of inputs records to delete. I made the following change to attempt to get the new 'rowList' variable to get used:
$('#grid').jqGrid( 'delGridRow', rowList, ...
I'm still hitting my deleteRequirement.html URL in my Spring controller, but only the last records appears to make it. I'm guessing the problem is in the postdata preparation in the serializeDelData section, but I haven't found the correct way to prepare this postdata with the list of records instead of the single record.
Any suggestions/insight would be appreciated.
Thanks all.

I don't use Spring myself, but some parts of your code seams be strange for me.
First of all the you can use two forms of the first parameter of delGridRow (row in your code). It can be either the comma-separated list of ids or an array of ids. If you use array of ids then jqGrid convert it to the comma-separated format by rowids = rowids.join();. As the result the format of postdata.id inside of serializeDelData can be also the comma-separated list of ids.
So if you need to support delete of multiple rows you should
modify the code of serializeDelData to send in reqID property also the list of the reqID. The corresponding code can be
serializeDelData: function (postdata) {
var ids = postdata.id.split(','), i, l = ids.length, reqIDList = [];
for (i = 0; i < l; i++) {
reqIDList.push($(this).jqGrid("getCell", ids[i], "reqID"));
}
return {id: postdata.id, oper: postdata.oper, reqID: reqIDList.join()};
}
modify your server code to support both id and reqID in comma-separated form.
Inside of afterSubmit callback you you the lines
// only used for adding new records
var newId = null;
return [result.success, errors, newId];
You can modify the lines to the following
return [result.success, errors];
because only the first two elements of the array returned by afterSubmit callback will be used.