Is there any jquery plugin for implementing iGoogle style dashboard? So basically drag n drop style etc.
Thanks
I recently found this:
http://www.webappers.com/2008/11/19/how-to-create-igoogle-interface-with-jquery/
Hope that helps...
Take a look at the jQuery UI portlet demo for Sortable.
If you are looking for a similar dashboard framework, please check out my implementation of igoogle style dashboard called 'sDashboard' : http://modeln.github.com/sDashboard/
This plugin, helps in converting an array of widget definitions into a dashboard, were each object in the array gets rendered as a dashboard widget.
Its has some neat features to render table and charting widgets and is highly configurable. The documentation page includes a link to a demo application & example usages to render different styled widgets.
Check out my implementation of an iGoogle style Dashboard using jQuery.
Related
I am completely new to using Kendo UI, and would like some help on how to render a array of objects to the screen with each object having it's own data source.
Application Background: A SPA dashboard that will show a list of charts that a user can interact with, moving (drag and drop), deleting, creating new charts.
I have done some digging into the Kendo framework and haven't landed on a solution that seems to work. My original thought was to use a custom defined widget that would use a template to render the charts to the screen and each widget would have it's own data source. However, I couldn't figure out a way to render the widgets.
I tried the MVVM data-bind: source and using a Kendo template to load the widget with the data-role attribute, but that didn't work.
HTML content area
<div data-bind="source: widgetsDataSource" data-template="widget-template-test"></div>
Kendo Template
<script type="text/x-kendo-template" id="widget-template-test">
<div data-role="custom-widget"></div>
</script>
widgetsDataSource: the dataSouce used to retrieve the list of charts to render to the screen
widget-template-test: the template used to initialize and show the custom widget using the data-role attribute
custom-widget: The link to the custom widget I defined in separate JS file.
Question: Does anyone have a resource I may look at or some suggestions on how to tackle this problem? Any help would be greatly appreciated.
Thanks in advance!
I do a lot of work with kendo widgets, my go to resources are the API docs http://docs.telerik.com/kendo-ui/introduction and then if I want to see some demos http://demos.telerik.com/kendo-ui/, I use them with Angular, the demo's are nice because they have Angular specific (as well as MVVM) code, the API docs are handy when you are looking for specific configuration settings.
We have a custom drop down and need to make it a multiSelect. Your answer gives me hope but so far, I have not figured out how this can be done. I played around how to build custom grids using JavaScript. Is it possible to make an existing custom drop-down list to a multiSelect? If it is, can be it used in the existing Rally screens or do we have to use interactive grids to be able to update the field?
Please advice on how this can be achieved.
Thank you, Rajani.
A custom dropdown cannot be turned into a custom multiselect. There are no custom fileds in Rally of mulitselect type. You may write a custom app using AppSDK2 with a MultiObjectPicker
For example, here is a rallymutiobjectpicker that allows selection of multiple testsets:
this._testSetPicker = Ext.create('Rally.ui.picker.MultiObjectPicker', {
itemId:'testsetpicker',
modelType: 'testset'
});
Later you may use _getRecordValue() to get the array of selected records:
var selectedTestSets = this._testSetPicker._getRecordValue();
A custom grid and a custom html app are not the same.
A UI component created with AppSDK2 cannot be added to a custom grid, and cannot be added to existing Rally pages, e.g. a Defect or User Story details page, or any summary page.
The MultiObjectPicker can only be used in a custom code that you write and then copy your deployment html and paste it into a custom html page.
The developer portal also has links to great videos by David Thomas. See all the links in this post for details.
Have anyone tried creating custom layout for Orchard's query/projection functionality? The default layout available when you install Orchard are Grid and List, I'm planning to add custom layout grid using KendoUI (Grid, Listview) while also taking advantage of the Orchards framework, the kendoui grid should be able to display content and non content types. Any idea on where to start? If you can direct me to a sample project implementing this that would be cool...
You can create a new Layout Provider in your theme, which allows you to output the projection data however you wish.
Steve Taylor has a tutorial on writing a custom Layout Provider for creating a carousel using Projections, you could look at his examples to develop your own suiting your needs.
Please guide me how to make a custom kendo ui widget, like if you could refer to some tutorial or anything. Secondly the main question is that I want to use kendo grid to consume webapi and i want to use it in a widget in which and pass the datasource to this widget.
Bascially I want to make a widget which will consume the webapi using a particular url, and which will return a data source that I can add to this kendogrid widget.
Googling a little I just found:
Creating Custom Kendo UI Plugins
Creating a DataSource Aware Kendo UI Widget
Inheriting From Custom Widgets
Creating A Kendo UI MVVM Widget
I think that any and all this blogs should help you (I've written several widget and I found here all I needed).
In addition to #Emiliano's links, the Kendo Music Store demo app also contains a custom Widget bound to a DataSource that you can look at as an example:
Live demo site: http://www.kendouimusicstore.com/
Source code: https://github.com/telerik/kendo-music-store
Custom Widget source: MvcMusicStore/Scripts/App/kendo-cart-menu-widget.js
Documentation for this custom widget: http://docs.kendoui.com/tutorials/ASP.NET/Kendo%20Music%20Store/Music%20Store%20Web/kendo-music-store-web-cart-menu-widget
If you are going to use WebAPI, you will probably want to read this (The Facts On Using Kendo UI With ASP.NET WebAPI) first.
"Use WebApi" is a very broad statement, and narrowing down your approach would be the first step.
I am trying to use the Telerik datetimepicker in my own module of Orchard CMS.
everything seems working well except javascript. the datetimepicker control is unable to show the drop-down calendar.
I tried to use
Script.Include("~/Themes/Contoso/Scripts/2011.2.712/telerik.common.min.js").AtFoot();
Script.Include("~/Themes/Contoso/Scripts/2011.2.712/telerik.datetimepicker.min.js").AtFoot();
or created an ResourceManifest.cs in my module and called followings.
Script.Require("telerik_datepicker").AtFoot();
Script.Require("telerik_calendar").AtFoot();
I can see no run time errors against scripts i am refereing. but no document.ready() stuff in the html source for the page.
I dont know where got wrong. hope someone can crack the problems . thank you in advance.
All Telerik UI components for ASP.NET MVC require a ScriptRegistrar in order to work properly. The latter outputs the required JavaScript files as well as the JavaScript initialization code. You are probably missing a ScriptRegistrar hence the DatePicker does not work. Here is the minimum required code:
#(Html.Telerik().DatePicker()
.Name("DatePicker")
)
#(Html.Telerik().ScriptRegistrar())
Don't those Telerik helpers rely on some kind of HttpModule that you'd need to register in the global config?