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.
Unfortunately, activation email could not send to your email. Please try again.

Problem showing a grid on a partial view

Thread ID:

Created:

Updated:

Platform:

Replies:

127677 Dec 1,2016 04:09 PM Dec 16,2016 07:46 AM ASP.NET MVC 7
loading
Tags: Grid
R Brian Lindahl
Asked On December 1, 2016 04:09 PM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On December 2, 2016 07:11 AM

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. 


R Brian Lindahl
Replied On December 2, 2016 11:24 AM

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.

Jayaprakash Kamaraj [Syncfusion]
Replied On December 5, 2016 08:56 AM

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. 


R Brian Lindahl
Replied On December 5, 2016 09:31 AM

Here's the attachment. Sorry about that!

Attachment: SyncfusionMvcApplication7_6d996fd9.zip

Jayaprakash Kamaraj [Syncfusion]
Replied On December 6, 2016 04:02 AM

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. 


R Brian Lindahl
Replied On December 15, 2016 02:05 PM

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.

Jayaprakash Kamaraj [Syncfusion]
Replied On December 16, 2016 07:46 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;