How to get search button to grab new data from database in Telerik Report using code .
HTML Section
@using Telerik.Reporting.Examples.CSharp.ZipCodeReport;
@{
ViewBag.Title = "Zip Code Report";
Layout = "~/Views/Shared/_LayoutAllReport.cshtml";
}
@section styles
{
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
@*<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />*@
<style>
#reportViewer1 {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
font-family: Verdana, Arial;
height: 1150px;
}
#reportViewer1 .trv-parameters-area {
display:none;
}
</style>
<link href="@Url.Content("~/ReportViewer/styles/telerikReportViewer-9.0.15.324.css")" rel="stylesheet" />
}
<div style="background:#fff; border-bottom: 3px solid #396087;">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="clearfix">
<div class="col-md-2 form-group clearfix">
<label>Date From</label>
@(Html.Kendo().DatePicker().Name("DateFrom")
.Value(Utility.Common.common.ConvertUTCtoLocalTime(DateTime.UtcNow)).Format("MM/dd/yyyy")
.Max(DateTime.Today)
.Events(e =>
{
e.Change("dateChanged");
})
)
</div>
<div class="col-md-2 form-group clearfix">
<label>Date To</label>
@(Html.Kendo().DatePicker().Name("DateTo")
.Value(Utility.Common.common.ConvertUTCtoLocalTime(DateTime.UtcNow)).Format("MM/dd/yyyy")
.Max(DateTime.Today)
.Events(e =>
{
e.Change("dateChanged");
})
)
</div>
<div class="col-md-2 form-group clearfix">
<label> </label>
@(Html.Kendo().Button()
.Name("btnSearch")
.HtmlAttributes(new { type = "button", @class = "small-button" })
.Content("Search"))
</div>
</div>
</div>
<div class="col-md-3">
<div class="top-btn floatR" style="margin-top:20px;">
<a id="iconTextButton2" href="/Patient/List" class="k-button" data-role="button" role="button" aria-disabled="false" tabindex="0">Find Patient</a>
<script>
jQuery(function () { jQuery("#iconTextButton2").kendoButton({}); });
</script>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
@{
var typeReportSource = new TypeReportSource() { TypeName = typeof(ZipCodeReport).AssemblyQualifiedName };
typeReportSource.Parameters.Add("DisplayDateFrom", Utility.Common.common.ConvertUTCtoLocalTime(DateTime.UtcNow).ToString("MM/dd/yyyy"));
typeReportSource.Parameters.Add("DisplayDateTo", Utility.Common.common.ConvertUTCtoLocalTime(DateTime.UtcNow).ToString("MM/dd/yyyy"));
}
@(Html.TelerikReporting().ReportViewer()
// Each report viewer must have an id - it will be used by the initialization script
// to find the element and initialize the report viewer.
.Id("reportViewer1")
// The URL of the service which will serve reports.
// The URL corresponds to the name of the controller class (ReportsController).
// For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
.ServiceUrl(Url.Content("~/api/reports/"))
// The URL for the report viewer template. The template can be edited -
// new functionalities can be added and unneeded ones can be removed.
// For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
.TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html"))
// Strongly typed ReportSource - TypeReportSource or UriReportSource.
.ReportSource(typeReportSource)
// Specifies whether the viewer is in interactive or print preview mode.
// PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
// INTERACTIVE - Displays the report in its original width and height with no paging. Additionally interactivity is enabled.
.ViewMode(ViewModes.PRINT_PREVIEW)
// Sets the scale mode of the viewer.
// Three modes exist currently:
// FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
// FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.
// SPECIFIC - Uses the scale to zoom in and out the report.
.ScaleMode(ScaleModes.SPECIFIC)
// Zoom in and out the report using the scale
// 1.0 is equal to 100%, i.e. the original size of the report
.Scale(1.0)
// Sets whether the viewer’s client session to be persisted between the page’s refreshes(ex. postback).
// The session is stored in the browser’s sessionStorage and is available for the duration of the page session.
.PersistSession(false)
// Sets the print mode of the viewer.
.PrintMode(PrintMode.AutoSelect)
// Defers the script initialization statement. Check the scripts section below -
// each deferred script will be rendered at the place of TelerikReporting().DeferredScripts().
.Deferred()
)
</div>
</div>
Script Section
@section scripts
{
<!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
<script src="@Url.Content("~/ReportViewer/js/telerikReportViewer-9.0.15.324.js")"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
<!--kendo.mobile.min.js - optional, if gestures/touch support is required-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>
@(
// All deferred initialization statements will be rendered here
Html.TelerikReporting().DeferredScripts()
)
<script type="text/javascript">
function ReportViwerLoad()
{
var reportUrl = '@Url.Action("GetConvertUTCtoLocalTime", "Report")';
reportUrl = reportUrl + '?DateFrom=' + $("#DateFrom").val() + ' ' + get12HourFormatTime(new Date()) + '&DateTo=' + $("#DateTo").val() + ' ' + get12HourFormatTime(new Date());
$.ajax({
type: "POST",
url: reportUrl,
dataType: 'json',
success: function (data) {
var viewer = $("#reportViewer1").data("telerik_ReportViewer");
viewer.reportSource({
report: viewer.reportSource().report,
parameters: { DateFrom: data.returnVal.DateFrom, DateTo: data.returnVal.DateTo, DisplayDateFrom: $("#DateFrom").val(), DisplayDateTo: $("#DateTo").val() }
});
viewer.refreshReport();
},
error: function () { }
});
}
$("#btnSearch").click(function () {
ReportViwerLoad();
});
function dateChanged()
{
ReportViwerLoad();
}
</script>
}
