|
Sorry, I missed the nested <div>. Try:
#headerLeft > label,
#headerLeft > div {
display: inline-block;
}
(You can avoid the <h1> bug by un-ticking the "Use Markdown formatting" box under the message preview.)
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
That did it.
I get the basic idea of CSS, but I've yet to start really learning it. Trying to get the basics of HTML and JavaScript down now.
Thanks!
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Check out the magnificent flex-box model
.list{display:flex;flex-direction:row;}
.list-item{width:33%;}
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
</div>
Flex boxes can do a lot more, it definitely worth to take some time and learn to use them.
|
|
|
|
|
I have a WebGrid on a page, and I added a Combox Box with 10,25, and 50 as items. When the user selects one I want to change the WebGrid's RowsPerPage accordingly. So far I have the following:
Controller CTOR
public HomeController()
{
ViewData["RowPerPage"] = 10;
}
HTML
var grid = new WebGrid(Model, rowsPerPage: Convert.ToInt32(ViewData["RowPerPage"]), canPage: true, ajaxUpdateContainerId: "divData");
Combo Box
<div id="headerLeft" style="position: relative; width:50%; float:left">
<label >Show</label>
<select id="rowsperpage" name="rowsperpage" onchange="updateRowsPerPage(this)">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<label >rows</label>
</div>
JavaScript
function updateRowsPerPage(selectedObject) {
var selectedRowsPerPage = selectedObject.value;
}
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
You're going to need to post the value back to the server, in the same way that you did with the search value. You'll need to handle the case when both values need to be sent.
Models:
public class DashboardInfoQueryArgs
{
public string SearchValue { get; set; }
public int RowsPerPage { get; set; } = 10;
}
public class DashboardInfoViewModel
{
public DashboardInfoQueryArgs Query { get; set; }
public IEnumerable Data { get; set; }
public IEnumerable<SelectListItem> PageSizeOptions
{
get
{
yield return new SelectListItem { Value = "10", Text = "10", Selected = Query.RowsPerPage == 10 };
yield return new SelectListItem { Value = "25", Text = "25", Selected = Query.RowsPerPage == 25 };
yield return new SelectListItem { Value = "50", Text = "50", Selected = Query.RowsPerPage == 50 };
}
}
}
Controller:
public ActionResult Index()
{
var args = new DashboardInfoQueryArgs();
return Index(args);
}
[HttpPost]
public ActionResult Index(DashboardInfoQueryArgs args)
{
var data = _dal.GetDashboardInfos(args);
var model = new DashboardInfoViewModel { Query = args, Data = data };
return View(model);
}
View:
@model YourNamespace.DashboardInfoViewModel
@using (@Html.BeginForm("Index", "Home"))
{
<div class="clearfix">
<div class="header-label">
<label>Show</label>
@Html.DropDownList("RowsPerPage", Model.PageSizeOptions, new { @class = "rows-per-page" })
<label>rows</label>
</div>
<div class="header-label">
<label>Search</label>
@Html.TextBox("SearchValue", Model.Query.SearchValue, new { @class = "search-value" })
</div>
</div>
<div id="divData">
@{
var grid = new WebGrid(Model.Data, rowsPerPage: Model.Query.RowsPerPage, canPage: true, ajaxUpdateContainerId: "divData");
@grid.GetHtml(
emptyRowCellValue: "No Records Found",
htmlAttributes: new { id = "web-grid" },
mode: WebGridPagerModes.All,
columns: grid.Columns
(
grid.Column("RowId", "Row Id", style: "rowid-column-style", format: @@item.RowId),
grid.Column("SiteId", "Site Id", style: "siteid-column-style", format: @@item.SiteId),
))
}
</div>
}
@section Scripts {
<script>
$(function(){
var reloadGrid = function(){
var data = {
SearchValue: $(".search-value").val(),
RowsPerPage: $(".rows-per-page").val()
};
$("#divData").load("/Home/Index #web-grid", data);
};
$(".rows-per-page").on("change", reloadGrid);
$(".search-value").on("change keydown paste input", reloadGrid);
});
</script>
}
CSS:
.header-label {
width: 50%;
float: left;
}
.header-label > label,
.header-label > select,
.header-label > input {
display: inline-block;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
OK, so I think I see what you have here, and the scary part is I'm starting to understand it 
So, I get an error. I get "cannot convert from 'System.Collections.IEnumerable' to 'System.Collections.Generic.IEnumerable<dynamic>'" on this line
var grid = new WebGrid(Model.Data, rowsPerPage: Model.Query.PageSizeOptions, canPage: true, ajaxUpdateContainerId: "divData");
This one I'm confused on.
UPDATE
Figured it out. In the VM I needed
public IEnumerable<dynamic> Data { get; set; }
not
public IEnumerable Data { get; set; }
Thanks!
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
modified 10-May-17 12:54pm.
|
|
|
|
|
Kevin Marois wrote: the scary part is I'm starting to understand it
Some days, even I can understand what I've written. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I have a WebGrid and search field on a page. When the user types anything into the search field, I want to filter the data and reload the grid.
Here's what I have so far:
Controller
public class HomeController : Controller
{
private IDataAccess _dal;
public HomeController()
{
_dal = new DataAccess();
}
public ActionResult Index()
{
var args = new DashboardInfoQueryArgs();
var data = GetData(args);
return View(data);
}
public IEnumerable GetData(DashboardInfoQueryArgs args)
{
var data = _dal.GetDashboardInfos(args);
return data;
}
[HttpPost]
public IEnumerable Search(string searchValue)
{
var data = GetData(new DashboardInfoQueryArgs(searchValue));
return data;
}
}
HTML
@using (@Html.BeginForm("Index", "Home"))
{
@{
var grid = new WebGrid(Model, rowsPerPage: 10, canPage: true, ajaxUpdateContainerId: "divData");
@grid.GetHtml(
emptyRowCellValue: "No Records Found",
htmlAttributes: new { id = "web-grid" },
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column("RowId", "Row Id", style: "rowid-column-style", format: @@item.RowId),
grid.Column("SiteId", "Site Id", style: "siteid-column-style", format: @@item.SiteId),
))
}
}
JavaScript
$("#searchField").on('change keydown paste input', function () {
var searchVal = document.getElementById("searchField").value;
$.ajax({
type: "POST",
url: '/Home/Search',
data: { searchValue: searchVal },
success: function (result) {
},
error: function (result) {
alert('Error!');
}
});
});
Everytging seems to be working, except I don't know to reload the WebGrid once the Search method on the controller is done.
Am I going about this right? What am I missing?
Thanks
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Try something like this:
$("#searchField").on('change keydown paste input', function () {
var searchVal = this.value;
$("#divData").load("/Home/Search #divData > *", { searchValue: searchVal });
});
NB: That would require you to change the Search action to return the rendered view, rather than the raw data:
[HttpPost]
public ActionResult Search(string searchValue)
{
var data = GetData(new DashboardInfoQueryArgs(searchValue));
return View("Index", data);
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
modified 10-May-17 7:39am.
|
|
|
|
|
The controller is being called 3 or 4 times, probably because the code is watching Change, KeyDown, Paste, and Input:
$("#searchField").on('change keydown paste input', function () {
Is this the right way to do this?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
It's the right way to do it if you want to update the grid when any of those events happen. 
If you want to prevent the grid from updating too frequently, you'll need to "buffer" the events, and only trigger the handler after a pause. This answer[^] has an example of how to do that:
function debounce(fn, delay) {
var timeout;
return function () {
var context = this,
args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(context, args);
}, delay || 250);
};
}
...
$("#searchField").on('change keydown paste input', debounce(function () {
...
}));
With that in place, the function to update the grid will only fire after a ¼-second pause in keystrokes.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I would like to put a search field above a WebGrid, and also provide some combo boxes for filtering.
I've never done this before. Can someone who's done this point me in the right direction please?
Thank you
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
I haven't used WebGrid, but Ehsan Sajjad posted a great series of articles on using the DataTables[^] jQuery plugin from MVC to do this sort of thing back in March:
Alternatively, if you want to keep it simple, you'll just need to add a <form> with the relevant fields for filtering, and have an action that takes parameters for those fields and filters the data accordingly. It shouldn't be too difficult to set up.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks I'll take a look
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
My website is built with angular js. when i submitted sitemap only home page is indexed and remaining pages are not indexed. I already changed all my page urls # to #! . please suggest me .
|
|
|
|
|
Maybe you have a robots.txt file that is telling the search engine not to request other pages?
The difficult we do right away...
...the impossible takes slightly longer.
|
|
|
|
|
no i gave robots.txt to my website is like this:
User-agent: *
Disallow:
|
|
|
|
|
I have a page that receives a notification from a SignalR server when either a new row is added to a table or an existing row is changed. The data is displayed in a WebGrid.
proxy.on('notifyAllClientsOfChanges', function (model) {
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
if ($row.length) {
updateRow($row, model)
}
else {
createNewRow(model);
}
function createNewRow(model)
{
var table = document.getElementById('MyGrid');
var new_row = table.rows[0].cloneNode(true);
new_row.cells[0].value = model.RowId;
new_row.cells[1].value = model.SiteId;
new_row.cells[2].value = model.InstrumentId;
new_row.cells[3].value = model.TowerLocation;
new_row.cells[4].value = model.BayLocation;
new_row.cells[5].value = model.BaySerialNo;
new_row.cells[6].value = model.BayStatus;
new_row.cells[7].value = model.AccessionId;
new_row.cells[8].value = model.Result;
new_row.cells[9].value = model.AssayName;
new_row.cells[10].value = model.Started;
new_row.cells[11].value = model.Completed;
new_row.cells[12].value = model.TestSummary;
table.appendChild(new_row);
}
function updpateRow($row, model)
{
var col01 = $row.find(".x-SiteId").text(model.SiteId);
var col02 = $row.find(".x-InstrumentId").text(model.InstrumentId);
var col03 = $row.find(".x-TowerLocation").text(model.TowerLocation);
var col04 = $row.find(".x-BayLocation").text(model.BayLocation);
var col05 = $row.find(".x-BaySerialNo").text(model.BaySerialNo);
var col06 = $row.find(".x-BayStatus").text(model.BayStatus);
var col07 = $row.find(".x-AccessionId").text(model.AccessionId);
var col08 = $row.find(".x-Result").text(model.Result);
var col09 = $row.find(".x-AssayName").text(model.AssayName);
var col10 = $row.find(".x-Started").text(model.Started);
var col11 = $row.find(".x-Completed").text(model.Completed);
var col12 = $row.find(".x-TestSummary").text(model.TestSummary);
}
});
The code above fires when a new row is added to the database or changes are made to an existing row. The code does work, but I don't see the additions or updates appear in the grid. If I refresh the page then the controller is called again and the entire data set is returned, which is what I'm trying to avoid.
So, what I want is to see row additions or changes in the WebGrid. How can I refresh the WebGrid without going back to the server?
Thank you
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Any errors in the browser console?
Have you tried adding some console.log calls to make sure your code is being called?
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yes, the code is being called. No errors. I just dont see the new row appear
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
modified 3-May-17 17:17pm.
|
|
|
|
|
Is it just the new rows that aren't appearing?
The code looks like it should work, but to be pedantic, the new row should be appended to the <tbody> rather than the <table>:
table.tBodies[0].appendChild(new_row);
It probably won't make a difference, unless your CSS is specifically targeting the tbody element.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: Is it just the new rows that aren't appearing?
I havent tried the Update code yet, but I do know that new rows are being added to the grid. They just don't appear
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
I think there's a problem with setting the new_row.cells[i].value - it's not a standard property for a table cell, so it doesn't change the content: Demo[^]
If you use innerHTML or innerText, the value will be updated: Demo[^]
But you'll still have the problem of the <span> elements disappearing for the new rows. As I said yesterday, I'd be inclined to combine the add and update code, and use jQuery to set the text of the spans instead.
You might also want to check which row you're cloning - I suspect rows[0] will be the header row.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Well, first let me say Many Thanks for all your help so far. I've come a long way and I now have a functional app. I am now seeing new rows appear in the WebGrid.
However, one final issue:
The new row appears at the bottom of the grid. The data is returned from the server in descending order by the TestStarted column. See this image.
Here's the JS I have so far incorporating all the help you've given me, including the console.log entries shown in the image I linked.
proxy.on('notifyAllClientsOfChanges', function (model) {
console.log("notifyAllClientsOfChanges called");
var $row = $(".webgrid-table").find("span[x-RowId='" + model.RowId + "']").closest("tr");
console.log(model.RowId);
if (!$row.length) {
var table = document.getElementById('MyGrid');
console.log("TABLE");
console.log(table);
var len = table.rows.length;
console.log("len = " + len);
var new_row = table.rows[1].cloneNode(true);
console.log("new_row");
console.log(new_row);
new_row = table.tBodies[0].appendChild(new_row);
console.log("new_row");
console.log(new_row);
$row = $(new_row);
$row.find("span[x-RowId]").data("rowId", model.RowId).text(model.RowId);
}
console.log("SETTING ROW VALUES");
$row.find(".x-RowId").text(model.RowId);
$row.find(".x-SiteId").text(model.SiteId);
$row.find(".x-InstrumentId").text(model.InstrumentId);
$row.find(".x-TowerLocation").text(model.TowerLocation);
$row.find(".x-BayLocation").text(model.BayLocation);
$row.find(".x-BaySerialNo").text(model.BaySerialNo);
$row.find(".x-BayStatus").text(model.BayStatus);
$row.find(".x-AccessionId").text(model.AccessionId);
$row.find(".x-Result").text(model.Result);
$row.find(".x-AssayName").text(model.AssayName);
$row.find(".x-Started").text(model.Started);
$row.find(".x-Completed").text(model.Completed);
$row.find(".x-TestSummary").text(model.TestSummary);
console.log("DONE");
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Kevin Marois wrote:
.find("span[x-RowId='" + model.RowId + "']")
...
$row.find("span[x-RowId]").data("rowId", model.RowId)
That's a bit confusing - you're looking for an attribute called x-RowId, but you're updating the data-row-id attribute. It would probably be better to stick with the data-row-id attribute, since that's the standard way of associating extra data with an element.
There's also no need to update the row ID for an existing row.
proxy.on('notifyAllClientsOfChanges', function (model) {
console.log("notifyAllClientsOfChanges called");
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
console.log(model.RowId, $row);
if (!$row.length) {
var table = document.getElementById('MyGrid');
console.log("TABLE", table);
var len = table.rows.length;
console.log("len = ", len);
var new_row = table.rows[1].cloneNode(true);
console.log("new_row", new_row);
new_row = table.tBodies[0].appendChild(new_row);
console.log("new_row", new_row);
$row = $(new_row);
$row.find("span[data-row-id]").data("rowId", model.RowId).text(model.RowId);
}
console.log("SETTING ROW VALUES");
$row.find(".x-SiteId").text(model.SiteId);
$row.find(".x-InstrumentId").text(model.InstrumentId);
$row.find(".x-TowerLocation").text(model.TowerLocation);
$row.find(".x-BayLocation").text(model.BayLocation);
$row.find(".x-BaySerialNo").text(model.BaySerialNo);
$row.find(".x-BayStatus").text(model.BayStatus);
$row.find(".x-AccessionId").text(model.AccessionId);
$row.find(".x-Result").text(model.Result);
$row.find(".x-AssayName").text(model.AssayName);
$row.find(".x-Started").text(model.Started);
$row.find(".x-Completed").text(model.Completed);
$row.find(".x-TestSummary").text(model.TestSummary);
console.log("DONE");
}
It looks like the server is sending 0 as the RowId, so you'd need to fix that on the server.
The appendChild method will always insert the element at the end of the specified parent. If you want to insert it at a specific position, you'll need to find the row that should immediately follow it, and use insertBefore[^] to add the node. Something like this:
var new_row = table.rows[1].cloneNode(true);
console.log("new_row", new_row);
var before_row = null;
var before_value = null;
$(".webgrid-table tr").each(function(){
var value = $(this).find(".x-Started").text();
if (value < model.Started) {
if (!before_row || before_value < value) {
before_row = this;
before_value = value;
}
}
});
if (before_row) {
new_row = table.tBodies[0].insertBefore(new_row, before_row);
}
else {
new_row = table.tBodies[0].appendChild(new_row);
}
console.log("new_row", new_row);
If you can't convert the text value of the x-Started span to an appropriate type for sorting, you'll need to use another data- attribute to store and retrieve a sortable value.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
