I've been trying to get a selected dropdown option to appear in a Word Document on export.
The current default behavior is that all option tags appear in the exported document with no indication of which was selected. (This makes sense that this behavior would occur since the export function is simply exporting all the html as plain text).
So far, these are the approaches I've tried (none of which work):
-Capture the export event before it is sent to the controller via the javascript execute event (thus being able to strip out any unwanted text). The issue is the execute event and exportas event are asynchronous, so I can't modify the file before the export event call is executed.
-Modify the text on the controller side before it is converted to a Word document and downloaded (the text is sent through without special characters, which makes it nearly impossible to parse)
-Attempt to replace the dropdown with a kendo autocomplete widget (this would also be an acceptable solution). The widget does not render properly inside the document. All of the datasource options are there and even filters corretly, but it does not style correctly or open.
Has anyone else been able to find a solution to this problem or have another approach I could use?
EDIT:
As per requested, here is a screenshot of the base code:
My initial idea on how you could accomplish this:
1. Pull that select list out of your editor.
2. Bind an event handler to the change event of your list to add the value of your list into the editor. Are you using JQuery in your project? It's a dependency for Kendo so this ought to work:
$("#selectListId").on("change", function () {
$("#editor").val( $("#selectListId").val());
});
In reality though I'm guessing this approach will be used to populate some template of text with values selected by the user? In that case, you may want to save the template first before applying the value selected.
Now that you've identified you need that dropdown menu to be usable on the exported word document, attempt the following:
Create a new word document.
In that word document, open the Developer tab. (If you don't know about it, google how to enable it)
Insert a new Dropdown Menu Content Control using the Developer tab.
Select this content control, then open Properties menu item on Developer tab.
Update the content control with your values:
Save this word document.
Use the Kendo Editor Import to import this document containing your template.
Attempt exporting what was just imported.
If that works and the editor has editable dropdowns from that content control, I will be very surprised... Good luck!
Related
For the various kendo editor tools like List, Table etc. we need to change the content before its inserted into the editor. For example, add a CSS class to a UL element or add some data properties.
How do we achieve this? We looked at the command event, however, changing values of the command does not seem to have any impact in the final HTML that is inserted into the editor.
I've tried doing it with exporting the solution and changes the XML code and then importing it again.
as you can see in the image two bars after 'Do You Want to' column. But when I open this grid in Unified client interface it is still visible.
like in this grid.if 'isAllowOverride' is True I want to make 'Do you want to' be editable. But 'isAllowOverride' has to be invisible from User end.
Not sure why you are editing the xml for such customization. But this can be easily configured in UI itself.
Go to the form editor, open the subgrid properties, check the view it’s configured to show, edit the view columns to remove the unwanted ones, save the view and set the subgrid with the correct edited view again (there’s a product bug which switch to the default Active view), save & publish the form. That’s it.
Update:
We cannot have two different layouts for Display mode vs Edit mode. That being said, you have to disable the editable grid columns based on conditions.
I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.
I want to add an option to the row of the view: the possibility to open the document when clicking on the row. It is possible? How can I achieve this?
Add displayAs="link" to viewColumn. Then it is rendered as link and opens the document if you click on it. You can also choose to open it in edit or read mode.
Set the attributes in properties panel:
Update:
You can open the corresponding document clicking somewhere on a viewPanel's row (not just on a column's link) if you add a rowAttrs property.
Add the following code to your viewPanel:
<xp:viewPanel
rows="30"
id="viewPanel1"
var="row">
...
<xp:this.rowAttrs>
<xp:attr
value="window.open('#{javascript:row.getOpenPageURL(null, true)}', '_self')"
name="onclick"
rendered="#{javascript:!(row.isCategory() | row.isTotal()) }">
</xp:attr>
</xp:this.rowAttrs>
</xp:viewPanel>
Set viewPanel's row variable to var="row". The attribute attr gets rendered for all rows which are represent a document. It adds an individual onclick event to those rows and executes CSJS code defined in value. This CSJS code contains a SSJS part which inserts the URL of the document as window.open's parameter.
If you set getOpenPageURL's second parameter to false then document will be opened in edit mode.
Look here for a detailed description.
I think there is no easy way ;-) Maybe JQuery is your friend to add a on click event to the row with needed
I would kindly ask for your help :) From couple of days I am trying to achieve "linked" custom field in content editor and dropdown in page editor.
Basically I want to have dropdown in page editor and content editor which are responsible for a same thing.
In my c# code i have enums which represent directions. I created custom field which accepts assembly and class with overridden onload method and successfully populate dropdown values in the content editor. So far so good but i have no idea how to create dropdown which will represent the same functionality inside page editor.
So please give me any ideas...
Judging from your reply to my comment you need to think of the following: How is my field value being rendered onto a page?
If you are always using 1 control to do this then you just need to ensure that this control has 2 different rendering modes depending on the Context.PageMode
But as I understand it you want this dropdown to also appear when someone renders your custom field using a <sc:FieldRenderer>. In this case you'll need to look into the RenderField pipeline of Sitecore. There you find a processor called RenderWebEditing. Possibly through some manipulation here you can get your dropdown appear as you wish.