We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Problem showing a grid on a partial view

Problem showing a grid on a partial view

I have a grid in a partial view. It shows OK when the view is initially displayed, but when the partial view is refreshed via AJAX, the grid does not display, but only has an empty <div>.

I've attached a sample project that shows the issue.

Attachment: SyncfusionMvcApplication7_d9b4401.zip

7 Replies
JK Jayaprakash Kamaraj Syncfusion Team December 2, 2016 12:11 PM UTC

Hi Brian, 
 
Thank you for contacting Syncfusion support. 
 
Syncfusion MVC components will render in two modes such Unobtrusive mode and non-unobtrusive mode. 
 
Your application is running in Non-Unobtrusive mode, so we need to refer ScriptManager() in partial view page and also refer to the below code example for render Grid using ajax call(partialView). 

Index.cshtml 

<script type="text/javascript"> 
    function doreload(args) { 
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function () { 
            if (this.readyState == 4 && this.status == 200) { 
                $("#contentzone").html(this.responseText); 
            } 
        }; 
        xhttp.open("POST", "/Home/Page", true); 
        xhttp.send(); 
    } 
</script> 
 
_homeContent.cshtml 
 
@(Html.EJ().Grid<SyncfusionMvcApplication7.Models.ModelT>("GridContainer") 
… 
}) 
) 
 
@Html.EJ().ScriptManager() 

 
For Unobtrusive mode, there is no need to refer the ScriptManager() in each partial views but to initiate the control in the partial, we have to use ej.widgets.init.  

Web.config 
 
 <appSettings> 
   .  . .  
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
  </appSettings> 
 
_layout.cshtml 
 
<!DOCTYPE html> 
<html> 
<head> 
     . . . . ..  
    <script src="~/Scripts/ej/ej.web.all.min.js"></script> 
    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script> 
</head> 
<body> 
    @RenderBody() 
    @(Html.EJ().ScriptManager()) 
</body> 
</html> 
 
 
 
Index.cshtml 

<script type="text/javascript"> 
    function doreload(args) { 
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function () { 
            if (this.readyState == 4 && this.status == 200) { 
                $("#contentzone").html(this.responseText); 
                ej.widget.init($("#contentzone")); // Initiate control rendering 
 
            } 
        }; 
        xhttp.open("POST", "/Home/Page", true); 
        xhttp.send(); 
    } 
</script> 


Note: For an Unobtrusive mode, you have to refer the ej.unobtrusive.min.js in the _layout page of your application. 
 
Help document for, 
 


 
Regards, 
 
Jayaprakash K. 


RB R Brian Lindahl December 2, 2016 04:24 PM UTC

I modified my main app to use unobtrusive=true, and the grid was rendered as expected. However, there was a problem with the data source that I can't quite track down (explanation below).

However, I modified my sample app in the same fashion, and the grid is NOT rendering properly. I've attached the updated sample.

The main app updates the partial based on a DatePicker on the main page. The only way I could figure out to send the new date was to add a query to the "partial" grid. What I'm seeing in the main app is that the response from the AJAX post has the new query in it, but when the UrlAdapter's datasource is called, the datamanager "where" has the original date in it, not the date that is in the updated grid's query. I've modified the sample to use a similar mechanism - hopefully, if you can get the grid to render, you can see if the data in it reflects the proper date. The dates in the datasource are either today, tomorrow, or the next day.

JK Jayaprakash Kamaraj Syncfusion Team December 5, 2016 01:56 PM UTC

Hi Esio, 
 
We could not find any attachment with your update. So, please resend the sample to give prompt a solution to you. 
 
Please share the following information to find the cause of the issue. 
 
1.     Share the video or screenshot to show the issue. 
 
Regards, 
 
Jayaprakash K. 


RB R Brian Lindahl December 5, 2016 02:31 PM UTC

Here's the attachment. Sorry about that!

Attachment: SyncfusionMvcApplication7_6d996fd9.zip

JK Jayaprakash Kamaraj Syncfusion Team December 6, 2016 09:02 AM UTC

Hi Brain, 

While using UrlAdaptor we need to handle filtering based on the query in server side. Please refer to the below code example and sample. 


 
@(Html.EJ().Grid<SyncfusionMvcApplication7.Models.ModelT>("GridContainer") 
            .Datasource(ds => ds.URL("/home/DataSource").Adaptor("UrlAdaptor")) 
.Query(queryString) 
 
.. 
 
.Columns(col => 
{ 
    col.Field("ModelTID").HeaderText("ID").IsPrimaryKey(true).IsIdentity(true).Visible(false).Add(); 
    col.Field("Name").HeaderText("Name").Add(); 
    col.Field("Age").HeaderText("Age").EditType(EditingType.Numeric).Add(); 
    col.Field("Date").HeaderText("Date").Add(); 
}) 
) 
 
HomeController.cs 
 
public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable Data = source; 
            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations(); 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator); 
            } 
 
            int count = Data.AsQueryable().Count(); 
            if (dm.Skip != 0) 
            { 
                Data = operation.PerformSkip(Data, dm.Skip); 
            } 
            if (dm.Take != 0) 
            { 
                Data = operation.PerformTake(Data, dm.Take); 
            } 
            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 
        } 




Regards, 

Jayaprakash K. 


RB R Brian Lindahl December 15, 2016 07:05 PM UTC

I'm doing that... however, I'm still seeing strange data.

when I reload the partial page, it generates a new query with a new date. In the VS debugger, I see this: 

http://screencast.com/t/sxrpYUCrnDcs

Clearly, the new date is 12/15/2016. However, when the datasource is reloaded, the "where" is passed with 12/13/16, which was the date in place when the partial was originally loaded:

params sent: http://screencast.com/t/tgcnFeDGt

in VS datasource handler: http://screencast.com/t/WEKE2blKXz74

Is there a place I can debug this activity on the javascript side? Clearly something goes wrong between the query string and the datasource request, but I don't know where to start looking.

JK Jayaprakash Kamaraj Syncfusion Team December 16, 2016 12:46 PM UTC

Hi Brain, 
 
We were unable to reproduce the issue at our end. Please refer to the below screenshots. 

 

 

 
 
Please share the following information to find the cause of the issue.    
1.     Essential studio version and browser details. 
2.     Mention your timezone. 
3.     Share the video to show the issue. 
4.     If possible, provide an issue reproducing sample or replicate the issue in the attached sample. 
   
 
Regards, 
 
Jayaprakash K. 


Loader.
Live Chat Icon For mobile
Up arrow icon