|
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
|
|
|
|
|
Richard Deeming wrote: 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.
I noticed that after I posed. Looking at that now.
Richard Deeming wrote: 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.
I see. Got it!
Again, many thanks.
BTW, thanks for the link to jsfiddle. Pretty cool.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
genesis child theme- I have added a new page Template and need a little help. The template will allow me to style with old divs but when I try to add new styles to my style.css it will not pick up the changes.
Do I need to add a complete new style sheet to or do i need some type of new code in function.php?
|
|
|
|
|
If there is another stylesheet with the same classes or style names which are overriding what you put in. You can override the cascading order by using !important.
Please see this link for information on the order in which stylesheets are loaded:
Assigning property values, Cascading, and Inheritance[^]
There is also an example of how to use !important on that page directly below where it describes which order stylesheets are loaded.
Hope this is what you are looking for. 
|
|
|
|
|
[UPDATE]
I solved this. I set the WebGrid's Id by doing
htmlAttributes: new { id = "MyGrid" }
then doing this in the JS
var table = document.getElementById('MyGrid');
[UPDATE]
I'm trying to insert a new row into a WebGrid. I'm getting an error "Uncaught TypeError: Cannot read property '1' of undefined"
My WebGrid code
@using (@Html.BeginForm("Index", "Home"))
{
@{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "divData", canPage: true);
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column(columnName: "RowId", header: "Row Id", format: @@item.RowId),
grid.Column(columnName: "SiteId", header: "Site Id", format: @@item.SiteId),
))
}
}
and my JavaScript
function createNewRow(model)
{
var table = document.getElementById('divData');
var new_row = table.rows[1].cloneNode(true);
var len = table.rows.length;
new_row.cells[0].innerHTML = len;
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);
}
There are rows in the table, so why doesn't the Rows collection exist? I can see row data in the Console.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
modified 2-May-17 13:16pm.
|
|
|
|
|
I am having an issue with the HTML that is used in a .net web form application. The problem is a dashed line line border is being displayed around the left, right, and bottom borders of where the 'option 1' and 'option 2 with corresponding wording is displayed.
The html that is being displayed is the deprecated apple-style-span class. Thus can you show me how to fix the html that is listed in code so the border does not display in the html?
<blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p >&CUR_DATE.EVAL
</p>
</blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote>
<p><span style="font-size: 11pt;"><br />
Parent;STU_FNAME.EVAL &STU_LNAME.EVAL<br />
</span><span style="font-size: 11pt;">&PAR_ADDR.EVAL<br />
&PAR_CITY.EVAL, &PAR_STATE.EVAL. &PAR_ZIP.EVAL</span><span style="font-size: 11pt;"> </span></p>
<p><span style="color: #000000;" class="apple-style-span"><br />
<br />
<br />
Dear &PAR_NAME.EVAL and &STU_FNAME.EVAL &STU_LNAME.EVAL:<br />
<br />
I am sending you this correspondence as the designated person, authorized through state statute, responsible for the enforcement of mandatory attendance laws. </span></p>
<p></p>
<p><span style="color: #000000;" class="apple-style-span">Schools is very concerned about &STU_FNAME.EVAL''s attendance pattern. Presently, &STU_FNAME.EVAL has the equivalent of 5 or more days of unexcused absence from school. </p>
<p><span style="color: #000000;" class="apple-style-span"> </span></p>
<p><span style="color: #000000;" class="apple-style-span">(Option 1) </span></p>
<table style="border: currentColor; border-image: none; border-collapse: collapse;" cellspacing="0" cellpadding="0" width="749" height="148" border="0">
<tbody>
<tr>
<td style="border-color: #f0f0f0; padding: 0in 5.4pt; background-color: transparent;" valign="top">
<p><span style="font-size: 11pt;">I have scheduled a collaborative plan review on DATE at TIME. We will meet at PLACE </span><span style="font-size: 11pt;">located at ADDRESS, ROOM #. Please check in at the main office upon your arrival. </span><span style="font-size: 11pt;">During this meeting we will address concerns and issues that may be contributing to the lack </span><span style="font-size: 11pt;">of school attendance. The student and parent are required to attend. If applicable, please </span><span style="font-size: 11pt;">bring any medical documentation regarding absences. </span><span style="font-size: 11pt;">If you cannot attend this meeting </span><span style="font-size: 11pt;">please contact me at PHONE #</span></p>
<p><span style="font-size: 11pt;"> </span></p>
<p><span style="font-size: 11pt;">(Option 2)</span> </p>
</td>
</tr>
<tr>
<td style="border-color: transparent; padding: 0in 5.4pt; background-color: transparent;" valign="top">
<p> </p>
</td>
</tr>
<tr>
<td style="border-color: transparent; padding: 0in 5.4pt; background-color: transparent;" valign="top">
<p><span style="font-size: 11pt;">No meeting required. This letter is meant to serve as a notice of the student’s absences. Please call me if you have any questions.<br />
</span></p>
</td>
</tr>
</tbody>
</table>
<br />
<p>Please know that Schools is required to report the names of students of unexcused absences. <br />
<br />
Sincerely,<br />
<br />
<br />
<br />
|
|
|
|
|
When tried I do not see any border as you mentioned....?
modified 20-Sep-20 21:01pm.
|
|
|
|
|
I need technical advice on this matter. How to save form data to a disk file(Excel, text, XML format). Web server is not belongs to me. I just fill form for a web site. I need to use same data later to make comparisons and analyze. I need this to do to avoid duplicate data entry. Any method that can be used?. Any possibility to write memory resident program to to figure this out?. Thanks. 😊😊
|
|
|
|
|
Client side and Server side are are deliberately quite isolated. If you don't have write access to the server then you're not going to make any changes to it that those who control it do not want you to make.
If you had write access to the web server then you'd still need a server-side method to do this.
I, for example, use php[^]. There's a lot to this and you'll need to study it.
| Ravings en masse^ |
|---|
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Hi Balboos,
I totally agree and understand your point. I have no write access to server end components/materials. I am at clients end. is there any possibility to run a routine/program at client end(my pc) that record all data I entered to the web site(I mean record all keyboard entries locally). This may be crazy question, but if I could figur out a method to do so I can save lot of my time to spent my time to repeat same data twice.
Thanks in advance.
Note : I am good at php/c#/Delphi coding.
|
|
|
|
|
For the saving time part, when, for example, filling out forms, Windows since XP has the capability of remembering form data (it certainly remembers mine). I mention this on the chance that your system has this disabled.
This would be helpful for content for other forms. Some (not me) even allow uid/pwd saves.
The other option would be for you to find/create a screen-scraper you can install in your particular browser. If you're making your own, you'll need to access DOM - which is accessed through javaScript (not much different than php). You'd probably be able to find one.
| Ravings en masse^ |
|---|
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Hi,
I am building a portfolio with a filtered gallery. I am using bootstrap and mixitup js for the filters. However, I have a problem. When I don't filter, the gallery seems fine:
http://imgur.com/szTPSAd
but when I filter the gallery, the pictures stay in the position where they were before, leaving blank space between:
http://imgur.com/mlamAnL
Could you please give me an advice on how to fix that? I want to sort all the images from the beginning all the time. I am sure there is an easy css fix.
Thx!)
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
