line don't break with \n angular - html

I have a problem when i do this :
DetailDisplayer(row) : String {
let resultAsString = "";
console.log(row.metadata.questions.length);
(row.metadata.questions.length != 0 )?resultAsString += "Questions :" + row.metadata.questions.join("\n") + "\n" : resultAsString += "Questions : " + "No questions" + "\n";
(row.metadata.startDate)?resultAsString += "Start date : " + row.metadata.startDate + "\n" : resultAsString += "Start date : " + "No date" + "\n";
(row.metadata.endDate)?resultAsString += "End date : " + row.metadata.endDate + "\n" : resultAsString += "Date de fin : " + "Aucune date" + "\n";
console.log(resultAsString);
return resultAsString;
}
(by default, all of these tests are false)
my output on my html is
Questions : No questions Start date : No date End date : No date
With this html code :
<ngx-datatable-row-detail rowHeight="auto" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div style="padding-left:35px;">
<div><strong>DETAILS</strong></div>
<div>{{ DetailDisplayer(row) }}</div>
</div>
</ng-template>
</ngx-datatable-row-detail>
I'm using row details function of the ngx datatable Angular component.
console.log(resultAsString); displayed me what i wish :
Questions : No questions
Start date : No date
End date : No date
So i don't understand why there is no break line displayed on my app. If somebody can help me to understand, thank you by advanced.
Julian

You should add the style white-space: pre; to div with DetailDisplayer. Try this:
<ngx-datatable-row-detail rowHeight="auto" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div style="padding-left:35px;">
<div><strong>DETAILS</strong></div>
<div style="white-space: pre">{{ DetailDisplayer(row) }}</div>
</div>
</ng-template>
</ngx-datatable-row-detail>

Just apply the CSS property/value to your element white-space: pre-line;.
Most HTML elements will not display \n as a new-line by default.

Related

Browser can not parse HTML properly - Grails 2

I am generating HTML from controller (Backend) but browser can not parse that HTML properly.
Controller code:
def getValue (returnIndex) {
String dropDown = "<select name='" + returnIndex + "' style=''>"
def CatArr = new BudgetViewDatabaseService().executeQuery("SELECT c.id,c.name AS categoryName FROM chart AS a LEFT JOIN crtClass AS b ON a.id=b.chart_class_type_id LEFT JOIN chart_group AS c ON b.id=c.chart_class_id WHERE c.status=1")
if (CatArr.size()) {
for (int i = 0; i < CatArr.size(); i++) {
def catId = CatArr[i][0]
def ProductArr
ProductArr = new BudgetViewDatabaseService().executeQuery("SELECT id,accountCode,accountName FROM bv.crtMsr where status='1' AND chart_group_id='" + catId + "'")
if (ProductArr.size()) {
dropDown += "<optgroup label='" + CatArr[i][1] + "'>"
for (int j = 0; j < ProductArr.size(); j++) {
dropDown += "<option value='" + ProductArr[j][1] + "' >" + ProductArr[j][1] + " " + ProductArr[j][2] + "</option>"
}
dropDown += "</optgroup>"
}
}
}
dropDown += "</select>"
return dropDown
}
view page's code:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getValue('formFourGLAccount')}
</div>
issue:
Generated HTML looks like:
When I am opening that HTML on edit mode from browser then its looks like:
<select name='formFourGLAccount' style=''><optgroup
label='Overige immateriële bezittingen'><option value='0430' >0430 Overige niet
materiële bezittingen</option></optgroup><optgroup label='Computers en
computerapparatuur'><option value='0210' >0210 Computers en
computerapparatuur</option><option value='0211' >0211 Afschrijving computers en
computerapparatuur</option></optgroup><optgroup label='Overige materiële
bezittingen'><option value='0250' >0250 Overige materiële
bezittingen</option><option value='0251' >0251 Afschrijving overige materiele
bezittingen</option></optgroup><optgroup label='Waarborgsommen'><option
value='0300' >0300 Waarborgsommen</option></optgroup><optgroup
label='Deelnemingen in andere bedrijven'><option value='0310' >0310 Aandeel of belang
in andere bedrijven</option></optgroup><optgroup label='Strategische langlopende
beleggingen'><option value='0320' >0320 Strategische langlopende
beleggingen</option></optgroup><optgroup label='Verstrekte langlopende leningen
(hypotheek ed)'><option value='0330' >0330 Verstrekte langlopende leningen (hypotheek
ed)</option></optgroup><optgroup label='Overige financiële
bezittingen'><option value='0340' >0340 Overige financiële bezittingen</option></optgroup><optgroup label='Voorraad'><option
If I copy returns result (HTML) from controller and past it on browser manually then its working fine
You have not shown how that HTML is being rendered so it isn't clear specifically how to fix it, but what is happening is the content is being HTML encoded, which you do not want if you want the browser to evaluate the HTML tags.
EDIT Based On Comment:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getGLAccountExpanseBudgetForReconcilationOthersDropDown('formFourGLAccount')}
</div>
There is no good reason to create an instance of a taglib. You should invoke the tag as a GSP tag.
You are returning hardcoded HTML from your controller as a model variable. That is a bad idea, but not what you are asking about. If you really do want to do that, then you will need to prevent the data from being HTML encoded in your GSP. You can use the raw(your unescaped html code here) method in your GSP as one way to avoid the encoding.

