I am new to groovy and grails, hence this simple doubt. I have a map like this: [0:[A,B,C,D], 1:[a,b,c,d]]. I want to display it as follows: A: aB:bC:cD:d How do you display the data column wise? The .gsp I have now is shown below and all it does is display the values row wise.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<g:each in="${myMap}" var="element">
<tr>
<g:each in="${element.value }" >
<th>${it}</th>
</g:each>
</tr>
</g:each>
</table>
</body>
</html>
Pointing me in right direction for understanding maps in groovy will also be appreciated. Thank you.
Assuming that you have already validated that the columns and header lists have the same number of elements, you could do something like this...
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<g:each var="heading" in="${headings}" status="counter">
<tr>
<th>${heading}</th>
<td>${values[counter]}</td>
</tr>
</g:each>
</table>
</body>
</html>
I assume your example is a simplified version of your real problem. Depending on what you are really trying to do, you have a number of options. A simple thing might be like this (organize the table however you like, but this should give you the idea...):
// grails-app/controllers/com/demo/DemoController.groovy
package com.demo
class DemoController {
def index() {
// presumably you got this Map from somewhere and it isn't hardcoded here
def someMap = [0:['A', 'B', 'C', 'D'], 1:['a', 'b', 'c', 'd']]
def headings = someMap[0]
def values = someMap[1]
[headings: headings, values: values]
}
}
// grails-app/views/demo/index.gsp
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<tr>
<g:each var="heading" in="${headings}">
<th>${heading}</th>
</g:each>
</tr>
<tr>
<g:each var="value" in="${values}">
<th>${value}</th>
</g:each>
</tr>
</table>
</body>
</html>
Related
Hello I built an application in Spring with Thymeleaf and I am displaying the forms on one page and the results on another page and I would like to show both on the same page.
Here is my index page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau e-mail</title>
</head>
<body class ="bg-light" >
<h2 text-align="center">Cautare telefon sau email</h2>
<div class ="text-center" >
<form method ="post" action ="/raspuns" >
<div class="form-group">
<input type ="number" minlength="10" maxlength="10" class="form-control" name ="text2" th:value ="${text2_value}" placeholder="Numar telefon" pattern="[0-9]{10}" required/>
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
<br></br>
<form method ="post" action ="/raspuns2" >
<div class ="form-group" >
<input type ="email" class ="form-control" placeholder ="Adresa email" th:value="${email_value}"
name ="email" />
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
</div>
</body>
</html>
An here is my results page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau email</title>
</head>
<body>
<form action="/">
<button class ="btn btn-primary">Acasa</button>
</form>
<h1> Cautare telefon</h1>
<table class="table">
<tbody>
<tr th:each="map : ${map_list}" >
<td> CNP:</td>
<td th:text ="${map.get('cif')}" ></td>
<td> Nume:</td>
<td th:text ="${map.get('den_client')}" ></td>
</tr>
</tbody>
</table>
</body>
</html>
How can I make them appear on the same page ? I would appreciate if someone could give me a small example please. Thanks
I'm quite new in grails. I'm creating an SMS send module for my project. Here I'm getting some contact number from the user and displaying it inside a dynamically created 'TD' value. Now I want to pass this 'TD' values as a list to my controller.
def controller(){
def var = params.name
}
won't work here as it's not a field value.
Get all table td into array comma separated contact numbers.
Both ways added in the below code. First, where the contact number is last column. And the second, where all td value have class name.
// First way
var contactNumbers= []
$("#example tbody tr").each(function() {
contactNumbers.push($(this).find("td:last-child").html());
});
console.log("If Contact number column is on last"+contactNumbers.join())
// Second way
var contactNumbers1= []
$(".cnTd").each(function(i){
contactNumbers1.push($(this).text())
})
console.log("Contact numbers by class"+contactNumbers1.join())
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" id="example">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td class="cnTd">5675677567</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>90987786756</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>3455657457</td>
</tr>
</tbody>
</table>
</div>
Now you you send the collected values to controller using hidden form value or by sending ajax request or by query params. At contoller side simply use split(',') or tokenize(',') method to get list of numbers.
Hope this will helps you.
I was using a trial version of kendo grid then after the license expired my employer bought it so i was able to download (they gave access to my account - employer's account is separate)
telerik.kendoui.professional.2016.3.1118.commercial.msi
Now the problem is this is still not working, I have done the following steps to install kendo grid
I have run this installer, and have also manually added to my asp.net-mvc application
js folder under my application's Scripts/kendo folder
css files (styles folder) under my application's Content/kendo folder
My code
#Scripts.Render("~/Scripts/kendo/jquery.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
#Scripts.Render("~/Scripts/kendo/kendo.all.min.js")
#Styles.Render("~/Content/kendo/kendo.common.min.css")
#Styles.Render("~/Content/kendo/kendo.default.min.css")
<script type="text/javascript">
//shorter version of document.ready
$(function () {
//kendo.ui.Grid
$("#grid").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 1
},
pageable:true,
resizable: true,
columnMenu: true,
scrollable:true
}
);
});
</script>
<div id="examplegrid">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
</tbody>
</table>
My browser does not have any errors. But i cannot see a kendo grid there.
get support it says you are not licensed for any products (which is confusing because i downloaded the commercial version from there)
I have also posted this to their forums (from my employer's account) but it takes them at least 3 days to respond!!
Page Source snap shot
I am also adding view source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
UPDATE
When i re-opened visual studion it gave me option to update my telerik version which i said yes and it showed me the following screen.
After all this grid is still the same - without kendo-grid skin :S
UPDATE
I read this topic Widgets Are Unavailable or Undefined
So i removed a redundant jquery reference and now the grid looks like the attached image.
Note: this was a separate test appication and i intend to incorporate this grid into my main application. Now the grid looks like this
I found my answer from Bundle of Kendo UI is not working in IIS
So as soon as i renamed the bundle
bundles.Add(new StyleBundle("~/Content/kendo").Include(...));
To
bundles.Add(new StyleBundle("~/Content/kendoui").Include(...));
It worked great!
I have an html table with rowspan/colspan.I am using jspdf and jspdf-autotable for exporting that html table to pdf. However the pdf getting saved has a table which doesn't contain rowspan/colspan in actual table.How to do colspan/rowspan using jspdf-autotable?
My current code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script type="text/javascript">
function myFunction()
{
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
doc.autoTable(res.columns, res.data, {startY: 40});
doc.save("Report.pdf");
}
</script>
</head>
<body>
<table border='1' id="my-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>D</td>
<td colspan='2'>$100</td>
</tr>
<tr>
<td >E</td>
<td >F</td>
</tr>
</tbody>
</table>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
EDIT: Version 3 of the library supports rowspans and colspans, no hacks needed
The plugin doesn't support to automatically port colspans and rowspans from html. However you can do it manually. Check out this example (a demo is here).
In the meantime the plugin seems to support parsing the colspans from HTML. This should work:
<td colspan="2">Colspan</td>
OK, so I've looked at the getting started examples on the documentation available at: http://mottie.github.io/tablesorter/docs/index.html#Demo
I am trying the to do the basic example provided in the documentation, however my table does not load with the tablesorter features (i.e. the sort icons on the header, or clickable header columns) as the online version demonstrates. What am I doing wrong?...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Something</title>
<!-- load tableSorter theme -->
<link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
<!-- load jQuery and tableSorter scripts -->
<script type="text/javascript" src="./includes//jquery-2.1.0.js"></script>
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
<!-- load tableSorter widgets -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascropt">
$(document).ready(function(){
$("table").tablesorter({
theme : 'blue',
widgets : ['zebra','columns'],
sortList: [[0,0]],
debug : true,
widthFixed: false,
showProcessing : true
});
});
</script>
</head>
<body>
<table class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
It looks like the theme option is not being set. When you initialize tablesorter without any options:
$("#myTable").tablesorter();
The "default" theme is set, so make sure to include the "theme.default.css" file; but since it looks like you are loading the "blue" theme stylesheet, initialize the plugin as follows:
<script type="text/javascropt">
$(function(){
$("#myTable").tablesorter({
theme: "blue"
});
});
</script>
Now, from looking at the blue theme file name, it appears that it might be the original blue theme meant for tablesorter v2.0.5 ("/blue/style.css"). I would venture to guess that the tablesorter being used here is from my fork of tablesorter, so make sure to load the file named "theme.default.css".