I java a similar nested json arrayobj, It may be from 1..X (not limited)
[{"id":"25","son": [
{"id":"26", "son": [
{"id":"28","son":[],"message":"my message 1","creationDate":"2016-05-26"},
{"id":"27","son":[],"message":"my message 2","creationDate":"2016-05-26"}
],
"message":"my message 3","creationDate":"2016-05-26"}
],"message":"my message 4","creationDate":"2016-05-26"}
]
I nedd to display it using Kendo, I am using listviewm but it just list the firt item, not the son tag items.
I am trying to implement a forum control. Can you suggest a way to do it?. Thank you in advance.
As far as I know, you won't be able to achieve what you want using a kendo listview because it wasn't designed to display hierarchical data (or nested data).
However, kendo do have other widgets that you can use to what you want to do. I think the TreeList is probably the one you are looking for. In order to use that widget, you will have to modify the data from a nested format to a id / parendId format. Using the sample data you provided, you should reformat the data like this:
var data = [
{ id:25,parentId: null, message:"my message 4",creationDate:"2016-05-26" },
{ id:26, parentId:25, message: "my message 3", creationDate:"2016-05-26"},
{ id:28, parentId:26, message":"my message 1",creationDate:"2016-05-26"},
{ id:27, parentId:26, message:"my message 2", creationDate:"2016-05-26"}
]
Depending on your need, you may also use a TreeView but this widget isn't designed to display multiple fields by default. You can also use a grid with a custom detail template but that required extra code to handle the detail grid template initialization.
Related
In my Vaadin (v.23.2.6) application I am creating a bean of class Book. This bean has set of tags.
Tags are retrieved from the database and contain two properties - tagName and tagDescription.
In my UI form I specified MultiSelectComboBox for Tags.
this.tagsField = new MultiSelectComboBox<>("Tags");
this.tagsField.setAllowCustomValue(true);
this.tagsField.setAutoOpen(false);
this.tagsField.setItemLabelGenerator(Tag::getTagName);
It is working, but I do want to display value of tagDescription when cursor is hovering over the tagName in the selection list.
What kind of event listener I can use for that purpose? Shall I use Notification or there is something else that can help me with this implementation?
Please advise.
While it's technically possible, you don't want to listen to hover (mouseover) events on the server. That's overkill and will lead to a lot of unnecessary network traffic. Instead, you can take care of it in the client with a Renderer. For example, using the standard HTML title attribute:
tagsField.setRenderer(LitRenderer.<Tag>of(
"<span title='${item.description}'>${item.name}</span>")
.withProperty("description", Tag::getTagDescription)
.withProperty("name", Tag::getTagName)
);
How can I change the language for Sorting on PF DataTable component with reflow = "true" (so responsive Datatable)?
The problem is that on mobile screen, we can sort data from auto-generated dropdown where we have our sort options, see picture bellow. How can I change the language for this dropdown?
I'm using PF 6.0.
The intended way to do this is to define the following properties in your resource files (see Messages.properties)
primefaces.datatable.SORT_LABEL = Sort
primefaces.datatable.SORT_ASC = Ascending
primefaces.datatable.SORT_DESC = Descending
You can see this when you look at the DatatableRender of primefaces.
Notice i18n is done in different ways in primefaces. Some components like calendar or schedule must be translated via javascript. See here
I never ran into this or used it, but I know the source is open. So I went to the javascript file for the datatable. There I searched for 'Ascending' and via this.ascMessage, I ended up on line 170 where 'datatable.sort.ASC' is used as a key.
This in turn points to line 619 in core.js
getAriaLabel: function(key) {
var ariaLocaleSettings = this.getLocaleSettings()['aria'];
return (ariaLocaleSettings&&ariaLocaleSettings[key]) ? ariaLocaleSettings[key] : PrimeFaces.locales['en_US']['aria'][key];
},
Where you can see the normal PrimeFaces locale functionality is used.
So using your own locale and overriding this part in it, like in the default locale
aria: {
'paginator.PAGE': 'Page {0}',
'calendar.BUTTON': 'Show Calendar',
'datatable.sort.ASC': 'activate to sort column ascending',
'datatable.sort.DESC': 'activate to sort column descending',
'columntoggler.CLOSE': 'Close'
}
Will solve your issue I would expect
I'm trying to find a way to remove the time headers from the kendo scheduler. I've come across a few ways to do it via css, but they tend to leave the scheduler looking a bit "off".
I found some answers in the kendo docs detailing how to do it out of the box with a javascript implementation, but I'm looking for MVC which I can't seem to find any mention of. I've tried and tried to figure out how to do this, but I can't seem to find the appropriate attributes to set.
The kendo MVC wrappers are effectively ASPX/Razor helper functions that generate a javascript implementation. So assuming the javascript solution in the link you provide contains the solution you need, it should be possible to replicate it using the MVC syntax.
Looking at telerik's solution, they manipulate the DOM with javascript in the dataBinding event for Ungrouped and in dataBound for Grouped. You can specify handlers for these events when declaring the scheduler with MVC syntax:
.Events(e => {
e.DataBound("scheduler_dataBound");
e.DataBinding("scheduler_dataBinding");
})
...and then include the implementation of these functions on the page separately (code lifted from the telerik solution):
<script>
function scheduler_dataBound(e) {
var tables = $(".k-scheduler-times .k-scheduler-table");
//Required: remove only last table in dataBound when grouped
tables = tables.last();
var rows = tables.find("tr");
rows.each(function() {
$(this).children("th:last").hide();
}
function scheduler_dataBinding(e) {
var view = this.view();
view.times.hide();
view.timesHeader.hide();
}
</script>
//for hiding time header
$('#schedulerID').find('.k-scheduler-header-wrap').closest('tr').hide()
//for hiding date header
$(".k-scheduler-layout tr:first .k-scheduler-table").find("tr:eq(0)").hide()
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I am new to Kendo UI and I am trying to implement a tree view using Hierarchial datasource in Kendo UI. Following is the code sample
var elementList= " {text:\"ABC\"},{text:\"DEF\",items:[{text:\"childDEF\"}]}";
var dataDefault=new kendo.data.HierarchialDataSource(
{
data:elementList
});
$("#grouptree").kendoTreeView({
dataSource:dataDefault
});
The text in elementList is formed dynamically. I have my result in an array and then the data from the array is stored in this variable. I need to show this in a tree hierarchy. But when I run it, I am getting "object doesn't support this property or method" error in the line "data:elementList".
AM i missing something here like some other parameters or is there any other way to do it?
You are giving the data source a string. Change elementList to a regular JavaScript array. You have also misspelled HierarchicalDataSource (there is a "c" missing). Here is the fixed code: http://jsbin.com/usoqoh/1/edit