Using the Angular Slice Pipe with " , " and " ... "

I wanted to use the Slice Pipe so a list will stop showing after 5 elements, so far so good only problem is I want to use a " , " to seperate them and after the 5th element I want to have this" ... " I tried various things like a custom pipe or the truncate Pipe but nothing helped me. Can someone maybe give me a pointer where my mistake lies?
<div class="farmer-common-products "
*ngFor="let commonCategory of farm.commonProductCategories | slice:0: 5 " >
{{ commonCategory.name }}
</div>
To solve your problem you can use local variables in your *ngFor (see docs). Like in the following example:
<div class="farmer-common-products "
*ngFor="let commonCategory of farm.commonProductCategories | slice:0: 5; let last = last">
{{ commonCategory.name }}
<span *ngIf="!laste">,</span>
<span *ngIf="last && farm.commonProductCategories.length">...</span>
</div>
Or you can implement a Pipe, which returns you a string in your desired format:
#Pipe({
name: 'formatCategories'
})
export class FormatCategoriesPipe implements PipeTransform {
transform(arr: any[]): string {
let text = arr.slice(0, 5).join(',');
if (arr.length > 5) {
text += '...';
}
return text;
}
}

send value from client side to server side using C# in asp.net

I'm trying to create a website content management using asp.net and C# and bootstrap. I already done this using asp.net and C# and a server control like gridview but I want create this version one like as wordpress CMS.
I will describe my project to clear my purpose.
First I fill a DataTable from database. This Datatable has messageId int, Subject varchar, name varchar, email varchar, message text, isRead bit, and so on columns.isRead column is bit type for specifies that the message is read or not.
I Fill my DataTable using below Method:
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
Then I generate html text using another method dynamically: on Page_Load
protected void Page_Load(object sender, EventArgs e)
{
messeges = cls.fetchMessages();
}
messege the string variable, will append generated html code to aspx page:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> Last messages From users</h3>
</div>
<div class="panel-body">
<div class="list-group">
<%=messeges %>
</div>
<div class="text-right">
View All messages <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
the message content has these text from fetchMessages()method:
public string fetchMessages()
{
string post = ""; string readed = "";
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
if (dt.Rows.Count>0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
DateTime dtTemp = DateTime.Parse(dt.Rows[i]["messageDate"].ToString());
if (dt.Rows[i]["isRead"].ToString() == "True")
readed = "MessageReaded";
else
readed = "MessageNew";
post += "<div class='modal fade' id='myModal" + dt.Rows[i]["messageId"].ToString() + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>"
+ "<div class='modal-dialog' role='document'>"
+ "<div class='modal-content'>"
+ "<div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='myModalLabel'><span style='font-weight:bold'>Subject</span> : " + dt.Rows[i]["subject"].ToString() + "</h4></div>"
+ "<div class='modal-header'><p><span style='font-weight:bold'>Date</span> : " + dtTemp.ToString("yyyy/MM/dd") + "</p>"
+ "<p><span style='font-weight:bold'>Time</span> : " + dt.Rows[i]["messageTime"].ToString() + "</p>"
+ "<p><span style='font-weight:bold'>Email</span> : " + dt.Rows[i]["email"].ToString() + "</p></div>"
+ "<div class='modal-body'>" + dt.Rows[i]["message"].ToString() + "</div>"
+ "<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><input type='submit' ID='btn" + dt.Rows[i]["messageId"].ToString() + "' class='btn btn-danger' onserverclick='btn_Click' value='Delete message' /></div>"
+ "</div></div></div>";
string narrow = Special.TimeToNarrow(dt.Rows[i]["messageDate"].ToString(), dt.Rows[i]["messageTime"].ToString());
post += "<a data-toggle='modal' data-target='#myModal" + dt.Rows[i]["messageId"].ToString() + "' href='#' class='list-group-item " + readed + "'><span class='badge'>" + narrow + "</span><i class='fa fa-fw fa-comment'></i> <span>"
+ dt.Rows[i]["name"].ToString() + "</span> : <span>" + dt.Rows[i]["subject"].ToString() + "</span></a>";
}
}
return post;
}
finally I add server code behind for btn_Click Event:
protected void btn_Click(object sender, EventArgs e)
{
string id = (sender as Control).ClientID;
//Then give Id to database class for CRUD Intractions
}
but btn_Click never called from client side. I search for similar question within 2 days and didn't get answer. please help me :)
Here I will put my Website screen Shots:
Then after click on one of the rows a pop up window will show using modal bootstrap:
Add your Modal, button and any other mark up you have to the ASPX page (mark up). Then you can get your ID on click event. The dynamic generation of your code is not registering the controls with the server side in Webforms.
Once you have captured your Message ID, you can place it in ViewState, Session or a hidden field on the UI. That way you can have the ID to use whenever you need it.

