Is there alternative available to jqx render capability - $gridContainer.jqxGrid('render') - jqxgrid

We are using jqxGrid library from jqwidgets. In this I am using jqxDropDownList for displaying list created from json data and upon selecting a value from dropdown filtering should happen.
We had some UI issues hence we had to remove below line, now I would like to know is there alternative available for below code :
code :
$gridContainer.jqxGrid('render')

if you want to update two-way data then you should used observableArray()
here check the demo code jqx observable array
var observableArray = new $.jqx.observableArray(
[{name: "Andrew Smith"},
{name: "Gordon Brown"}],
function(changes)
{
// handle changes here.
});

Related

Bonita 7 : Custom Widget property type to support JSON data

I am trying to create a new custom widget in Bonita 7 and I need a Property that can accept JSON data (not simple array collection) i.e., I want to assign below data
[
{
'header1': 'data1-1',
'header2': 'data1-2',
'header3': 'data1-3'
},
{
'header1': 'data2-1',
'header2': 'data2-2',
'header3': 'data2-3'
}
]
I tried all the available property types (text,choice ,html ,integer,boolean ,collection property) & I guess nothing works.
Could someone help me to achieve this.
I am trying to create a Smart-Table custom widget (https://github.com/lorenzofox3/Smart-Table) & I want the table data(rows) to be populated using a variable that is of JSON type.
Is there any other way of achieving this.
Thank you very much for your time
I am very sorry, collection property type actually works
This is what I did:
In the CUSTOM WIDGET EDITOR
1A) created a new property :
name : tableDataCollection
Label: TABLE_DATA
Type: collection (text type also works)
Default value: (trying to assign JSON data here didn't work for me)
1B) In the Controller box, use the property tableDataCollection defined in step 1A:
$scope.data = $scope.properties.tableDataCollection; (inside function ($scope) {})
1C) In the Template box, use the variable data defined in step 1B:
example : <tr ng-repeat="row in data">
2) In the PAGE EDITOR (FORM EDITOR), if you are using the custom widget created in step 1, you will see a new fields on the right related to your custom widget. In my case it is TABLE_DATA
2A) Now, create a new form variable of type JSON.
example : data2Var =
[{
"header1": "data1-1",
"header2": "data1-2",
"header3": "data1-3"
},
{
"header1": "data2-1",
"header2": "data2-2",
"header3": "data2-3"
}]
2B) Now, Assign the variable created in step 2A to your custom widget field.
in my case, I assigned data2Var to TABLE_DATA

Webix: how to dynamically load components from external js file into a layout?

I would like to know how to update a row/col and or layout from an external js file on webix. Let's say I have a menu at the left of the screen (col[]) and want to update the right column based on a menu selection. If the menu is composed by
Customers
Orders
Products
And want to update the right column based on the selection calling customers.js, orders.js and products.js
Just like http://webix.com/demos/admin-app/#!/app/orders
That example is very advanced for me, I would like to learn some basic method.
Thanks
Oscar P
You can use webix.ui command or addView API to add a new UI to some specific place on the page.
webix.ajax("config.json", function(text){
$$("layout").addView( JSON.parse(text) );
})
or
webix.ajax("config.json", function(text){
webix.ui( JSON.parse(text), $$("cell_to_replace"));
})
Aquatic,
I also found out an example with .showBatch() API but the console shows "Uncaught TypeError: $$(...).addView is not a function" on both functions, are those part of PRO version? what is wrong?
My code is:
$$("workArea").addView("clientes");
or
$$("workArea").showBatch("batClientes");
on:{
onMenuItemClick:function(id) {
$$("workArea").addView(id);
}
}

How to create an OData service for SAPUI5 TreeTable?

Does someone know if there is a way to create a OData Service that is bindable to an SAPUI5 TreeTable element?
According to the example from here:
https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/ui/table/demokit/TreeTable.html
The recursive structure of the data is a list. For example:
//Define some sample data
var oData = {
root:{
name: "root",
description: "root description",
checked: false,
0: {
name: "item1",
description: "item1 description",
checked: true,
...
I expected to solve that problem with an navigation at the service side. Like
Element with attributes and one attribute points to a list of Elements.
But this would not be the same.
I also detected this thread, but the answer is one year old:
http://scn.sap.com/thread/3389546
All in all, is the answer still true? Or is there a solution, so that the data binding works?
You can use treebinding from ODataModel. First of all, prepare backend. You need to cycle navigation in your entity set. For example, you have entity set ItemCollection and you add navigation property ItemNavigation which refers to ItemCollection. After just bind tree to your TreeTable:
var oTreeTable = this.getView().byId("myTreeTable");
oTreeTable.bindRows({
path : '/ItemCollection',
properties : {
navigation : {
'ItemCollection' : 'ItemNagigation'
}
}
});
Should work fine but be aware to use it with Tree control. TreeTable loads navigation item by click on its parent and Tree loads the whole tree at once.

Breeze navigation property is not observable

I don't understand something about collection navigation properties.
First, I went through metadata debug, all checks out. As per documentation, I expected the navigation collection property to be observable, e.g. I can get the collection via
Foo.Bar() // bar is KO observable array
However, I can't get it working like that.
My query:
new breeze.EntityQuery()
.from('Classes')
.where('ClassId', '==', id)
.expand('LessonOfClasses')
Results to:
[
{
"$id":"1",
"$type":"Model.Class, Model",
"ClassId":24,
"LessonOfClasses":[
{
"$id":"2",
"$type":"Model.LessonOfClass, Model",
"class_lesson_id":30,
"class_id":24,
"lesson_id":40,
"Class":{
"$ref":"1"
},
"Lesson":null
},
// other instances of LessonOfClass...
]
// other properties of Class...
}
[
Which looks fine to me. However, when I run the query the result is:
var classObject = data.results[0];
classObject.LessonOfClasses // returns normal array
classObject.LessonOfClasses() // error: not a function
Figured out when knockout isn't available as a dependency, Breeze results to using plain JSON objects.
The problem is I'm using knockout as a require.js dependency and the global ko reference wasn't set.
requirejs(['knockout'], function(ko) {
window.ko = ko;
})
Breeze is looking strictly for ko, as opposed to durandal which I think looks for knockout.

Worklight - Enable Translation

From the Worklight tutorial - 05_05_Enabling_translation.pdf (Sample app), we can
1. Define the translated message in messages.js
2. Reference the message in HTML as the ID of an HTML element with class="translate" or as a JavaScript object property Messages.<ID>.
3. Implement a languageChanged function to set a new value of Messages.<ID> and update the content to selected language.
In the example - languageChanged(lang) function:
$("#sampleText").html(Messages.sampleText);
$("#headerText").html(Messages.headerText);
$("#actionsLabel").html(Messages.actionsLabel);
is used to update the content to selected language.
From my understanding, it is required to write the above line of codes to update the content to selected language.
Is there a better way to update the content if there are lots of elements?
You can easily iterate over all elements by using jQuery selectors and update text, e.g. something like
$(".translate").each(function(index, element){
element = $(element);
var elementId = element.attr("id");
element.text(Messages[elementId]);
});

Resources