I decided to put together a quick project using jquery, the Kendo UI HTML 5 framework and JavaScript.
I don't do much JavaScript development and I'd like some input on how to make this look less like a complete spaghetti hack, walking up and down DOM elements, trying to find the right event handler to hook onto.
$(window).load(function(){
var serviceUrl = "http://catalogService.asmx";
var configurationsUrl = serviceUrl + "/Configurations?format=json";
var itemAttributesUrl = serviceUrl + "/GetItemAttributes?format=json";
var updateConsumersUrl = serviceUrl + "/UpdateConsumers?format=json";
var dataSource = kendo.data.DataSource.create({
schema: { model: {id: "ServiceEntityName"} },
transport: {
read: {
url: configurationsUrl,
dataType: "jsonp"
}
},
pageSize: 15
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 670,
scrollable: true,
pageable: true,
sortable: true,
groupable: true,
detailInit: detailInit,
dataBound: function(e) {
this.element.find(".consumers").each(function() {
// Get the matching grid data row.
var id = $(this).closest("tr").data("id");
var data = dataSource.get(id).data;
var consumers = data.Consumers;
var dd = $(this).kendoDropDownList({
dataSource: consumers,
template: $("#consumerTemplate").html()
}).data("kendoDropDownList");
var lastTarget = document.body;
updateConsumersText(dd, consumers);
// keep track of mouse up element to determine if we should close the dropdown
dd.popup.element.delegate("*", "mouseup", function(e) { lastTarget = e.currentTarget; });
dd.popup.bind("close", function(e) {
if ($.contains(this.element[0], lastTarget)) {
// don't close - we haven't clicked on the dropdown element itself (or outside the dropdown)
this.element.find(".consumerCheckBox").each(function(i, e) {
consumers[i].IsSelected = e.checked;
});
updateConsumersText(dd, consumers);
e.preventDefault();
}
else if (data.ServiceEntityName)
{
updateConsumers(data.ServiceEntityName, dd.text());
}
lastTarget = document.body;
});
});
},
columns: [
{ field: "Namespace" },
{ field: "Name" },
{ field: "Description" },
{
name: "Consumers",
template: $("#consumersTemplate").html()
}
],
selectable: true
});
$.fn.toggleCheckbox = function() {
this.attr('checked', !this.attr('checked'));
}
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
function updateConsumersText(dropDownList, consumers)
{
var text= "";
for (var i = 0; i < consumers.length; i++)
{
var c = consumers[i];
if (c.IsSelected)
{
text+= c.Name + ", ";
}
}
if (text.endsWith(", "))
{
text = text.substring(0, text.length - 2);
}
dropDownList.text(text);
}
function updateConsumers(serviceEntityName, consumersText)
{
var url = updateConsumersUrl + "&serviceEntityName=" + serviceEntityName + "&consumersText=" + consumersText;
$.ajax({
url: url,
error: function(xhr,s,e) {alert("Error updating consumers: " + e); },
tyoe: "GET",
dataType: "JSONP"
});
}
function detailInit(e) {
var itemAttributesDataSourceUrl = itemAttributesUrl + "&serviceEntityName=" + e.data.ServiceEntityName;
var itemAttributesDataSource = kendo.data.DataSource.create({
schema: { model: {id: "ID"} },
transport: {
read: {
url: itemAttributesDataSourceUrl,
dataType: "jsonp"
}
}
});
$("<div/>").kendoGrid({
dataSource: itemAttributesDataSource ,
scrollable: false,
sortable: true,
columns: [ "Name", "DisplayName", "Description" ]
}).appendTo(e.detailCell);
}
});