I want to add some style by myself, but the page seems does not recognize

In my code I want to add the color for the $scope.originalGurus[i]['symbols_type'][j], the color is depends on the content of $scope.originalGurus[i]['symbols_type'][j].
in my code, if that is "New" or "Add" it must be green. But for else, it must be red.
And I only want to add color for the $scope.originalGurus[i]['symbols_type'][j], not includes $scope.originalGurus[i]['symbols'][j]
the result I want is like : ISNPY:(color is black) New(color is green)
in my code "ISNPY" is store in the $scope.originalGurus[i]['symbols'][j],but the "New" is store in the $scope.originalGurus[i]['symbols_type'][j]
I use angularJs.
My code as follows:
for(var j = 0; j < $scope.originalGurus[i]['symbols'].length; j++){
if($scope.originalGurus[i]['symbols_type'][j] == "New" || $scope.originalGurus[i]['symbols_type'][j] == "Add"){
$scope.originalGurus[i]['symbols_show'][j] = $scope.originalGurus[i]['symbols'][j] + ": <p style=\"color:green;\">" + $scope.originalGurus[i]['symbols_type'][j] + "</p>";
}else {
$scope.originalGurus[i]['symbols_show'][j] = $scope.originalGurus[i]['symbols'][j] + ": <p style=\"color:red;\">" + $scope.originalGurus[i]['symbols_type'][j] + "</p>";
}
}
And the html is very simple:
<div ng-repeat="symbol in gurus.symbols_show">
{{symbol}}
</div>
As the result, the page will display like:
ABC: <p style="color:green;">ABC</p>
My data like this:
[
{
"symbols": [
"ISNPY",
"COWN",
"OSUR"
],
"symbols_type": [
"New",
"New",
"New"
]
},
{...},{...}.{...}...]
It not meet my requirements, Any body knows the reason?
There is no need to create symbols_show at all.
Assuming your symbol_type and symbol are natural arrays:
<div ng-repeat="symbol_type in gurus.symbols_type track by $index">
{{gurus.symbols[$index]}}: <p ng-style="{color: (symbol_type == 'New' || symbol_type == 'Add') ? 'green' : 'red'}">{{symbol_type}}</p>
</div>

