I've added a kendoDropDownList in one of the cells in a kendoGrid, and it works fine at first. However, when I click on a column header to sort, the cell loses its formatting. Anyone have any idea how to prevent this? Here's a simple sample:
<html>
<head>
<title>test</title>
<link href="/kendoui.web.2013.2.716.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2013.2.716.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/kendoui.web.2013.2.716.open-source/js/jquery.min.js"></script>
<script src="/kendoui.web.2013.2.716.open-source/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<table class="gridTable">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="options">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="wrap">Item</td>
<td>
<select class="menuBar" style="width:80px;">
<option>Big</option>
<option>Medium</option>
<option>Small</option>
</select>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$(".gridTable").kendoGrid({
sortable: true
});
$(".menuBar").kendoDropDownList({
});
});
</script>
</body>
</html>
The Grid is reconstructed each time you perform Page/Sort/Group etc. For such cases you need to use the dataBound event of the Grid to re-initialize any widgets or executed any JavaScript code that affects what is displayed in the Grdi.
Related
I have a spring boot app that uses thyemeleaf for html and boostrap for design.
I'm looking for a table that can do the following functions
Sort option in the header. Upon clicking it sort all rows according to the value of the particular col
Allow search of values in one particular row
Limit the rows showed in page. E.g. page 1 shows 30 rows, clicking on 2 shows 30 rows
I looked around and saw usage of Javascript but I'm not sure how to use Javascript. Any help if appreciated!
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Coronavius tracker application</h1>
<p class="lead">This application tracks the coronavirus situation around the globe</p>
<hr class="my-4">
<div class="container">
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<p class="font-weight-bold" th:text="${worldPop}"></p>
</h3>
</div>
</div>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
Using datatables, I was able to get the table with the desired function. My code is as attached
<!DOCTYPE html>
<!-- To use thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
$('#dataTable').DataTable();
} );
</script>
<title>Home</title>
</head>
<body>
<!-- Creates a big gray field -->
<div class="jumbotron">
<!-- Big words -->
<h1 class="display-4">Coronavirus tracker</h1>
<!-- Big words description -->
<p class="lead">Tracking this pandemic one at a time</p>
<!-- Marks bottom part of jumbotron -->
<hr class="my-4">
<div class="container">
<!-- Gride layout with each col detonated by class ="col" -->
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
<p class="font-weight-bold" th:text="${percentage}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<div class="font-weight-bold" th:text="${worldPop}"></div>
</h3>
</div>
</div>
</div>
</div>
<!-- #id give id to the table and match the javascript
#page-length to match the default entries per page
#data-order to set the default way to display order. It is now 1st col in descending order -->
<table class="table table-striped" id="dataTable" data-page-length='50' data-order='[[1, "desc"]]'>
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
I am using bootstrap4 DataTable.I am using spring boot. I have passed my data from my controller like bellow..
List<User> list = new ArrayList<>();
#GetMapping(value = "/staff-details")
public String staffDetails(Model model) {
model.addAttribute("staffList",list );
return "staff-details";
}
It is working fine when like bellow..that means there is no loop
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
When I want to populate data dynamically from database, it is not working..I am using like bellow..
<!DOCTYPE html>
<html lang="en">
<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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src=" https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css">
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
fixedHeader: true
});
});
</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr th:each="user: ${staffList}">
<td th:text="${user.firstName +' '+ user.lastName}"></td>
<td th:text="${user.email}"></td>
<td th:text="${user.restaurantId}"></td>
<td th:text="${user.restaurantBranchId}"></td>
<td th:text="${user.userRole}"></td>
</tr>
</tbody>
</table>
</body>
Please help me why it is not working in loop..
I plan on building a very simple webapp on Go using it's html/template module for the front end.
One typical function for the app is as follows:
Get some data from external app
Display that data in a table in one of the Go templates
Permit the user to edit certain rows, sort etc.
Retrieve data from the table to be stored in DB in backend, or sent on to other application.
Very early version of the template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Delivery App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Tran id</th>
<th scope="col">Assembly Instructions</th>
<th scope="col">Miscalleanous</th>
</tr>
</thead>
<tbody>
{{ range . }}
<tr>
<th scope="row">{{.Id}}</th>
<td>{{.TranId}}</td>
<td>{{.Memo}}</td>
<td>{{.AssemblyInstructions}}</td>
<td>{{.AssemblingUnits}}</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
<!-- /container -->
</body>
</html>
I would like to parse data from the table element and store to db, or process further in subsequent request to another service. Can anyone recommend some ways this could be achieved?
I would like to click on the first row of the table as given below. (Ex on '5101170017') with vbscript code. with which I am trying to scrape the webpage info. How can I do this. as this webpage is password protected I can not share the details.
<html>
<head>
<script src='../../accidentweb/interface/DwrUtilsDao.js'></script>
<script src='../../accidentweb/engine.js'></script>
<script src='../../accidentweb/util.js'></script>
<base href="http://114.255.167.200:8092/cidasEN/extend/">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<LINK href="css/css.css" type=text/css rel=stylesheet>
<title>Functional Query results</title>
</head>
<body bottomMargin=0 leftMargin=0 topMargin=0 >
<TABLE border="1" bordercolorlight="#6D6D6D" cellspacing="1"
bordercolordark="#C0C0C0" width="120%"
cellpadding="0" bgcolor="#FFFFFF" class=font9 style="BORDER-bottom: #4D5E8C 1px solid" >
<tr bgcolor="#CCCCCC" >
<td class="title_1" width ='6%' align="center">department</td>
<td class="title_1" width ='6%' align="center">case number</td>
<td class="title_1" width ='10%' align="center">time of accident</td>
<td class="title_1" width ='20%' align="center">location of scene of accident</td>
<td class="title_1" width ='6%' align="center">operator</td>
</tr>
<tr bgcolor="#FFFFFF" style="cursor:hand"
onmouseover="onmouseoverTR(this)"
onmouseout="onmouseoutTR(this)"
onclick="clearwsInfo('2017070100002','2017070100002',this);"
ondblclick='doSelect("auditflowForm","2017070100002");'>
<TD align="center">
<script type="text/javascript" >
outprint('ChengDu Branch');
</script>
</TD>
<TD align="center">
<script type="text/javascript" >
outprint('5101170017');
</script>
</TD>
<TD align="center">
<script type="text/javascript" >
outprint('2017-06-02 17:50');
</script>
</TD>
<TD align="left">
<script type="text/javascript" >
outprint('成赤高速成自段自贡往成都方向48km');
</script>
</TD>
<TD align="left">
<script type="text/javascript" >
outprint('杨东升');
</script>
</TD>
</TR>
<script anguage="javascript" >
//clearwsInfo("2017070100002","2017070100002","");
</script>
</TABLE>
</body>
</html>
I've tried the following:
Set iframe = IE.Document.getelementbyID("listInfoFrame")
For Each ele In iframe.contentDocument.getElementsByTagName("td")
msgbox(ele.innertext)
If InStr(ele.innertext, "department") > 0 Then
Set Row = ele.ParentNode.NextSibling
Row.Click
Exit For
End If
Next
I am getting an error as Permission Denied 'iframe.contentDocument. Any one can help me please
I am using jquery-bootgrid and want to know how to change the "loading" and "noResults" labels.
The doco http://www.jquery-bootgrid.com/Documentation
states "All labels can be set and overridden on initialization respectively."
but I am unsure how to do this.
It works just like that way:
$(function()
{
$("#grid").bootgrid({
labels: {
noResults: "where are my results"
}
});
});
<table id="grid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.js"></script>