Tried creating DHX spreadsheet into my react application, followed the website guide https://dhtmlx.com/docs/products/dhtmlxSpreadsheet-for-React/#how-it-works.
However when the spreadsheet is rendered out in my application, i notice that no matter what i do i can't select the Column A to D.
Have anyone faced this issue as i did?
https://gitlab.com/patrickklze/trying_dhx_spreadsheet.git
Screenshot of the issue
Found and fix the issue.
Somehow it inherits the main css file and text align everything to middle which causes the columns to have bugs.
Add a inline styling on the component tag in your app.js for example:
<span style={{textAlign:"left"}}>
<SpreadsheetComponent />
</span>
Would solve the issue.
Related
I'm rendering a custom header with react-datepicker, and passing in the relevant functions for the datepicker and monthpicker, such as increaseMonth and increaseYear.
Currently, this is a sample of what navigating with the custom header looks like:
<div
onClick={showMonthPicker ? decreaseYear : decreaseMonth}
>
<BiChevronLeft />
</div>
It's worked well for the monthpicker and datepicker, but when I try to use it with the yearpicker, clicking the left and right navigation buttons instead increases the year or month. I've looked at the docs, but there doesn't seem to be any callback for increasing the decade number similar to increaseMonth and increaseYear. Anyone mind pointing me in the right direction?
yearpicker with custom header
I'm a new user of TinyMCE, and i'm trying to incorporate it in my React App. But i'ma actually getting an output problem. When try "format:text" in the tiny component, and try to create a post in my blog using bold and italic options, when the post is posted, the displayed text is just normal, without bold or italic properties. So, I've tried the "format:html" but in this case, I get my text without any styles at all, AND we see the <p> balises.
So, it can looks like a stupid question but, how do we output the posted text correctly ?
As always, thx in advance !
This happened to me as well. If you do not want to see the attributes on your output then go to the React Component which is responsible for output and in your React component when you use the return() keyword you should create a div use the
dangerouslySetInnerHTML attribute inside.
Example:
Here's [a link] (https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/)
In Angular 2, I am using PrimeNG calendar using model driven form with *ngSwitchCase as follows
<div [ngSwitch]="field.controlType">
...
<p-calendar *ngSwitchCase="'date'" [formControlName]="field.key" [id]="field.key" [showIcon]="true" dataType="string"></p-calendar>
...
</div>
The calendar comes up well on the UI, but when I select the date, or click outside on the page, it does not go away.
Only when I click on tab to go away, the calendar is closed.
If I use ngModule, it works fine, but that is not the requirement.
Does anyone have any clue/example on it, please share
Thanks
Found the error that I was using <div class="section"> somewhere before the primeng calendar.
Renaming the css section class to appsection solved this issue.
Simple problem here - but cant seem to find answer. I have added the angucomplete-alt to my project - I believe that I have added it all correctly - meaning, registering it and having the js file available when the page loads. But for some reason when I click on the input and start to type - nothing happens. I am unable to type in the textbox/input. below is my code for the control. - im double checking how things are wired up on the back end. - thanks in advance.
and this exact code works in another project - configured differently - but the markup for the control is the same
<angucomplete-alt id="searchGroupsAutoComplete"
placeholder="{{searchPlaceholder}}"
pause="400"
text-searching="{{searchingText}}"
selected-object="selectedAnObjectFn"
remote-url="/api/search/SearchByQueryStrings"
remote-url-request-formatter="formatSearchDataFn"
remote-url-response-formatter="formatReturnDataFn"
remote-url-data-field="Content"
title-field="Name"
description-field="EntityType"
image-field="ThumbnailUrl"
minlength="1" />
Remove maxlength="{{maxlength}}" of INPUT tag in $templateCache.put(TEMPLATE_URL,..... (angucomplete-alt.js)
so it worked, but I don't known why.
I'm working to customize liferay's Calendar portlet and have created a hook for this.
I want to show all the "Related Assets" associated with a Calendar Event directly in the list page itself where all the Events are displayed instead of the Event's detail view page.
Currently liferay shows the "Related Assets" only when we click on the Event to view the details of that Event.
Can anyone help me?
Environment: Liferay 6.1
Thanks a lot
Sabrina
I assume you already have liferay's source code and you know how to create a hook.
The JSPs you would be modifying would be in this path:
portal-web/docroot/html/portlet/calendar
So here are some steps to help you solve your query:
You need to modify the event_iterator.jspf: row.addText(event.getTitle(), rowURL);
You have to adjust the following code taken from view_event.jsp in event_iterator.jspf.
<%
AssetEntry layoutAssetEntry = AssetEntryLocalServiceUtil.getEntry(CalEvent.class.getName(), event.getEventId());
%>
<%-- <liferay-util:buffer> is a tag which stores all that is written inside
its body in a single variable string, in this case "relatedAssetsLinksBuffer"
--%>
<liferay-util:buffer var="relatedAssetsLinksBuffer">
<c:if test="<%= enableRelatedAssets %>">
<%=event.getTitle() %>
<div class="entry-links">
<liferay-ui:asset-links
assetEntryId="<%= layoutAssetEntry.getEntryId() %>"
/>
</div>
</c:if>
</liferay-util:buffer>
Now the line in step-1 becomes: row.addText(relatedAssetsLinksBuffer, rowURL);
I have not tried this but I think it would work or will atleast give you some help in solving your query.
Tip for Hooks (might be useful in future):
Liferay follows a convention in storing its JSPs, so for custom-jsps Hook (i.e. a hook created for modifying liferay's JSP) you just need to search for that particular JSP & modify it.
For Eg: You wanted to modify the first page of calendar portlet. So liferay portlet's first page is always view.jsp located in the folder with the same name as the portlet-name in this case "Calendar" and view.jsp will contain some tags like <%# include /> or <liferay-util:include /> which would include other files to show the content. So you can always start with a view.jsp and navigate ahead. By the way the names of the JSPs are also most of the time self-explanatory.
Hope this helps.