Handling AutoComplete Event

[Anas Alwindawee]

Hello,

I have an ASP.NET MVC application with ReportViewer and AutoComplete, I'm feeding data to the ReportViewer for rdlc reports through DataSets and table adapters, I'm trying to handle the select event of AutoComplete control so that the ReportViewer update when an element selected in the AutoComplete.

Below are the codes.

My View

@using RadioNetworkExplorer;
@using Syncfusion.MVC.EJ
@using Syncfusion.JavaScript
@{
    ViewBag.Title = "ReportViewer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ReportViewer Features:</h2>
<br/>
<li> Default</li>
<li> Theme - Flat-Azure-Dark</li>
<br/>
<link rel='nofollow' href="@Url.Content("~/ejThemes/default-theme/ej.web.all.min.css")" rel="stylesheet" />
<style type="text/css">
    #reportviewer {
        width: 950px !important;
        height: 600px !important;
    }
</style>

<div>
   @{Html.EJ().Autocomplete("cellFilter")
    .Datasource((IEnumerable<RadioNetworkExplorer.Controllers.cells>)ViewBag.datasource)
    .AutocompleteFields(field => field.Key("cellName").Text("cellName"))
    .ShowPopupButton(true)
    .FilterType(FilterOperatorType.Contains)
    .MinCharacter(3)
    .EnableAutoFill(true)
    .Width("250")
    .ClientSideEvents(e => e.Select("OnSelect"))
    .Render();
}
   
</div>
<button type="button" onclick="location.rel='nofollow' href='@Url.Action("update","ReportViewer")'">Test</button>
<div>
   @(Html.EJ().ReportViewer("reportviewer")  
   .ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Local)
   .ReportPath("~/Reports/CellKPI.rdlc")
   .ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/ReportAPI"))
   .DataSources(t => t.Name("CellKPI").Value(ViewData["Sales"]).Add()))
</div>

<script type="text/javascript" class="jsScript">
            // Client side Events
            function onSelect(args) {
                $.ajax({
                    url: '@Url.Action("update", "ReportViewer")',
                    data: { 'fcn': arg.value }
                });
                //jQuery.addEventLog("The value '" + args.value + "' has been <span class='eventTitle'>selected</span>.");
            }
</script>

@(Html.EJ().ScriptManager())

My Controller

using Syncfusion.JavaScript;
using Syncfusion.JavaScript.Models;
using Syncfusion.JavaScript.ReportViewerEnums;
using Syncfusion.EJ.ReportViewer;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Data;
namespace RadioNetworkExplorer.Controllers
{
    public partial class ReportViewerController : Controller
    {
        List<cells> Cells = new List<cells>();
        //
        // GET: /Report/
        //[System.Web.Mvc.Authorize]
        public ActionResult ReportViewerFeatures()
        {
            RadioNetworkExplorer.JF11cellKPITableAdapters.CellKPITableAdapter cellstbl = new JF11cellKPITableAdapters.CellKPITableAdapter();
            DataTable dt = new DataTable();
            dt = cellstbl.GetCells();
            Cells = (from DataRow dr in dt.Rows
                     select new cells()
                     {
                         cellName = dr["ObjectName"].ToString().Replace(" ","")
                     }).ToList();
            //for (int i=0;i<dt.Rows.Count;i++)
            //{
            //    cells Cell = new cells();
            //    Cell.cellName = dt.Rows[i]["ObjectName"].ToString();
            //     Cells.Add(Cell);
            //}           
            ViewBag.datasource = Cells;
            RadioNetworkExplorer.JF11cellKPITableAdapters.CellKPI_fdTableAdapter kpitbl = new JF11cellKPITableAdapters.CellKPI_fdTableAdapter();
            ViewData["Sales"] = kpitbl.GetData("cellname", null, 45);           
            return View();
        }
    public void update(string fcn)
        {
            RadioNetworkExplorer.JF11cellKPITableAdapters.CellKPI_fdTableAdapter kpitbl = new JF11cellKPITableAdapters.CellKPI_fdTableAdapter();
            ViewData["Sales"] = kpitbl.GetData(fcn, null, 45);
        }
    }
    public class ReportAPIController : ApiController, IReportController
    {       
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this);
        }
        [System.Web.Http.ActionName("GetResource")]
        [System.Web.Http.AcceptVerbs("GET")]
        public object GetResource(string key, string resourcetype, bool isPrint)
        {
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        }
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
        }
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
        }
    }

    public class cells
    {
        public string cellName { get; set; }
    }

OnSelect function never fires, could you please help me.

BR

[Ezhil S]

Hi Anas, 

Thank you for contacting Syncfusion support. 

We are unable to reproduce the reported issue with triggering select event for Autocomplete. We have prepared a sample using the shared code and it is available from the following link, 

http://www.syncfusion.com/downloads/support/forum/124947/ze/Sample-109983077  

If you are still facing issue with triggering event, please share us check and share if you are facing any errors in console. Or else modify the shared sample to reproduce issue at our end, so that we can provide you an appropriate solution. 

Demo link: http://www.syncfusion.com/downloads/support/forum/124947/ze/ac1249471245508357  

 