displaying products in jsp as a grid

i'm trying to display my database content on a grid like this one:
grid example
I'm getting all products on one vertical colmun like this:
my products display
products are inserted in the array"Arrayp" ,right now i can diplay database content on vertical table or horizontal table but not on a grid like mentioned, this is my code and i would appreciate a help
<TABLE >
<%
while (cmp<=size )
{
out.println("<tr>");
out.println("<td>");
out.println("<p><img src=\"images/" + Arrayp.get(cmi) + " \" width=\"100\" height=\"100\" /></p>");
out.println("<p> categorie " + Arrayp.get(cmp) + "</p>");
out.println("<p> prix " + Arrayp.get(cmpri) + "</p>");
out.println("<p>quantité disponible " + Arrayp.get(cmpqt) + "</p>");
out.println("<form name='f' action='panier' method='post'>");
out.println("<input type='hidden' value= "+Arrayp.get(cmbref) +" name='ref' >");
out.println("<p>quantité desirée</p>");
out.println("<p><input type='text' name='nbr' ></p>");
out.println("<input type='submit' value='ajouter au panier' />") ;
out.println ("</form>");
cmp=cmp+8;
cmi=cmi+8;
cmpqt=cmpqt+8;
cmbref=cmbref+8;
out.println("<p></p>");
out.println("<p></p>");
out.println("</td>");
out.println("<tr>");
%>
</TABLE>
Use a counter to count items and when 4 item crossed add a new <tr> tag. Where now you adding <tr> tag for each item. Below i have give example, you can modify as you need.
Like:
<html>
<head>
tr {
display: block;
border: 1px solid blue;
}
td{
border: 1px solid red;
padding: 8px;
}
</style>
</head>
<body>
<%
int start = 0;
int elementsLen = 10;
int counter = 1;
int noOfItemsInRow = 4; //set number of td you want in tr
StringBuilder sb = new StringBuilder();
noOfItemsInRow++;
//start table
out.println("<table>");
while(start<=elementsLen){
sb.append("<td>");
sb.append(start);
sb.append("</td>");
//check if noOfElemntsInRow elements is reached keep it in a new row
if(++counter==noOfItemsInRow){
out.println("<tr>");
out.println(sb.toString());
out.println("</tr>");
sb.setLength(0);
counter = 1;
}
start++;
}
//print remaining td elements in a new row
if(sb.length()>1){
out.println("<tr>");
out.println(sb.toString());
out.println("</tr>");
}
//close table
out.println("</table>");
%>
</body>
</html>
Output:
Note: this is not a good idea to use scriptlets in jsp, instead you should use jstl.
I have it working now , i tried before with the if and it didnt work properly.
bizarrely i tried it today without closing the tr i mean without /tr in the end and it works and i got a clean grid :D
update : the problem was solved by closing the TR outside of the while loop, thx to all
here is the working code
int c =0;
int numberofcolumns=4;
%>
<TABLE>
<%
while (cmp<=size )
{
c++;
if (c==numberofcolumns){
numberofcolumns=numberofcolumns+3;
out.println("<tr>");
}
out.println("<td>");
out.println("<p><img src=\"images/" + Arrayp.get(cmi) + " \" width=\"100\" height=\"100\" /></p>");
out.println("<p> categorie " + Arrayp.get(cmp) + "</p>");
out.println("<p> prix " + Arrayp.get(cmpri) + "</p>");
out.println("<p>quantité disponible " + Arrayp.get(cmpqt) + "</p>");
out.println("<form name='f' action='panier' method='post'>");
out.println("<input type='hidden' value= "+Arrayp.get(cmbref) +" name='ref' >");
out.println("<p>quantité desirée</p>");
out.println("<p><input type='text' name='nbr' ></p>");
out.println("<input type='submit' value='ajouter au panier' />") ;
out.println ("</form>");
out.println("<td>");
cmp=cmp+8;
cmi=cmi+8;
cmpqt=cmpqt+8;
cmbref=cmbref+8;
out.println("<p></p>");
out.println("<p></p>");
}//
out.println("</tr>");
%>
</TABLE>