Unable to generate grid in partial view

[Manish]

Hi,

My grid is not able to see on screen. I am using grid in partial view. I used this grid in many places where it is working absolutely fine. I tried lot to find issue but no success. I also observed that it is not generating grid in html.
Strange thing is rest of the control is appearing on screen except grid.

This is my partial View

@model ERSCore.Models.PurchaseRequestModel
<div class="row" style="width: 100%; padding-bottom: 5px;">
    <div class="col-md-3" style="padding-right:0px;">
        Employee Code / Name
    </div>
    <div class="col-md-1" style="padding-right:0px;">
        @Html.TextBoxFor(model => model.EmployeeID, new { @class = "form-control  input-sm", @disabled = "disabled" })
    </div>
    <div class="col-md-2" style="padding-right:0px;">
        @Html.TextBoxFor(model => model.EmployeeName, new { @class = "form-control  input-sm", @readonly = "readonly" })
    </div>
    <div class="col-md-3" style="padding-right:0px;">
        No.
    </div>
    <div class="col-md-3" style="padding-right:0px;">
        <div style="float:right;">
            @Html.TextBoxFor(model => model.DocNum, new { @class = "form-control  input-sm", @readonly = "readonly", @style = "width:170px" })
        </div>
        <div style="float:left;">
            @Html.DropDownListFor(model => model.Series, new SelectList(Model.SeriesList, "Code", "Name"), new { @class = "form-control  input-sm", @disabled = "disabled", @style = "width:100%" })
        </div>
    </div>
</div>
<div class="row" style="width: 100%; padding-bottom: 5px;">
    <div class="col-md-3" style="padding-right:0px;">
        Project
    </div>
    <div class="col-md-3" style="padding-right:0px;">
        @Html.DropDownListFor(model => model.ProjectCode, new SelectList(Model.Projects, "Code", "Name", "Extra1", 1), new { @class = "form-control  input-sm", @disabled = "disabled" })
    </div>
    <div class="col-md-3" style="padding-right:0px;">
        Status
    </div>
    <div class="col-md-3" style="padding-right:0px;">
        @Html.DropDownListFor(model => model.StatusCode, new SelectList(Model.StatusList, "Code", "Name"), new { @class = "form-control  input-sm", @disabled = "disabled" })
    </div>
</div>
<hr style="color:blue;" />
<div class="row" style="width: 100%; padding-bottom: 5px;">
    <div class="col-md-12">
        @(Html.EJ().Grid<ERSCore.Models.LineItem>("RequestView_data")
                            .AllowScrolling(true)
                            .EnableAltRow(true)
                            .EnableResponsiveRow()
                            .PageSettings(m => m.PageSize(10))
                            .EnableHeaderHover(true)
                            .AllowTextWrap()
                            .AllowPaging()
                            .Columns(col =>
                            {
                                //col.Field("DocEntry").HeaderText("DocEntry").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(50).TextAlign(System.Web.UI.WebControls.TextAlign.Left).Add();
                                col.Field("DisplayText").HeaderText("Description").Width(800).Add();
                                col.Field("Amount").HeaderText("Amount").Type("int").Width(70).Add();

                            })
                             .Datasource((System.Collections.IEnumerable)Model.Lines)
        )
</div>
</div>

This is my dialog window in which it should appear.

   <div>
        @{Html.EJ().Dialog("RequestDetails").Title("Travel Request Details").Width(1200).Height(600).ShowOnInit(false)
              .EnableModal(true).Render();}
    </div>

Through JavaScript I am calling controller method to get partial view with data.

   $.ajax({
            url: "/PurchaseRequest/Details",
            type: "POST",
            data: { id: args.data.DocEntry },
            error: function (a, b, c) {
            

            },
            success: function (e) {
      
                $("#RequestDetails").ejDialog("setContent", e);
                eDialog = $("#RequestDetails").data("ejDialog");
                if (eDialog.model)
                    eDialog.open();
               
            }

        });

