Recommendations on templates/libraries for a reporting web porting with kendo ui asp.net mvc - kendo-ui

I am looking into building a responsive modern web portal, primarily for reporting purposes like data, stats and few charts. Especially for charts I plan to use Kendo UI controls. Apart from that are there recommendations on what templates to use with ASP.NET MVC such as bootstrap or something else that gives a good look and feel to the web UI? I am new to javascript so something that is quick to pick up, or with good documentation also would work.

The kendo ui controls come with a number of themes that are perfect for this type of exercise (I'm doing something similar to you with a "reporting" portal. I have found that the bootstrap and flat themes are the best to use (flat for graphs looks amazing). If you look at the kendo demo's they will show you the power of the suite especially this one: http://demos.telerik.com/kendo-ui/bootstrap/ it shows the integration with bootstrap really nicely and is probably something similar to what you may be after.
I am using the kendo controls with the bootstrap theme currently for my project and they seem to fit well together, like you I'm not the best at javascript (although I have learnt loads just using these two libraries) - Thanks Telerik for the MVC helpers!

Related

Using extJS GUI only

I am building a web application using a PHP MVC framework and jQuery, but I would like to use extJS layouts as the GUI of the Application. The whole core of the App is built using the framework and jQuery, I just want to use ExtJS to create the Layout. It will consist of a two column style with a left menu and tabbed navigation; it is the only I want to use from ExtJS.
The question is: Is it worth it? (taking into account the license restrictions and the large ExtJS is). Are there some alternatives?
Personally I wouldn't do it. Developing with Ext requires quiet some time and is mostly worth it when you use the functioanlity offered by the Ext framework. From yourquestion I understand that you use jQuery for the functionalities of the application and Ext only for the layout. That doesn't seem worth the time and work for me.

Phonegap basics - designing ui for iphone and android

I'm developing an application both for Iphone and Andriod using Phonegap.
I came up with all kinds of plugins JQuery, JQTouch and more,
What is the recommended way of doing this?
Meaning-designing a generic UI (tabbars, tables, navigation bars etc') for both Iphone,Android that will "feel" native?
Thanks,
Asaf
If you want your application to look as native as possible I'd try jQuery Mobile.
The documentation is brilliant and all of elements look native to the iPhone. It's also incredibly easy and quick to build up your UI as all of the design and colour scheme has already been done.
I've used this in an Android application that I've made and I've so far received very positive reviews.
You may also want to look out for Kendo UI which is out this month! Again, very similar to what jQuery mobile is about with a few exceptions. It has great support for graphs and data, and promotes native Android look and feel.
Sencha Touch has just released version 2 and it is a good JS toolkit as well.
I feel I have to put my hat in the ring for jQTouch. Although the version downloadable from their site is a bit oldish, if you get it from GitHub it is currently maintained and works well on both iOS and Android. https://github.com/senchalabs/jQTouch
Also, if you want the fixed headers or footers with scrollable elements in-between, DataZombie's fork of jQTouch includes iScroll which does a great job of this. https://github.com/DataZombies/jQTouch
I am also in the process of developing a theme for jQTouch that will allow apps on Android to feel quite a bit more "native" than the other js kits as they all seem to have a very iOS-cenrtic navigation style (e.g.: back buttons on toolbars instead of relying on the hardware back button, etc). Even if you don't want to wait for my theme, making your own is pretty easy on jQTouch. I would not call myself a designer and I managed. ;)
Feel free to choose one of the other answers, but keep jQTouch in mind. I tried and tried other JavaScript frameworks and it was the only one that made it possible to look good on both platforms.
jQuery Mobile works awesomely.. and with the theme roller coming soon it will be pretty good.
Kendo Mobile UI - Pre release rip.. I have a working Eclispe project here.. markup is identical to jQuery mobile.. but this is faster, nice native looking apps. Take a look

Custom UI design in Sencha and othere touch frameworks

Can someone please guide me regarding which touch framework (javascript) I should use to make a tablet app? I am new to this area and I am looking for something which allows me to play with my own UI design comfortably.
I went through sencha as I heard its apt for a tablet app environment but I am (sorry, it might sound odd) not able to make out whether I can use my own UI design to make app in sencha. Or any other framework (stable) allows to use custom UI design?
There aren't any major differences between handsets and tablets, except for the screen size. For example, what you would show in a handset in one long scrolling screen, would be shown in a split-screen on a tablet (I am concentrating on the user-experience here).
Split-screen support in still rare in the jscript frameworks, since webkit browsers didn't fully support scrolling only parts of a page (i.e. an iframe or overflow:scroll divs), this support is only now starting to get materialized with iOS5 (Android already had this since 2.2, but it never worked right).
There have been other jscript solutions (like iScroll), but being client code they are not always bringing the full "experience" to the client.
The JQuery-Mobile docs have a version under testing, you can try that in a tablet/handset to see the differences.
Regarding your "own UI design", if you mean colors/icons/buttons that's possible on any framework. Where the problems start is when you want to create custom layouts, and each framework provides partial support depending on what exactly you want to achieve.
In general, I'd say Sencha totally separates you from HTML design - you build everything using JSON controls and it has an extensive events/rendering code (of course you can write your own controls), whereas frameworks like JQuery mobile work directly on the HTML (you specify data-* attributes for the details) and renders it almost the same (ok, it does adds wrapping layers, but in general it's still pure HTML).
As always, "it depends" on what you want to achieve and what you are ready to give up... ;-)
Sencha Touch (our framework) is particularly well suited to tablet apps because it has an implementation of multiple scrollable areas that works on older iOS and RIM devices, not just iOS5. But, the intention with Sencha Touch is that you create your app using the built-in UI components (carousels, momentum lists, tabs, etc.) or, if you have unique UI elements, then you will need to extend an existing component or build a custom component. If you're expecting to be able to slap some of your own HTML into innerHTML or even a Touch xTemplate, then you will be setting yourself up for failure. But the good news is that there are tutorials on doing your own components, and there are plenty of apps that you can look at the source of, in order to guide your development. Lots of people have built apps with custom UI's
You need some level of JavaScript experience to use Sencha Touch, so if you're coming from a non-JavaScript web design background, you'll have to get down the JavaScript learning curve first.

