Category / Section
How to pass a report parameter value from client to server in Syncfusion JavaScript reportviewer
1 min read
Syncfusion Javascript ReportViewer allows you to pass parameter values from client-side to server-side. The following steps guides you to send the parameters from client to server using ‘ajaxBeforeLoad’ API.
1. Create simple ReportViewer application with the help of getting started documentation.
2. Provide the parameter values in client-side and pass as an argument for the ajaxBeforeLoad event as shown in the following code snippet.
<script type="text/javascript">
$(function () {
$("#container").ejReportViewer(
{
reportServiceUrl: "/api/ReportApi",
reportPath: '~/App_Data/JobRoutingSheet.rdlc',
processingMode: ej.ReportViewer.ProcessingMode.Local,
parameters: [{
name: 'JobNumber',
prompt: "Job Number",
labels: ["AAA"],
values: ["AAA"],
nullable: false
}],
ajaxBeforeLoad: "ajaxBeforeLoad"
});
});
function ajaxBeforeLoad(event){
event.data = event.model.parameters;
} ;
</script>
3. Get the client-side parameter values in the controller (ReportApiController) from CustomData key in jsonResult of PostReportAction.
ReportApiController.cs
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class ReportApiController : ApiController,IReportController
{
public string DefaultParam = null;
public object PostReportAction(Dictionary < string, object > jsonResult)
{
if (jsonResult.ContainsKey("CustomData"))
{
//Gets the parameter values specified in client-side
DefaultParam = jsonResult["CustomData"].ToString();
}
return ReportHelper.ProcessReport(jsonResult, this);
}
public void OnReportLoaded(ReportViewerOptions reportOption)
{
var parameters = new List<ReportParameter>();
if (DefaultParam != null)
{
parameters = JsonConvert.DeserializeObject<List<ReportParameter>>(DefaultParam);
}
if (parameters != null && parameters.Count > 0)
{
reportOption.ReportModel.DataSources.Clear();
//Updates datasource values based on modified report parameter value
reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "HeaderDataSet", Value = HeaderDataSet.GetData(parameters[0].Values[0]) });
reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "OperationsDataSet", Value = OperationList.GetData() });
}
}
Please download the sample for passing parameter from client to server side here