My Control is :

 [Filters.B1Authentication()]
        public ActionResult Details(int id)
        {
            ERSCore.Models.ERLoginResultModel rModel = new ERSCore.Models.ERLoginResultModel();
            if (Session["Session"] != null)
                rModel = (ERSCore.Models.ERLoginResultModel)Session["Session"];

            purchaseRequest = new ERSCore.Controllers.SQL_PurchaseRequestController(rModel);
            ERSCore.Models.PurchaseRequestModel prModel = purchaseRequest.GetDraftRequestByID(id, rModel);
            return PartialView(prModel); // this is returning html for my view but no grid html.
           
        }

[Prasanna Kumar Viswanathan]

Hi Manish,

Thanks for contacting Syncfusion support.

We analyzed your code snippet and found that you have not specified the @Html.EJ().ScriptManager() at the end of the Partial View.  The ScriptManager() is used to render the ejControls.

Please find the code example:

@(Html.EJ().Grid<SampleApp.Models.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowPaging()

        .AllowScrolling()

        .EnableAltRow()

        .EnableResponsiveRow()

        .EnableHeaderHover(true)

        .AllowTextWrap()

        .PageSettings(page => { page.PageSize(4); })

        ---------------------

       .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); })

        .Columns(col =>

        {

            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();

            col.Field("OrderID").HeaderText("Order ID").Width(100).Add();

            col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();

            col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add();

            col.Field("ShipCountry").Width(100).HeaderText("Ship Country").Add();

        })

)

@Html.EJ().ScriptManager()

If you still face the same issue, please confirm the following details as it will be helpful to provide the solution

1.        Did you face any script error in the console? If you had faced any script error, please share the screenshot.

2.       Essential Studio Version details.

Sample : http://www.syncfusion.com/downloads/support/forum/122076/ze/SampleApp-699053330


Regards,
Prasanna Kumar N.S.V

---

MA Manish February 16, 2016 11:51 AM UTC

Hi Prasanna,

Does it required to set @Html.EJ().ScriptManager() on each page where the grid is?
I don't think it is required. This line is already there in my _layout.cshtml page.

This is snippet from my _layout.cshtml page:

 <div class="container body-content" id="xBody">
            @RenderBody()
        </div>
@Html.EJ().ScriptManager()

---

MA Manish February 16, 2016 11:58 AM UTC

I am using

---

PK Prasanna Kumar Viswanathan Syncfusion Team February 17, 2016 05:23 PM UTC

Hi Manish,

 

Query : “Does it required to set @Html.EJ().ScriptManager() on each page where the grid is?”

 

The main reason for referring the ScriptManager in _Layout file is that, it can be referred as common by all the View files present within your application. When we  rendering the Grid in partial view using ajax the ScriptManager will not referred for the partial view. So, we need to manually include the  scriptmanager for each partial view.

 

Kindly let me know whether you are having more number of partial view in your application if yes please explain the scenario of how you are using the partial view. So that we can provide you the appropriate solution.

               

Regards,

Prasanna Kumar N.S.V

---

MA Manish February 22, 2016 09:52 AM UTC

Hi Prasanna,

Thanks for you support. As you instructed I am to display grid, it creates pager and rows also but I am unable to display text.
Please see the below screen shot.



On further investigation i observed that html string is building properly but not able to see this on screen.
Please see the screen shot below.



In this investigation I observed that this particular grid is not rendering properly on Internet Explorer 11.0 where as it is showing data / working in FireFox.
Please see the screen shot.



Can you please let me know what could be the issue?

---

PK Prasanna Kumar Viswanathan Syncfusion Team February 23, 2016 04:08 PM UTC

Hi Manish,

We checked your screenshots and suspect that you are initializing the grid with the hidden element. After retrieved the data from the server using AJAX post you are displaying the grid. When we initialize the grid with the hidden element by enable the allowScrolling property, the width and height of the grid will be initialized as zero. Due to the time delay to show the hidden element in IE browser, grid content was set with 0px height and 0px width. This is  the reason for grid content is not displaying in IE browser.

If you are also facing the issue in the above scenario then we suggest you to refresh the scroller after rendering the grid.

Please refer to the below code example.

