Problems with Forefront Unified Access Gateway (UAG) and the PUT verb

Problem:
We were seeing this error when updating data using the PUT verb
net::ERR_CONNECTION_RESET message
SyntaxError: Unexpected end of input {stack: (...), message: "Unexpected end of input"}

Solution:
Ultimately, I believe the problem was a result of letting WEB API return a void to the calling client.  This results in a 204 "No Content" being returned to the user.  It worked fine internally, but externally via UAG the data was being saved and client was seeing an error.

Now, we are returning an OK like this:
[HttpPut]
public HttpResponseMessage Update(UserViewModel value)
{
        // Update stuff
return Request.CreateResponse(HttpStatusCode.OK);
}

Also, make sure that your Ajax call does NOT include a dataType.
function update(someJavaScriptObject) {
return $.ajax({
url: '/api/Users',
type: 'PUT',
data: someJavaScriptObject,
      dataType: "json"
 });
};

Another possible problem:
Returning primitives from WEB API controller methods and specifying a dataType: "json" in Ajax call.

Another possible solution:

• Assuming you have the json formatter setup in the WebApiConfig:
• Just wrap it in a class so that it is turned into a JSON object,  
• You could also use a anonymous class and CreateResponse method as in:
  return Request.CreateResponse(HttpStatusCode.OK,  new {id = 344});  
• Remove dataType from the ajax call so that your call accepts *.* and then return the primitive from the WEB API method like this:
  return Request.CreateResponse(HttpStatusCode.OK, 344);  

Kendo annoyances series: numerictextbox

The problem:
You cannot let the user enter whole numbers. They will be interpreted as thousands of percent.  For example, if the user enters 90 as opposed to .90, this will be 9000%.  

The solution:
Since our users insist on using whole numbers, the only way I've found to fix this is to adjust the maximum percentage value up to 100 (instead of 1), monitor the data change event and then divide any number that is greater than one by 100.  By setting the value, it will cause another change event and then I can push the change to the server.

See the jsFiddle example below for more information.

Resources

• Kendo numerictextbox documentation
• jsFiddle example

Kendo annoyances series: select html element

The problem:
If you need two way binding so that edits that take place on your viewmodel (after user interactions or an AJAX call), you need to create an option template (option being the html element that represents an item inside of a select html element).

Without two way binding:
<select data-text-field="firstName" data-value-field="id" data-bind="source: users, value: selecteUser"></select>

The solution:
<select data-text-field="firstName" data-value-field="id" data-template="optionTemplate"   data-bind="source: users, value: selecteUser"></select>

<script type="text/x-kendo-template" id="optionTemplate">
        <option data-bind="value:id,text:firstName"></option>
  </script>



Resources:

• Kendo documentation 
• jsFiddle example

Kendo: Binding cheat sheet

Varies by type

BUTTON
<button data-bind="text: toggleButtonText, click: toggleButtonClick"></button>

DIV
<div data-bind="text: someText"></div>

<div data-bind="html: rawHtml"></div>


INPUT
<input type="button" style="float: left" data-bind="value: someField, click: toggleChildrenVisibilty" />
<input type="checkbox" style="float: left" data-bind="checked: itemIsLocked" />

SPAN
<span data-bind="text: originalAmount"></span>

SELECT
<select data-value-field="id" data-text-field="name" data-bind="value: selectedProduct, source: products">
</select>

<script>
   var viewModel = kendo.observable({ selectedProduct: null, products:
     [ { id: 1, name: "Coffee" }, { id: 2, name: "Tea" }, { id: 3, name: "Juice" } ] });

   viewModel.selectedProduct = viewModel.products[1];
   kendo.bind($("select"), viewModel);
</script>

Reference
• From http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/value


Template
<div data-template="items-template" data-bind="source: items"></div>

TEXTAREA
<textarea id="note" data-bind="value: myNote" rows="3"></textarea>

Kendo: binding to raw HTML

All I wanted was to bind the inner HTML of a DIV to some raw HTML, here is how you do that:

View:

<div data-bind="html: problemList"></div>

ViewModel

var viewModel = new kendo.data.ObservableObject({
    problemList: '<ul><li>Problem 1</li> <li>Problem 2</li></ul>'
});