Regards, 

Ezhil S 

[Anas Alwindawee]

Many thanks Ezhi,

It's working now your support is really appreciated, but why the report viewer is not updating the or refreshing, when I select a value from the AutoComplete the value is passed to the ActioResult and it's excuted but the charts in the report is not refreshing, even I try the refresh button in the ReportViewer it's not doing any thing also, below is my could.

My View

@using RadioNetworkExplorer;
@using Syncfusion.MVC.EJ
@using Syncfusion.JavaScript
@{
    ViewBag.Title = "ReportViewer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ReportViewer Features:</h2>
<br/>
<li> Default</li>
<li> Theme - Flat-Azure-Dark</li>
<br/>
<link rel='nofollow' href="@Url.Content("~/ejThemes/default-theme/ej.web.all.min.css")" rel="stylesheet" />
<style type="text/css">
    #reportviewer {
        width: 950px !important;
        height: 600px !important;
    }
</style>

<div>
   @{Html.EJ().Autocomplete("cellFilter")
    .Datasource((IEnumerable<RadioNetworkExplorer.Controllers.cells>)ViewBag.datasource)
    .AutocompleteFields(field => field.Key("cellName").Text("cellName"))
    .ShowPopupButton(true)
    .FilterType(FilterOperatorType.Contains)
    .MinCharacter(3)
    .EnableAutoFill(true)
    .Width("250")
    .ClientSideEvents(e => e.Select("OnSelect"))
    .Render();
}
   
</div>
<button type="button" onclick="location.rel='nofollow' href='@Url.Action("update","ReportViewer")'">Test</button>
<div>
   @if(ViewData["Sales"]!=null)
   {
       @(Html.EJ().ReportViewer("reportviewer")
       .ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Local)
       .ReportPath("~/Reports/CellKPI.rdlc")
       .ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/ReportAPI"))
       .DataSources(t => t.Name("CellKPI").Value(ViewData["Sales"]).Add())     
    )
   }
  
</div>

<script type="text/javascript">
    function OnSelect(arg) {
        //var ac = $("#cellFilter").data("ejAutocomplete");
        $.ajax({
            url: '@Url.Action("ReportViewerFeatures", "ReportViewer")',
            data: { 'fcn': arg.key },
            type: 'POST',
            dataType: "json",
            complete: function (args) {
                console.log(args);
            }
        });
    }
</script>

My Controller

using Syncfusion.JavaScript;
using Syncfusion.JavaScript.Models;
using Syncfusion.JavaScript.ReportViewerEnums;
using Syncfusion.EJ.ReportViewer;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Data;
namespace RadioNetworkExplorer.Controllers
{
    public partial class ReportViewerController : Controller
    {
        List<cells> Cells = new List<cells>();
        //
        // GET: /Report/
        //[System.Web.Mvc.Authorize]
        //[System.Web.Mvc.AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ReportViewerFeatures(string fcn)
        {
            RadioNetworkExplorer.JF11cellKPITableAdapters.CellKPITableAdapter cellstbl = new JF11cellKPITableAdapters.CellKPITableAdapter();
            DataTable dt = new DataTable();
            dt = cellstbl.GetCells();
            Cells = (from DataRow dr in dt.Rows
                     select new cells()
                     {
                         cellName = dr["ObjectName"].ToString().Replace(" ","")
                     }).ToList();
            //for (int i=0;i<dt.Rows.Count;i++)
            //{
            //    cells Cell = new cells();
            //    Cell.cellName = dt.Rows[i]["ObjectName"].ToString();
            //     Cells.Add(Cell);
            //}           
            ViewBag.datasource = Cells;
            RadioNetworkExplorer.JF11cellKPITableAdapters.CellKPI_fdTableAdapter kpitbl = new JF11cellKPITableAdapters.CellKPI_fdTableAdapter();
            if(fcn!="" && fcn!= null)
            {
                ViewData.Clear();
                ViewData["Sales"] = kpitbl.GetData(fcn, null, 45);           
            }
            else
            {
                ViewData["Sales"] = null;
            }
            return View();
        }
    public void update(string fcn)
        {
            RadioNetworkExplorer.JF11cellKPITableAdapters.CellKPI_fdTableAdapter kpitbl = new JF11cellKPITableAdapters.CellKPI_fdTableAdapter();
            ViewData["Sales"] = kpitbl.GetData(fcn, null, 45);
        }
    }
    public class ReportAPIController : ApiController, IReportController
    {       
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this);
        }
        [System.Web.Http.ActionName("GetResource")]
        [System.Web.Http.AcceptVerbs("GET")]
        public object GetResource(string key, string resourcetype, bool isPrint)
        {
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        }
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
        }
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
        }
    }

    public class cells
    {
        public string cellName { get; set; }
    }

Could you please help.

BR

[Yuvaraj Devarajan]

Hi Anas, 

 

We could not pass the ViewData from controller to view using ajax callback and we can achieve this requirement to load the ReportViewer control in partial view based view data. But we are facing problem to load ReportViewer control in partial view. So a support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Regards, 

Yuvaraj D