Hello I'm quite new to Kendo UI so my question is probably simple as well.
I am working with datasource of Kendo UI (Javascript) that reads a simple JSON object from a remote source, what works fine.
I struggle now with populating the data into single text fields within the HTML page. I find some example on Kendo UI documention talking about "template", "model", "columns", "binding", etc. but there is nothing I think I can adapt it to my needs. All examples I find are focussed on Kendo Widgets or "grid", what is not what I want.
Example:
I read the JSON by "datasource" object from remote source, looking like this:
[{"productid":"30","title":"apple"}]
In my HTML there are two input fields, one with ID="productid" and another one with ID="title"
I don't need a precise code solution just a hint/link how to proceed to populate the JSON elements into the value attributes of the two input fields. If this is possible is there also the other way possible like storing the values of the input fields back to a datasource and send it back to remote server for saving/updating purposes?
Any hint is welcome!
Related
In a VUE.JS 2 application I'm working on, there is a series of form fields dynamically generated from a JSON Schema. As the Schemas change so do the inputs. (We are using a modified version of this library : https://gitlab.com/formschema/native/tree/feature/new-architecture.
I'd like to attach a Basic WYSIWYG to a particular textarea that was dynamically generated. All the libraries I've come accross need you to manually add the Tag to the template with attributes. Since the form is dynamically generated this seems difficult to do.
Is there a simpler vuejs way to attach a WYSIWYG Editor to a textarea? Perhaps by linking it to a certain ID. The textarea comes prepopulated with data from an API, and that info would need to be included. Any insight is appreciated. I've looked at the following libraries with no success:
https://github.com/ckeditor/ckeditor5-vue
https://github.com/froala/vue-froala-wysiwyg
https://github.com/davidroyer/vue2-editor
I am working on a custom sitefinity module in which I need to add a custom field where I can select a Sitefinity Form from a list of existing defined forms on the backend. What is the best approach to do this? Precisely how should I approach in defining the field and making its UI?
Unfortunately when I select "Related Data" as field type, Sitefinity Form is not available in the list of built-in data types. The other option (advanced option) I see is a GUID (or array of GUIDs) field type among field types which suggest making a custom code.
CMS version is Sitefinity 8.2 and we are using MVC-based feather components as well as our custom MVC components to develop the website.
Anybody had similar requirement and experience on this?
I would probably create a custom field control. This can be streamlined by using Sitefinity Thunder (because there's a lot of boilerplate C# and JavaScript needed). Once that's in place, you can create a custom field of either type Short Text or GUID, and for the interface, you use your custom field.
In your custom field's code, you can do something like creating a drop down list, where the text for each option is the form name, and the value is either the "name for developers" field or the ID of the form. That way the input is always constrained to IDs pointing to Sitefinity forms. Then when you interact with your custom content items later, you can use this ID/name to look up the referenced form.
As an aside about Related Data: Indeed, that only refers to either built-in content types (blogs, news, etc.) or custom-build dynamic content types. You won't find things like Forms in there.
I'm transitioning a corporate web page into a new xpage platform. It consists of a number of department-specific databases each with their separate ACL's with the old forms and docs, and one new xpage db front end presenting data from across the other db's read only. The content is regulations and resources for the rest of the organization to relate to.
The design consists of just a few custom controls which collects data sources dynamically via properties on the various department specific xpages. So like 30 xpages collecting data from separate db's utilizing the same handful of cc's
My scoped variable issue is related to my cc_dataViewLocal . This dataView presents the documents from the corresponding views in the source db's. To let the user know their present location in the application I pull in the name of the current view and display the name above the Data View as a headline on the DataView xpage:
<xp:text escape="true" id="computedField1" styleClass="ksHeading2">
<xp:this.value><![CDATA[#{javascript:getComponent("dataView1").getData ().getView()
}]]></xp:this.value>
</xp:text>
All documents from all databases are presented using the same documentDisplay xpage with a dynamic document data source. Thus this xpage does not have any properties but is referenced trough the data view xpage:
<xe:dataView id="dataView1" collapsibleCategory="false"
rows="50" style="font-size:8pt" rowStyle="font-size:8pt"
collapsibleDetail="true" pageName="/**ks_documentDisplay.xsp**"
var="rowHandle">
--
When I open a document from the data view in documentDisplay.xsp I want the same headline/name of the original view displayed there as well. To make that happen I try to catch the view name in a scoped variable in an afterPageLoad event in the data view xpage, to redisplay it on the documentDisplay xpage.
<xp:this.afterPageLoad>
<xp:setValue binding="#{sessionScope.ksView}">
<xp:this.value><![CDATA[#{javascript:getComponent
("computedField1").value}]] ></xp:this.value>
</xp:setValue>
</xp:this.afterPageLoad>
After all the view name is not part of the document data source, and I have no other handle to the parent view at this point as I can see.
--
When I display the scoped variable on the dataView xpage in a computed field it works fine:
<xp:text escape="true" id="computedField2"
styleClass="ksHeading1" value="#{sessionScope.ksView}">
However, when I try to display the same session variable in the documentDispay xpage using the same computed field coding it turns up empty. Like the sessionVariable is lost to the next xpage?
I started out with a viewScope, and tried both request and session with same results. What am I missing??
Any input greatly appreciated! Including workarounds but would like to get a grip on the scoped variables...:-)
Regards to all who read this somewhat long post and thanks in advance!
Vidar Solevag
Thanks again for pointing me in the right direction. The problem clearly was I wiped the sessionScope in some way or other, exactly how I still don't know.
But as often is the case the solution was to do something else to get the same thing done...
What I found not to work:
-Moving the event to onClientLoad didn't work it threw an exception "cannot handle". In addition my original approach afterPageLoad did't really work either as it didn't update properly as other dataViews were chosen via Navigator on the page. Also setting the variable via the "Set" option on the simpleAction list turned out to be a problem. I got several "Not allowed to set the value of a read only computed expression"
What I did that worked:
-I set the value not by "Set"Simple action but by "Excecute script" and code
sessionScope.ksView=context.getSubmittedValue(). This in the onClick event in Navigator that selects which Dataview to display On the DataView xpage Then the SessionScope remains alive all the way into the documentDisplay xpage and until a different Dataview is selected back in the Nav back on the DataView xpage.
Now using the same sessionScope as the viewName property on the xpage I also set the sessionScope initially on afterPageLoad to have a default value when page is first opened...
So thanks again, a lot of headbanging into the wall here but that's what you learn from I guess :-))
How do I modify the edit view in my SQLFORM.grid - size of input fields, drip down menus, etc. Documentation is poorly written so any examples would be a big help.
Thank you
The SQLFORM.grid uses the assigned widgets in your database model.
So to change the output of the grid on widget level, change the model. The fieldtype defines the auto selected widget. See the field-constructors part of the book.
If you want more fine-grained control over the result you could tweak the widgets, override widgets, create your own widgets, patch the generated code in the browser using jquery of choose to write the entire grid yourself. Also you could change some parameters to the grid based on some SQLFORM parameters it passed through to the generated SQLFORM. Try the viewargs argument to the grid to alter the parameters sent to the SQLFORM when viewing. You might want to offer it something like dict(formstyle='divs') or use the ui parameter to offer a dictionary with classnames you use to apply your own CSS. ref
About the choice for using the grid in the first place:
These are two high level objects that create complex CRUD controls.
They provide pagination, the ability to browse, search, sort, create,
update and delete records from a single object.
So for very fine grained control it might be best to write your own grid instead of using such high level objects.
I'm not saying it's impossible to finetune the grid using the model and some javascript, but because it uses so much of all the other elements of web2py diving into the grid without much further web2py knowledge is quite a steep learning curve.
How can I post a FormPanel as well as an EditorGrid ( Grid Panel) as a single JSON object in ExtJS with Rails 3.0.3?
For Ex: I have a FormPanel and a GridPanel, when it's submitted, it goes as a single JSON Store into the controller.
P.S: Any way to do that without using Arrays?
Thanks in advance !
you might want to split the submit event into two elements.
In other words, you can encapsulate the form and the grid on 2 separate elements you can check for all fields during the submit. That would create 2 separate post events.
However, why would you want to do that. you should just redirect the events of each individually as an action happens.
And no, extjs formats everything in a JSON that you would have to decode out to break the array.