How do you extend Kendo UI widgets - widget

I couldn't find any official documentation about extending Kendo UI widgets or making composite controls on Kendo UI's website.
Are there any examples of how to do this?

I'm about to write a post on this, but you can checkout the following project on GitHub for creating plugins. Currently there is a composite control for this...
https://github.com/kendo-labs/kendo-plugins
Here is a live fiddle example of a compositing an AutoComplete and a ListView...
http://jsfiddle.net/burkeholland/G2f4a/embedded/result/
// thanks for making put a useless comment here stackoverflow

There's official documentation now:
How to Create a Custom Widget
Here's a link to semi-official community plugins.
And here are some examples of widgets created by John DeVight.
An SO post showing a simple example which extends the mobile list view.

Thanks! With this help I can do that:
kendo.data.DataSource.prototype.dataFiltered = function () {
// Gets the filter from the dataSource
var filters = this.filter();
// Gets the full set of data from the data source
var allData = this.data();
// Applies the filter to the data
var query = new kendo.data.Query(allData);
// Returns the filtered data
return query.filter(filters).data;
}

Related

load 2D & 3D forge viewers in single web page

I would like to link between elements from the 2D sheet and 3D model, so when I select the element from 2D it should reflect and select (isolate) in the 3D also if I change the color it does the same on both e.g. and the other way around.
so I can use the document browser extensions to open the 2d sheet on 1st viewer and the 3d model on the 2nd viewer:
const firstModel = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv1'));
const secondModel = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv2'));
Autodesk.Viewing.Initializer(options1, function() {
viewer1.start();
viewer1.load(...);
});
Autodesk.Viewing.Initializer(options2, function() {
viewer2.start();
viewer2.load(...);
});
if the example above is correct I am still missing how to links both viewers.
I hope someone could help me with this issue
Note that we have a viewer extension that might already give you what you're looking for: https://github.com/Autodesk-Forge/forge-extensions/blob/master/public/extensions/NestedViewerExtension/README.md.
If you want to implement the cross-selection between two viewer instances yourself, you can. Just subscribe to the SELECTION_CHANGED event in one of the viewers, get the selected IDs, and select the same IDs in the other viewer using the usual viewer.select([...]); method.
Btw. regarding your code snippet:
the Autodesk.Viewing.Initializer only needs to be called once per the entire webpage
the Autodesk.Viewing.Private.GuiViewer3D instances should be created after the initializer has done its work

Adding API's to chromium build in Electron framework

I would like to write custom functions in Window API in chromium source code. So how do we do it?
In case of doubts about window API here's a link to what I mean click here. I would like to have custom property functions analogus to those shown in the link.
It's for a github electron project.
Well after a week of searching I finally found the solution. Thanks to a pull request by magicae#github.
You need to look create your custom function in
electron/atom/browser/api/lib/atom_api_web_contents.cc
as say
bool WebContents::GetOkOk() {
return true;
}
And define the same in it'h header file
electron/atom/browser/api/lib/atom_api_web_contents.h
as
bool GetOkOk();
Lastly you need to export the function through the webContents method located in
electron/atom/renderer/lib/web-view/web-view.js
as
/* Public-facing API methods. - modified by Akshay Thakare */
methods = ['getOk','getURL', ... ];
And you are good to go.
Finally after you compile your electron app,
in the main.js file add,
console.log(mainWindow.webContents.getOk());
and your done.
As JS is prototype oriented, you could simply extend the BrowserWindow API
var BrowserWindow = require('electron').BrowserWindow; // main process
var BrowserWindow = require('electron').remote.BrowserWindow; // renderer process
BrowserWindow.foo = function() {
console.log('foo');
}
Not sure if you're looking for someting more specific, but I'm not sure you can extend it with heavy impacts on the system, could you explain exactly what you are trying to do ?

How to move to multiple view controllers?

I want to programmatically move from a viewController to another using Apple's new Swift language. I've googled and read through the docs, and I see how to use a single ViewController. Does anyone have an example or documentation on how to switch between View Controllers?
There are many ways to do this detailed in the class documentation for UIViewController.
Example 1
Here is an example of using the -presentViewConroller: method (assuming this code is written in a UIViewController subclass):
var secondViewController = UIViewController() //create your second view controller.
self.presentViewController(secondViewController, true, NULL)
Example 2
This is how you would present the second UIViewController via storyboards (again assuming this code is written in a UIViewController subclass):
self.preformSegueWithIdentifier("segueIdentfier", self);

Preload dynamically created views in Actionscript for Flex Mobile App