<div id="main" style="display:none">

<script type="text/javascript"> 

        $.ajax

                ({

                    url: "/Home/Productpartial",

                    type: 'GET',

                    success: function (data) {

                        $("#main").html(data);

                        $("#main").css('display', 'block');

                        var grid = $("#FlatGrid").ejGrid("instance");

                        grid._refreshScroller({requestType:'refresh'});

                    }

                });
</script>

Sample : http://www.syncfusion.com/downloads/support/forum/122076/ze/SampleApp_(2)1514500909

If we misunderstood your query, please share the hosted sample link it will help us to find out the root cause of the issue.

Regards,
Prasanna Kumar N.S.V

---

MA Manish February 24, 2016 07:12 AM UTC

Hi,

Thanks for all your support.
Issue resolved.
HATS OFF to Syncfusion Team

---

PK Prasanna Kumar Viswanathan Syncfusion Team February 25, 2016 04:15 AM UTC

Hi Manish,

We are happy to hear that your issue has been resolved.

Please let us know if you need any further assistance.

Regards,
Prasanna Kumar N.S.V

[Manish]

Hi Prasanna,

Does it required to set @Html.EJ().ScriptManager() on each page where the grid is?
I don't think it is required. This line is already there in my _layout.cshtml page.

This is snippet from my _layout.cshtml page:

 <div class="container body-content" id="xBody">
            @RenderBody()
        </div>
@Html.EJ().ScriptManager()

[Manish]

I am using

[Prasanna Kumar Viswanathan]

Hi Manish,

 

Query : “Does it required to set @Html.EJ().ScriptManager() on each page where the grid is?”

 

The main reason for referring the ScriptManager in _Layout file is that, it can be referred as common by all the View files present within your application. When we  rendering the Grid in partial view using ajax the ScriptManager will not referred for the partial view. So, we need to manually include the  scriptmanager for each partial view.

 

Kindly let me know whether you are having more number of partial view in your application if yes please explain the scenario of how you are using the partial view. So that we can provide you the appropriate solution.

               

Regards,

Prasanna Kumar N.S.V

[Manish]

Hi Prasanna,

Thanks for you support. As you instructed I am to display grid, it creates pager and rows also but I am unable to display text.
Please see the below screen shot.



On further investigation i observed that html string is building properly but not able to see this on screen.
Please see the screen shot below.



In this investigation I observed that this particular grid is not rendering properly on Internet Explorer 11.0 where as it is showing data / working in FireFox.
Please see the screen shot.



Can you please let me know what could be the issue?

[Prasanna Kumar Viswanathan]

Hi Manish,

We checked your screenshots and suspect that you are initializing the grid with the hidden element. After retrieved the data from the server using AJAX post you are displaying the grid. When we initialize the grid with the hidden element by enable the allowScrolling property, the width and height of the grid will be initialized as zero. Due to the time delay to show the hidden element in IE browser, grid content was set with 0px height and 0px width. This is  the reason for grid content is not displaying in IE browser.

If you are also facing the issue in the above scenario then we suggest you to refresh the scroller after rendering the grid.

Please refer to the below code example.

<div id="main" style="display:none">

<script type="text/javascript"> 

        $.ajax

                ({

                    url: "/Home/Productpartial",

                    type: 'GET',

                    success: function (data) {

                        $("#main").html(data);

                        $("#main").css('display', 'block');

                        var grid = $("#FlatGrid").ejGrid("instance");

                        grid._refreshScroller({requestType:'refresh'});

                    }

                });
</script>

Sample : http://www.syncfusion.com/downloads/support/forum/122076/ze/SampleApp_(2)1514500909

If we misunderstood your query, please share the hosted sample link it will help us to find out the root cause of the issue.

Regards,
Prasanna Kumar N.S.V

[Manish]

Hi,

Thanks for all your support.
Issue resolved.
HATS OFF to Syncfusion Team

[Prasanna Kumar Viswanathan]

Hi Manish,

We are happy to hear that your issue has been resolved.

Please let us know if you need any further assistance.

Regards,
Prasanna Kumar N.S.V