I am using mvcsitemap to create a menu, submenu and breadcrump for a webapp I'm developing. I am using preserveroutevalues in the xml config in order to move around my (many) parameters when rendering links. When a user starts playing around with query parameters, the menu/submenu/breadcrumb disappear after some page loads. This is not consistent and I cannot reproduce it all the time, but it happens way too ofter.
My routes
routes.MapRoute(
name: "ForwardCurveDefault",
url: "forward-curve/{commoditycode}/{selectedyear}-{selectedmonth}-{selectedday}",
defaults: new {
controller = "ForwardCurve", action = "index",
selectedyear = default(DateTime).Year,
selectedmonth = default(DateTime).Month,
selectedday = default(DateTime).Day,
commoditycode = "none"
}
);
routes.MapRoute(
name: "Consumption",
url: "consumption/{commoditycode}/{managedcompanyid}/{entityid}/{startyear}-{startmonth}-{startday}/{endyear}-{endmonth}-{endday}",
defaults: new {
controller = "Consumption", action = "Index",
// begining of current month.
startyear = default(DateTime).Year,
startmonth = default(DateTime).Month,
startday = default(DateTime).Day,
// end of current month.
endyear = default(DateTime).Year,
endmonth = default(DateTime).Month,
endday = default(DateTime).Day,
commoditycode = "none",
managedcompanyid = 0,
entityid = 0,
}
);
routes.MapRoute(
name: "Budget",
url: "budget/{commoditycode}/{managedcompanyid}/{entityid}/{startyear}-{startmonth}-{startday}/{endyear}-{endmonth}-{endday}",
defaults: new {
controller = "Budget", action = "Index",
// begining of current month.
startyear = default(DateTime).Year,
startmonth = default(DateTime).Month,
startday = default(DateTime).Day,
// end of current month.
endyear = default(DateTime).Year,
endmonth = default(DateTime).Month,
endday = default(DateTime).Day,
commoditycode = "none",
managedcompanyid = 0,
entityid = 0,
}
);
My sitemap
<mvcSiteMapNode title="Data Management" controller="ForwardCurve" action="Index" key="DataManagement" preservedRouteParameters="commoditycode,selectedyear,selectedmonth,selectedday">
<mvcSiteMapNode title="Forward curves" controller="ForwardCurve" action="Index" key="forwardcurve" preservedRouteParameters="commoditycode,selectedyear,selectedmonth,selectedday"/>
<mvcSiteMapNode title="Consumption" controller="Consumption" action="Index" key="consumption" preservedRouteParameters="commoditycode,managedcompanyid,entityid,startyear,startmonth,startday,endyear,endmonth,endday"/>
<mvcSiteMapNode title="Budget" controller="Budget" action="Index" key="budget" preservedRouteParameters="commoditycode,managedcompanyid,entityid,startyear,startmonth,startday,endyear,endmonth,endday"/>
</mvcSiteMapNode>
I get a nice menu. After going back and forth to different query values, I end up in a page with a valid URL and no menu. I can see that my currentNode is null.
Have you checked this out yet with version 4.0? There have been some significant improvements in the node matching logic.
Related
I want to save the table to a text file after making changes. When I click the save button tbldata is empty and my text file is overwritten and blank.
I have tested the button with: var tbldata = JSON.stringify([{"id":1, "name":"Bob"}]) and it works.
I am assuming I am using table.getData incorrectly. Where and how in my button function should var tbldata = table.getdata be located?
I cannot find a specific example in the documentation
<button class="button" id="save-data" >Save Data</button>
<script>
//create Tabulator on DOM element
var table = new Tabulator("#meetinfo-table", {
height:200, // set height of table (in CSS or here)
selectable:true, //make rows selectable
layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//Sort data decending
initialSort:[
{column: "meetdate", dir:"desc"}],
//Define Table Columns
columns:[
{title:"Meeting Date", field:"meetdate", width:150, editor:"input"},
{title:"Topic", field:"topic", align:"left", editor:"input"},
{title:"Speaker", field:"speaker", editor:"input"},
{title:"Room", field:"room", editor:"input"},
{title:"CE", field:"ce", align:"left", editor:"input"},
{title:"RSVP Survey Code", field:"rsvpcode",editor: "input"},
{title:"RSVP Due Date", field:"rsvpduedate", editor:"input"},
],
});
//Saves entire table to JSON encoded string
var button = document.getElementById("save-data");
button.addEventListener("click", function(){
var tbldata = table.getdata;
var request= new XMLHttpRequest(); // new HttpRequest instance
request.open("POST", "process.php");
request.setRequestHeader("Content-type", "application/json");
//request.send(tbldata);
});
//loads data into the table
table.setData('meetinfo_array.txt');
</script>
There are two issues there, it is getData not getdata and you a not actually calling the function because you are missing the parenthesis after the function name. It should be:
var tbldata = table.getData();
I am using a webGrid to display data. Two columns are checkboxes. Instead of displaying the checkboxes, I want to display two .png images.
As you can see in the code, I've tried three different ways to do it.
I created a variable to hold the path, I used the string.Format, and I also put the path as a parameter in Html.Raw. None of them work.
I also added a Web.config file to the images folder, but it doesn't seem to work either.
Am I missing something? How can I make it work?
I'll appreciate your help.
#{
var checkboxEmpty = "<img src=\"~/Modules/Mime.Picor/Content/images/CheckboxEmpty.png\" />";
var grid = new WebGrid(Model, canPage: false);
}
<div>
#grid.GetHtml(
tableStyle: "table table-striped table-condensed table-hover table-bordered",
headerStyle: "success",
columns: grid.Columns(
grid.Column("Name", format: (item) => Html.ActionLink((string)item.Name, "Details", "LoadList", new { id = item.Id }, null)),
grid.Column("DateIssued", header: "Issued Date", format: (item) => item.DateIssued.ToShortDateString()),
grid.Column("DateRevised", header: "Revised Date", format: (item) => item.DateRevised == null ? "" : item.DateRevised.ToShortDateString()),
grid.Column("DateSchedShip", header: "Schedule Ship Date", format: (item) => item.DateSchedShip == null ? "" : item.DateSchedShip.ToShortDateString()),
grid.Column("TruckingCompany", header: "Trucking Company"),
grid.Column("Comments", header: "Special Instructions", style: "col-lg-2"),
grid.Column("Complete", header: "Cmp", format: (item) =>
{
if (item.Complete == 1)
{
return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Modules/Mime.Picor/Content/images/CheckboxFull.png")));
}
else
{
return Html.Raw(checkboxEmpty);
}
}, style: "text-align-center"),
grid.Column("MakeReady", header: "Mk. Rdy", style: "text-align-center", format: (item) => (item.MakeReady == 1) ? Html.Raw("<img src='~/Content/images/CheckboxFull.png' />") : Html.Raw("<img src='~/Content/images/CheckboxEmpty.png' />")),
grid.Column("AllDistributors", header: "Distributors", canSort: false, style: "col-lg-4"),
grid.Column("DEL", format: (item) => Html.ActionLink("Delete", "Delete", "LoadList", new { id = item.Id }, new { #class = "delete16image" }))
))
Here is the rendered HTML for the picture path:
<text>
<img src="~/Modules/Mime.Picor/Content/images/CheckboxEmpty.png></img>
</text>
this is action links code in mvc 5. I need to add images instead of text. how to do it
#Html.Raw("<a onclick='MergeCustomer(" + item.customer_id + ", " +
TempData["NewCustomerID"] + ")'>Merge</a>")
<span style=" color:black">|</span>
#Ajax.ActionLink("Compare", "_CompareCustomerDetails",
new { ExistingCustomerId = item.customer_id, NewCustomerId = TempData["NewCustomerID"]},
new AjaxOptions()
{
HttpMethod = "Get",
UpdateTargetId =divCustomerCompare",
InsertionMode = InsertionMode.Replace
}, new { id = "lnkCompare"})}
You can't. #Html.ActionLink only works on text.
In this instance your best bet is to use the #Url.Action() helper method, like so:
<img src="yourimage.jpg"/>
I a WinJS page with the following HTML snippet:
<div class="productivity-view">
<div class="categorylist" aria-label="Category List">
</div>
<div class="itemlist" aria-label="Work Item List">
</div>
</div>
I am able to programmatically initialize two lists:
var categories = new WinJS.Binding.List(list),
categoryListEl = document.querySelector(".categorylist"),
catList = new WinJS.UI.ListView(categoryListEl, {
itemDataSource: categories.dataSource,
itemTemplate: document.querySelector('.categoryitemtemplate'),
onselectionchanging: function(event) {
var items = event.detail.newSelection.getItems();
items.done(function(selections) {
var selection = selections[0],
item = selection.data,
boxes = categoryListEl.querySelectorAll('.win-itembox');
boxes[catList.currentItem.index].classList.remove('active');
boxes[selection.index].classList.add('active');
workItemHeader.textContent = item.title;
workList.itemDataSource = new WinJS.Binding.List(item.workitems).dataSource;
});
}
});
var workItemListEl = document.querySelector(".itemlist"),
workList = new WinJS.UI.ListView(workItemListEl, {
itemTemplate: document.querySelector('.workitemtemplate'),
onselectionchanging: function() {}
});
The code above listens for the onselectionchanging event on the first list, in which case the event data carries some information used to fill out the second list.
How can I programmatically trigger the onselectionchanging on the first item in the first list?
We figured it out. Solution code below. We wanted to trigger selection of the very first item in the first list, which would then put some information into the second list 'onselectchanging'. This involved listening to the 'onloadingstatechanged' event for the 'complete' state, and then adding the first item in the list to the first list's selection (the missing piece of API knowledge).
var catList = new WinJS.UI.ListView(categoryListEl, {
...
onselectionchanging: function (event) {
...
},
onloadingstatechanged: function () {
if (this.winControl.loadingState === "complete") {
// try to select the first item in the list
catList.selection.add({ key: 0, index: 0, hasFocus: true, showFocus: false });
}
}
});
var workItemListEl = document.querySelector("#itemListControl"),
workList = new WinJS.UI.ListView(workItemListEl, {
...,
onselectionchanging: function () {
....
}
});
I'm trying to create a pdf report card using TCPDF.
Is it possible to display the PDF_HEADER_LOGO to the extreme right of the page and PDF_HEADER_TITLE and PDF_HEADER_STRING to the left of the page?
The following is my code:
$pdf->SetHeaderData(
PDF_HEADER_LOGO,
PDF_HEADER_LOGO_WIDTH,
'Report Card',
$val['Student']['name']
);
I managed to display the logo to the extreme right of the page and header title and header string to the left by extending the tcpdf class as stated in http://bakery.cakephp.org/articles/kalileo/2010/06/08/creating-pdf-files-with-cakephp-and-tcpdf. I also refered to PHP TCPDF remove header's bottom border
The following is my
<?php
App::import('Vendor','tcpdf/tcpdf');
class XTCPDF extends TCPDF
{
var $xheadertext = 'PDF created using CakePHP and TCPDF';
var $xheaderstring = 'headerstring';
var $xheadercolor = array(0,0,200);
var $xfootertext = 'Copyright © %d XXXXXXXXXXX. All rights reserved.';
var $xfooterfont = PDF_FONT_NAME_MAIN ;
var $xfooterfontsize = 8 ;
//var $xheaderlogo = PDF_HEADER_LOGO;
/**
* Overwrites the default header
* set the text in the view using
* $fpdf->xheadertext = 'YOUR ORGANIZATION';
* set the fill color in the view using
* $fpdf->xheadercolor = array(0,0,100); (r, g, b)
* set the font in the view using
* $fpdf->setHeaderFont(array('YourFont','',fontsize));
*/
function Header()
{
list($r, $b, $g) = $this->xheadercolor;
$this->setY(10); // shouldn't be needed due to page margin, but helas, otherwise it's at the page top
$this->SetFillColor($r, $b, $g);
$this->SetTextColor(0 , 0, 0);
$this->Text(15,15,$this->xheadertext);
$this->Text(30,15,$this->xheaderstring);
$image_file = K_PATH_IMAGES.'logo.jpg';
$this->Image($image_file, 160, 10, 40, '', 'JPG', '', 'T', false, 20, '', false, false, 0, false, false, false);
$this->SetFont('helvetica', 'B', 10);
}
thank you.