UI Framework/Toolkit for Web Applications

Are there any UI Toolkits/Frameworks that can be used for a web application like Bootstrap, from Twitter(http://twitter.github.com/bootstrap/)?
I am currently upgrading an old ASP line of business application and I would like to use a common framework to handle grids, alert messages, forms, etc. I am very familiar with jQuery UI, but it is not as complete as I would like it to be. My main concern is I just want a consistent UI for the application that other developers can use that are not too design-savy.
Also, I would like the application to behave consistently throughout the application.
I don't need a framework for the server-side as I am using ASP.NET MVC. By the way, I am using both jQuery and jQuery UI, but I am looking for something that can fill in the missing blanks.
We have tried so many different options, the most robust and flexible solution remains jQuery and jQuery UI. There are tons of people writing widgets for it, and it is compatible with a lot of technology unlike some other frameworks which limit you, precisely because it is simple and light weight.
What exactly is your reservation with jQuery?
The options we have tried are Google Web Toolkit, Ext-JS and Prototype, none as nice and easy as jQuery.
We are using Telerik Extensions for MVC for all the interactions that we have in our web applications and we are very pleased with it. We use their stylesheets to style our form inputs and buttons. The stylesheet are easily editable if you want to change the theme.
btw, it use jQuery underneath.

Ajax ModalPopup Extender with ASP.NET MVC

I am trying to implement an Ajax ModalPopup Extender but i have no clue where to start.
Can someone please show me how to go about doing this or at least guide me in the right direction.
I've recently used JQuery to send modal popups. Take a look at this. Seems pretty easy to use.
http://www.ericmmartin.com/projects/simplemodal/
I'm not sure how happy the AJAX Control Toolkit is with MVC (I'm not an MVC user), but if you're looking for information regarding the use of the control, watch this video. It's super easy to implement:
video
I don't think controls from the Ajax Control Toolkit are fully compatible with ASP.NET MVC. The Ajax Control Toolkit widgets are implemented similarly to traditional web controls, so most probably require viewstate, which does not exist in ASP.NET MVC.
For accomplishing modal in ASP.NET MVC, you'll have to go old school and take a more bare-metal approach and start hacking angle brackets, JavaScript, and CSS. What I've used in the past is a jQuery plugin jqModal, but there plenty out there.

Resources