My page has the following html tags and content.
<h1>A H1 title</h1>
<p>paragraph something...</p>
When I run it, The page appears as expected with the h1 header and paragraph. But when I include a new chart using Razor tag on that page, it removes/covers up the header and paragraph content and only shows the chart on the page. The shared Layout is gone too. How can I show the contents, layout and the chart?
<h1>This is a h1 title</h1>
<p>Paragraph something...</p>
#{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}
You need to put your chart code in a separate partial view, say _Chart.cshtml (include only the code between #{ ..... }. Then in the main view, use an <img> element to display the chart
_Chart.cshtml
#{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}
yourView.cshtml
<h1>This is a h1 title</h1>
<p>Paragraph something...</p>
<p><img src="_Chart.cshtml" /> </p>
Related
I have a c# application which displays a webgrid populated by a database. When I double click on a grid element, jquery captures the double click, determines the row of the grid, finds the ID column and does an ajax call to pass the ID back to my controller. Ajax is instructed to expect html as the response.
When the controller receives the ID from the view, it reads the record from the database with that ID, populates a list with a set of fields, and passes that list as a parameter to a partial view.
The partial view returns html to the ajax call. The html includes a form where the database fields are displayed in text boxes so the user can update the data. There is a submit button and a cancel button at the bottom of the form.
The is the ajax code:
$("body").on("dblclick", "#WebGrid td", function () {
var row = $(this).closest("tr");
var FirstName = row.find("td").eq(1).text();
var LastName = row.find("td").eq(2).text();
var ID = row.find("td").eq(0).text();
$.ajax({
url: "/Home/Details",
type: "POST",
data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
dataType: "html",
success: function (result) {
$('#dialog').html(result);
$('#dialog').dialog('open');
},
failure: function (result) {
alert("FAILURE " + result.responseText);
},
error: function (result) {
alert("ERROR " + result.responseText);
}
});
return false;
});
And this is how I define the division that the returned html gets placed into:
<div id="dialog" style="display: none">
</div>
And this is the function that I have:
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Update"
});
});
When I run the application, and I double click on a grid item and the partial view gets passed back to the ajax call, the dialog division gets displayed correctly with the data from the database.
The problem is when I click on the Cancel button nothing happens. And I do not get the 'cancel button clicked' message on the console. I have this code to capture the click of the cancel button:
$("#btnCancel").on('click', function (event) {
console.log("cancel button clicked");
$('#dialog').hide;
toastr.warning("Your update has been cancelled");
clear();
display();
});
Any suggestions? Thank you.
edit:
Here is the entire code of the initial View where the grid is rendered:
#model List<CodingChallengeV4.ViewModels.ContactPassData>
#{
ViewBag.Title = "UpdateAllData";
}
#{
Layout = null;
WebGrid grid = new WebGrid(source: Model, canPage: true, canSort: false);
}
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js">
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<!-- Latest compiled JavaScript -->
<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<style type="text/css">
.Grid {
border: 1px solid #ccc;
border-collapse: collapse;
}
.Grid th {
background-color: #F7F7F7;
font-weight: bold;
}
.Grid th, .Grid td {
padding: 5px;
width: 150px;
border: 1px solid #ccc;
}
.Grid, .Grid table td {
border: 0px solid #ccc;
}
.Grid th a, .Grid th a:visited {
color: #333;
}
</style>
<h2>Update All Contacts</h2>
#grid.GetHtml(
htmlAttributes: new { #id = "WebGrid", #class = "Grid" },
columns: grid.Columns(
grid.Column(header: "", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedID">#item.passedID</div></text>),
grid.Column(header: "First Name", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedfName">#item.passedfName</div></text>),
grid.Column(header: "Last Name", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedlName">#item.passedlName</div></text>),
grid.Column(header: "eMail Address", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedeMail">#item.passedeMail</div></text>),
grid.Column(header: "eMail Type", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedeMailTypeString">#item.passedeMailTypeString</div></text>)
)
)
<div id="dialog" style="display: none;" >
</div>
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View Details"
});
});
$(document).ready(function () {
$('#toast-container').find('.toast-top-center').removeClass('.toast-top-center');
toastr.options = {
"closeButton": true,
'autoWidth': false,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-center-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
$("#btnCancel").on('click', function (event) {
console.log("cancel button was clicked");
$('#dialog').dialog('hide');
toastr.warning("Your update has been cancelled");
clear();
display();
});
$("body").on("dblclick", "#WebGrid td", function () {
var row = $(this).closest("tr");
var FirstName = row.find("td").eq(1).text();
var LastName = row.find("td").eq(2).text();
var ID = row.find("td").eq(0).text();
$.ajax({
url: "/Home/Details",
type: "POST",
data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
dataType: "html",
success: function (result) {
$('#dialog').html(result);
$('#dialog').dialog('open');
},
failure: function (result) {
alert("FAILURE " + result.responseText);
},
error: function (result) {
alert("ERROR " + result.responseText);
}
});
return false;
});
});
</script>
At work, we are having performances issues with a kendo grid that has a lot of row. We are thinking about using virtualization of remote data as a solution like you can see on the link below.
https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
The problem we have with that solution is that we allow filters on a lots of our columns and only the rows that are defined in the pagesize of the grid are displayed.
In the link below, you can easily see what I mean by that. I added the filterable attribute to the grid in the telerik demo and only the rendered row are displayed if I try to add a filter.
https://dojo.telerik.com/ayaKidet
The question was previously asked here but without an answer :(
Kendo Grid Virtualization of Lots of Data with Filters?
If anyone know of a way to apply the filter to the whole datasource it would be awesome.
Thank you very much
As well as you have set serverSorting to true in your datasource (the following code is from the dojo link):
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [
{field: "OrderID", title: "Order ID", width: 110},
{field: "CustomerID", title: "Customer ID", width: 130},
{field: "ShipName", title: "Ship Name", width: 280},
{field: "ShipAddress", title: "Ship Address"},
{field: "ShipCity", title: "Ship City", width: 160},
{field: "ShipCountry", title: "Ship Country", width: 160}
]
});
you should set serverFiltering to true. The question is that, by default, filtering is applied to the data that is in memory but, of course, not all records that meet the condition have already been transferred and, of course, you don't want to transfer all data before start filtering.
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true, // Add this to your code
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [{
field: "OrderID",
title: "Order ID",
width: 110
},
{
field: "CustomerID",
title: "Customer ID",
width: 130
},
{
field: "ShipName",
title: "Ship Name",
width: 280
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipCity",
title: "Ship City",
width: 160
},
{
field: "ShipCountry",
title: "Ship Country",
width: 160
}
]
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>
I'm creating a simple webpage with Razor syntax and I have a little trouble with using buttons forms and input; how do I attach
db.Execute("exec dbo.deleteProject #0", #item.Key_Project);
to the input in last column of webgrid (via action or onclick)?
#{ //layout etc
var db = Database.Open("defaultConnection");
var ProjectNameGrid = new WebGrid(source: db.Query(SelectAllProjectKeysNamesStates),
canSort: false);}
#ProjectNameGrid.GetHtml(
columns: ProjectNameGrid.Columns(
ProjectNameGrid.Column("Key_Project", "ID", style: "smallColumn"),
ProjectNameGrid.Column("ProjectName", "Project", style: "LongColumn"),
ProjectNameGrid.Column("ProjectStartDate", "Starting date"),
ProjectNameGrid.Column("ProjectEndDate", "Ending date"),
ProjectNameGrid.Column("IsActive", "Active", style: "smallColumn"),
ProjectNameGrid.Column("Key_Project", "", format:
#<input type="submit" method="post" action="" value="delete" />) ),
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt")
use Razor ActionLink Like Bellow:
#Html.ActionLink("Text", "Action", "Controller", new {param1 = val1, param2 = val2}, null)
I have made grid as below:
$("#gvObservationScore").kendoGrid({
dataSource: Data,
columns: [{
title: "Code",
width: 4,
template: "#= getCodeForScoreGrid(TitleCode,componentCode)#"
}, {
field: "CorrelatedTo",
title: "CorrelatedTo",
width: 30,
template: "#= getCorrelationTextForScoreGrid(correlatedTo,CorrScoreID)#"
}
, {
field: "Score",
title: "Score",
width: 5,
template: "#= getScoreTextForScoreGrid(correlationScore,correlatedTo,CorrScoreID)#"
}
, {
field: "NS",
title: "NS",
width: 3,
template: "#= getNSRadioButtonForScoreGrid(correlationScore,correlatedTo,CorrScoreID,CorrID,componentCode)#"
}
, {
field: "1",
title: "1",
width: 3,
template: "#= getOneScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "2",
title: "2",
width: 3,
template: "#= getTwoScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "3",
title: "3",
width: 3,
template: "#= getThreeScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "4",
title: "4",
width: 3,
template: "#= getFourScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "AddComment",
title: "Add Comment",
width: 10,
template: "#= getAddCommentButtonForScoreGrid(componentCode,CorrScoreID,CorrID,commentCount) #"
}
//getThreeScoreRadioButtonForScoreGrid
],
sortable: true
});
It looks as follows:
But grid is not getting sorted.
I have already kept sortable:true in my code.
Also tried with :
sortable: {
mode: "single",
allowUnsort: false
}
Then also not getting sorted.
Please help me.
Try this...
$("#gvObservationScore").kendoGrid({
dataSource: Data,
sortable: true,
columns: [{
title: "Code",
width: 4,
sortable: true,
template: "#= getCodeForScoreGrid(TitleCode,componentCode)#"
}, {
field: "CorrelatedTo",
title: "CorrelatedTo",
width: 30,
template: "#= getCorrelationTextForScoreGrid(correlatedTo,CorrScoreID)#"
}
................
I have added sortable to the grid, and a column as an example
EDIT:
Since all are templates, you might be missing the escape characters before the # tags i.e.
template: "//#= getCodeForScoreGrid(TitleCode,componentCode)//#"
So I was trying out the Chart helpers in the System.Web.Helpers namespace.
according to http://www.asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart
I make the chart in a .cshtml view but I wanted to keep it in the ViewModel instead.
No problem except for when I'm trying to render it as a smaller image in the website.
I thought the cleanest solution would be to create one shared partial view to render graphs from models
_graph.cshtml
#model System.Web.Helpers.Chart
#Model.Write()
And then render this partial view somehow in the proper websites. I tried a few versions but can't seem to get it to work.
Website.cshtml
<div>
<h2>Some header above a graph</h2>
<img src="#Html.Partial("_graph", Model.TheChart)" />
</div>
This doesn't work and I'm not certain how to do this. Only think I can think of now is making all models with charts inherit an Interface that exposes Chart and let that be the model for _graph.cshtml.
<img src="_graph.cshtml" />
But not sure if the this uses the Model.
Any opinions?
<div>
<h2>Some header above a graph</h2>
<img src="#Url.Action("DrawChart")" />
</div>
and then you could have a controller action:
public ActionResult DrawChart()
{
MyViewModel model = ...
return View(model);
}
and a corresponding view that will draw the chart (DrawChart.cshtml):
#model MyViewModel
#{
// TODO: use the data from the model to draw a chart
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}
and the rendered result:
<div>
<h2>Some header above a graph</h2>
<img src="#Url.Action("DrawChart")" />
</div>
public ActionResult DrawChart()
{
MyViewModel model = ...
return View(model);
}
!!! To send the Model parameter to DrawChart
Change to
<div>
<h2>Some header above a graph</h2>
<img src="#Url.Action("DrawChart",Model)" />
</div>
public ActionResult DrawChart(MyViewModel _MyViewModel )
{
MyViewModel model = MyViewModel ;
return View(model);
}
MyViewModel is Null
Seek advice from those who know.