I've got the following problem, my boss wants me to make our app far more responsive without any waiting time between switching views. It used to a "standard" application based on a ViewNavigator but with just one View that was destroyed and re-created with different content based on the user's selection of tabs he created himself. Views were switched with the default SlideViewTransition. I'm down to half a second now with a slightly more lightweight approach as described below, however that half second is still too much.
The app is a tabbed application where the user can create and edit new views himself, so create/edit/delete tabs and their corresponding tabs.
My current implementation is based on a ButtonBar and a Group that is used to display the "views". The group's content is created based on the selected tab. The content is based on XML data that stores all the required information to build the "view". Naturally, removing and creating the component's takes a little while (the half second I talked about), so I'm after another solution.
What I thought about is using the ViewNavigator and create all stored views upon application start.
Very much like this:
for each (var _view:XML in _allViewsConfig.children()) {
var compView:View = new View();
compView.percentHeight = 100;
compView.percentWidth = 100;
compView.name = _view.label;
for each (var _groupElement:XML in _view.vgroup) {
var group:VGroup = new VGroup;
group.percentWidth = 100;
group.percentHeight = 100;
for each (var _windowElement:XML in _groupElement.window) {
var window:WindowContainer = new WindowContainer;
for each (var _componentElement:XML in _windowElement.component) {
var component:UIComponent = _componentManager.create(_componentElement.#type, _componentElement);
window.addElement(component);
}
group.addElement(window);
}
compView.addElement(group);
}
views.addItem(compView);
}
views is an ArrayList that is used to store the created views.
The only problem I've got right now is that I can't use the Views stored in this ArrayList in the corresponding ViewNavigator.
I tried it the usual way, i.e. navigation.pushView(_viewCreator.views.getItemAt(0) as Class);
This, however doesn't work, no error or anything, the ViewNavigatorjust doesn't do anything, so I guess that a View class can't be created like this.
So how can I make this work?
Also, do you guys think that this is a proper solution to the problem, especially considering the whole dynamic nature of the application (being based on tabs)?
Naturally, slide transitions will be completely disabled as they are quite slow with our complex components.
Any help, comments or thoughts would be greatly appreciated!
EDIT:
On second thought, simply using Groups instead of ViewNavigator and View should make this a little more lightweight and solve the issue of views not being pushed.
In fact ViewNavigator pushView() is a mechanism which create an instance of a given Class (method parameter).
For all navigation history purpose, ViewNavigator uses NavigationStack objects to store relevant values (that you can customize too).
I don't have a straightforward answer for you, but I think you'll have to implement your own custom ViewNavigator mechanism (extending ViewNavigator to leverage existing useful methods and override others).

Create another list from a list in Sencha touch

I am stuck at what seems to be a simple thing to do,
I am new to the whole Sencha touch environment and still need to get my head around a lot of things.
here is the issue Im facing,
I have built the gettingStarted app from Sencha homepage, this app is simple where it loads a list from JSON data & on clicking the item in the list, it shows the HTML content of the chosen item
What Im trying to do is create another list so that
1- List one loads on startup
2- On clicking an item in List 1, it loads another list 2
3- on cicking the list 2, it loads the HTML content.
I have written webservice to return data as JSON based on which I would like to build the second list.
Im calling a function "showPost" on itemTap and it looks like this:
showPost: function(list, index, element, record){
Ext.Ajax.request({
url: 'http://localhost/mobig/ws/search.php?cat='+record.get('category'),
success: function(response){
var text = response.responseText;
var responses = Ext.JSON.decode(response.responseText);
alert(responses.posts[0].title);
}
});
I also have, this:
this.getBlog().setData({
xtype:'panel',
title:record.get('category'),
html:'<img src='+record.get('imageURL')+'/>',
scrollable:true,
styleHTMLContent:true
});
}
which loads the HTML content from List 1.
Thanks for your help in advance, and sorry about the bad english,
If you can point me to some examples, It will be a good place to learn.
Thanks!
Mo.
The most convenient way to save your time is to use Ext.NestedList, but I don't recommend it because currently nested list performance in Sencha Touch 2 is still so terrible (scrolling, event catching, etc.), if you care more about performance, you should use 2 seperated Ext.List, for eg. list_one with store_one and list_two with store_two, when list_one fires itemtap event, catch record parameter and process it (maybe through reading a TreeStore, or write your own API such as http://yourdomain/api=get_list_two&record_from_list_one=record)
Hope it helps.
It sounds like you want to set up a nested list. Here's the nested list tutorial, which should point you in the right direction.