I have a view in MVC4 that looks like this:
#model List<Home.Models.Model>
#{
ViewBag.Title = "DPR";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR"}))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
</table>
<div style="background-color:white">
#Html.EditorForModel()
</div>
<div>
</div>
}
And the model.cshtml is simply some of the fields in a single row. I don't want to put headers on that single row as they are repeated as many times as their are in the list. Is there a simple way to make a header for the rows of the model in the editorfor template?
This is how I did it:
<table style="font-size:xx-small" class="table_body">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
#for (var i = 0; i < Model.Count; i++)
{
<tr>
#Html.EditorFor(m=>Model[i])
</tr>
}
</table>
And in the model.cshtml it simple some of the fields each in a TD element.
Not 100% sure that I understand you correctly. Create the table header in the view, then call the EditorTemplate in a for each
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR" }))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Details)
{
#testTemplate(item)
}
</tbody>
</table>
}
Then change the editor template to be for only one row eg.
#helper testTemplate(Details detail)
{
<tr>
<td>#detail.Propery1</td>
<td>#detail.Propery2</td>
</tr>
}
I used an inline helper just to illustrate what I mean. Now you should have a table with one header and lots of rows
Related
I'd like for my page to initially load with just a search box, and then when someone begins to search that is when the table appears.
My example table is below:
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="none">Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test 1</td>
<td>Test test test</td>
<td>ABC</td>
</tr>
<tr>
<td>Test 2</td>
<td>Test test test</td>
<td>DEF</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test test test</td>
<td>GHI</td>
</tr>
</tbody>
</table>
yes it can be done using ajax call and i suppose you use php.
For example, you can generate a table everytime you press any char, populating the table with the results or using a button to search the keyword you type on the input field.
Example with ajax and php:
var search_string = $('#id_of_the_input_box').val();
$.ajax({
url:"php_file.php",
method:"POST",
data:{action:action},
dataType:"json",
success:function(data){
console.log(data);
}
and the php code using PDO
$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
$result = '
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
});
});
<table id="example" class="display" style="width:100%">
YOUR TABLE ROWS HERE
</table>
';
// foreach loop to populate the table example
foreach ($query_results as $row) {
$result.= '
<tr>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
'
} else {
echo "No results";
}
}
// echo the generated table as ajax response
echo $result;
Hope you have caught the idea with this example.
I have set a bootstrap table with the filter control extension. The table where I want to filter offers many popovers and tooltips. However, they stop working after filtering. What can I do to re-activate them?
An example of my code can be seen here (Location Type "Other" should have a popover, this works only before filtering for the first time):
<table ref="mainTable" class="table table-striped table-bordered table-hover"
cellSpacing="0" id="mainTable" data-show-toggle="true"
data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="CustomerName" data-sortable="true" data-filter-control="select">Customer Name</th>
<th data-field="LocationType" data-sortable="true">Location Type</th>
<th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Cap Corp</td>
<td>Main</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Cap Corp</td>
<td><a class="ajaxPopover">Other</a></td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td>Main</td>
<td>Slough SL1 4DX</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td><a class="ajaxPopover">Other</a></td>
<td>London W1B 5HQ</td>
</tr>
</tbody>
</table>
... with the following javascript code:
$('#mainTable').bootstrapTable({
});
// Add some popovers
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
http://jsfiddle.net/7bpLrafx/4/
Thanks for any help!
You have to reinitialize popovers when changes are made in the table (like sorting, change of display and so on).
JS:
$('#mainTable').on('all.bs.table', function () {
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
});
You can use Bootstrap's built-in functionality to reinitialize the popovers after table filtering in DOM:
$('#mainTable').on('post-body.bs.table', function () {
$('.ajaxPopover').popover();
});
I am using - Bootstrap table
I cannot figure out, how do i pass a model to the data-url property of bootstrap-table ?
My Razor Code:
#model IEnumerable<MyModel>
<table id="myTable" data-url=......">
<thead>
<tr>
<th data-field="MyProperty">
Some Example
</th>
<th data-field="MyProperty2">
Some Example
</th>
<th data-field="MyProperty3">
Some Example
</th>
</tr>
</thead>
</table>
My Controller Code - just in case.
[HttpGet]
public ActionResult GetMyValues()
{
List<MyTable> myList = myObj.GetValues();
return PartialView("MyPartialView", myList);
}
You will need to convert your Model i.e IEnumerable using below code
var data = #Html.Raw(Json.Encode(#Model));
then bind this data to html table
$(function () {
$('#table').bootstrapTable({
data: data
});
});
I am new to MVC 4 and I am stuck in a Problem, I have bound a table dynamically with some data from database as following on cshtml page
<table id="tblFeature">
<tr>
<th>
Include
</th>
<th>
Facilities
</th>
<th>
Description
</th>
</tr>
#foreach (var feature in Model)
{
<tr>
<td>#Html.EditorFor(item => feature.Checked)
</td>
<td>#Html.DisplayFor(item => feature.Name)
</td>
<td>#Html.TextAreaFor(item => feature.Description, 2, 70, null)
</td>
</tr>
}
</table>
Now I want to update the values like ,check or uncheck the checkbox,update the description in text area etc., in order to achieve that i need to add the updated values in the list in controller class and then I will update those values in database. but i don't know how to achieve that, it is something like following in plain english
foreach(feature in tblFeature)
{
if(feature is checked)
{
featureList.add(feature)
}
}
any help will be appreciated. thanks.
Change View for correct binding:
#using (Html.BeginForm("Save", "Controller"))
{
<table id="tblFeature">
<tr>
<th>
Include
</th>
<th>
Facilities
</th>
<th>
Description
</th>
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
#Html.HiddenFor(m => m[i].ProductSizeID)
<td>#Html.EditorFor(m => m[i].Checked)
</td>
...
</td>
</tr>
<input type="submit" value="save"/>
}
Post in Controller and save change
[HttpPost]
public ActionResult Save(IEnumerable<feature> ViewModels)
{
foreach (var feature in ViewModels)
{
if(feature.Checked)
{
featureList.add(feature)
}
}
}
I want to let a user fire sql query and then see the result in grails view page.
My QueryController.groovy is
def query(){
def headers = null; //["id","name"]
Sql sql = new Sql(dataSource)
def rowResults = sql.rows(params.query) //GroovyRowResult
rowResults.eachWithIndex { row, index->
if (headers == null) {
headers = row.keySet()
}
}
[headers : headers, resultList: rowResults, total : rowResults.size() ]
}
In grails view page (query.gsp),
<table class="table table-striped">
<thead>
<tr>
<g:each in="${headers}" var="header">
<g:sortableColumn property="header" title="${header}" />
<th></th>
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${resultList}" var="row">
<tr>
<g:each status="counter" in="${row}" var="val">
<td>${val}</td>
</g:each>
</tr>
</g:each>
</tbody>
</table>
The <td>${val}</td> part in view is not working as expected, because it gives result as id=1 instead of 1. I want only value to be displayed there.
Might be a smaller issue though, need to fix it.
Thanks.
Try accessing values by accessing the value on each map:
<table class="table table-striped" border="1">
<thead>
<tr>
<g:each in="${headers}" var="header">
<g:sortableColumn property="header" title="${header}" />
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${resultList}" var="row">
<tr>
<g:each status="counter" in="${row}" var="val">
<td>${val.value}</td>
</g:each>
</tr>
</g:each>
</tbody>
</table>
/
Also in your query action you can get the header directly from the map:
def query(){
def headers = null; //["id","name"]
Sql sql = new Sql(dataSource)
def rowResults = sql.rows("select * from Message;") //GroovyRowResult
// rowResults is a list, you can access it by its index
headers = rowResults[0].keySet()
FYI, what you are giving your users is very powerful and they can run any sort of query against you database even to drop your tables.
Well, I got the following code working as val is KVP.
<tr>
<g:each status="counter" in="${row}" var="val">
<td>${val.value}</td>
</g:each>
</tr>