About .net,iphone,ipad,c#,ajax,asp.net: kendoUI - adding menu using web service

kendoUI is still in the beginning stages. Eventhough they have a commercial version there is quite a bit of functionalities needed before it can be fully used for a large application.

I am not sure what is the best practice for using each control and I would like to know this myself from @Telerik. But here is an example of how to populate the kendoMenu dynamically using a web-service.

General approach is that each control/widget on the page should get the data from web-service. That way there is no server request. Now, our web-service can internally get the data from anywhere (database, xml file or any other appropriate way.) There will be a question about menu based on user-rights. But let's save that for later.

#1 - for now, let's assume that we have a web-service that has a function like following to return the menu details.

[WebService] //(Namespace = "http://WebService/")
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List GetMenu()
{
List items = new List();
items.Add(new MenuItem() { ParentTitle = "", Title = "Home", Link = "default.aspx" });
items.Add(new MenuItem() { ParentTitle = "", Title = "Edit", Link = "edit.aspx" });
items.Add(new MenuItem() { ParentTitle = "", Title = "View", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Login", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Profile", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Meetings", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Logout", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Edit", Title = "Cut", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Edit", Title = "Copy", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Edit", Title = "Paste", Link = "view.aspx" });
return items;
}
}

#2 - we can declare our MenuItem class having all possible properties that we want to make use of in the front-end. We may want to have some unique id, or type of menu etc. but below is a simpler form of such menu item class.
public class MenuItem
{
public string ParentTitle { get; set; }
public string Title { get; set; }
public string Link { get; set; }
public string IconUrl { get; set; }
}

#3 - the html can be as simple as

#4 - let's declare a separate javascript file that can contain the javascript code for jQuery and the interface for the web-service. Here is a default ajaxSetup method that contains all default values - that way we don't have to specify it everytime we make a web-service call via jQuery. Please note the contentType - if this is missed then parser error will be raised by jQuery.

$.ajaxSetup({

type: 'POST',

contentType: "application/json; charset=utf-8",

dataType: "json",

data: "{}",

success: function(msg) {

console.log(msg.d);

error: function(xhr, desc, ex) {

console.log(xhr.responseText);

console.log(desc);

console.log(ex);

}

});

#5 - I owe following code to http://elegantcode.com/2011/01/26/basic-javascript-part-8-namespaces/

Its better to keep things in a namespace as a good practice.

function namespace(namespaceString) {

var parts = namespaceString.split('.'),

parent = window,

currentPart = '';

for (var i = 0, length = parts.length; i < length; i++) {

currentPart = parts[i];

parent[currentPart] = parent[currentPart] || {};

parent = parent[currentPart];

}

return parent;

}

var myajax = namespace('myajax');

#6 - now its better to keep the web-service method calls in its own javascript class (singleton). That way we can call it easily w/o knowing about all the ajax overhead (of specifying url etc)

//Type.registerNamespace('myajax');

myajax.WebService = {

Url: '/WebService.asmx/',

_Ajax: function(url, callback) {

$.ajax({

url: url,

success: callback

});

GetMenu: function(callback) {

var url = this.Url + 'GetMenu';

this._Ajax(url, callback);

}

};

You can expand above function to add new web-service methods when your service supports more methods. as you can see _Ajax function takes care of using jQuery internally to make the call and GetMenu function takes care of which Url should be used to call it. This is more like the code that is generated by .Net Script Manager for the web-service script references.

#7 - now in your html following script is required to actually add the menu items.

$(document).ready(function() {

$("#menu").kendoMenu();

myajax.WebService.GetMenu(function(menulist) {

var menu = $("#menu").kendoMenu().data("kendoMenu");

var parentItem = null;

//jQuery.each(menulist.d, function(rec) {

$(menulist.d).each(function(rec) {

var parentItem = menu.element.children("li:contains('" + this.ParentTitle + "')");

if (this.ParentTitle == '' || parentItem.length == 0) {

menu.append({ text: this.Title });

}

else

menu.append([{ text: this.Title}], parentItem);

});

Here, we indicate that we want to convert

the callback function receives the json list of MenuList class that was declared in the web-service. so callback method goes through each record of MenuList and appends an item using kendoMenu object's methods. It tries to find the parent using "title" of the menu item - you could change this to use any different method of finding the parent.

Notes:

This is just a sample of how we can create menu based on web-service return values. I believe there should be better way.
Question that I would raise here in terms of better practice is - should the menu 'html' be already rendered when the page renders or should it be loaded using javascript as above?
Telerik ASP.Net Rad Controls has a much richer objects for RadMenu and RadMenuItem to support a rich set of functionalities for images/checkboxes/finding menu item by text or parent etc. KendoUI still lacks all that
Here we have to look for parent using .element.children("li:contains") - this is kind of hodge podge of object oriented coding with html elements - and no serious developer would prefer that. kendoUI must support some methods like 'findMenuByText' to get the element we need.
Also append() should be allowed at menu-item level rather than at 'menu' level only.

About .net,iphone,ipad,c#,ajax,asp.net

Wednesday, December 21, 2011

kendoUI - adding menu using web service

No comments:

Post a Comment

About Me

Followers

Blog Archive

Labels