render $("#Grid").ejGrid as script from a ApiController

[Stephen Harris]

I am using a remote web API services that I want to return an entire grid and render it on a View.  I have created a <div> on the View where I want the $("#Grid").ejGrid to be rendered.  The best I  can get is to have it render as a HTML string but not as a control.  Any ideas?

The controller method, below, is returning the string to the View successfully:

        private System.Web.HtmlString CreateClientSideGrid()

        {

            string gridStr = string.Empty;

            List<string> gridLineX = new List<string>();

            gridLineX.Add("$(" + AddDoubleQuotes("#Grid") + ").ejGrid({");

            gridLineX.Add("allowPaging: true,");

            gridLineX.Add("columnLayout: ej.Grid.ColumnLayout.Fixed,");

            gridLineX.Add("columns: [");

            gridLineX.Add("{ field: " + AddDoubleQuotes("LastName") + ", headerText: " + AddDoubleQuotes("Last Name") + " },");

            gridLineX.Add("{ field: " + AddDoubleQuotes("AcrNumber") + ", headerText: " + AddDoubleQuotes("Last Name") + " },");

            gridLineX.Add("{ field: " + AddDoubleQuotes("DoB") + ", headerText: " + AddDoubleQuotes("Date of Birth") + " },");

            gridLineX.Add("{ field: " + AddDoubleQuotes("tifURI") + ", headerText: " + AddDoubleQuotes("TIF Image") + " ,  template: true, templateID: " + AddDoubleQuotes("#columnTemplate") + ", width: 900, height: 450}");

            gridLineX.Add("]");

            gridLineX.Add("});");

            for (int i = 0; i < 10; i++)

            {

                gridStr += gridLineX[i].ToString();

            }

            System.Web.HtmlString htmlString = new System.Web.HtmlString(gridStr);

            return htmlString;

        }

The View method, below,  is run following a @Html.EJ().Button click event. All this works, its just the rendering of the grid on the View that is the problem. Note that #TestGrid is the div where I an trying to get the control to render:

        function BuildGrid() {

            var url = "http://localhost:40362/api/GridBuilder/1";

            $.ajax({

                url: url,

                type: 'GET',

                success: function (gridResults) {

                    $('#TestGrid').html(gridResults.val);

                },

                error: function (error) {

                   alert("Error: " + error);

            }

          }); 

        

The API Controller method is returning the following string.  I paste this in the View method and it renders the grid:

$("#Grid").ejGrid({allowPaging: true,columnLayout: ej.Grid.ColumnLayout.Fixed,columns: [{ field: "LastName", headerText: "Last Name" },{ field: "AcrNumber", headerText: "Last Name" },{ field: "DoB", headerText: "Date of Birth" },{ field: "tifURI", headerText: "TIF Image" ,  template: true, templateID: "#columnTemplate", width: 900, height: 450}]});

[Madhu Sudhanan P]

Hi Stephen, 

Thanks for contacting Syncfusion support. 

We have analyzed the provided code example and it is not a recommended way to generate the Grid rendering code manually. We suggest you to use partial view to render the Grid using HTML Helpers and return the AJAX request as follows. 

[Partial View- "GridPartial"] 

@using Exporting_MVC.Models; 

 

@(Html.EJ().Grid<OrdersView>("PartialGrid") 

           .Datasource((IEnumerable<OrdersView>)Model) 

           .AllowPaging()            

           .Columns(col => { 

               col.Field(o => o.OrderID).HeaderText("Order ID").Width(70).TextAlign(TextAlign.Right).Add(); 

            . . .  . 

           })) 

 

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

The below function will return the partial view with Grid. 

[ActionResult] 

public ActionResult LoadGrid() 

{ 

        var model = new NorthwindDataContext().OrdersViews.ToList(); 

        return PartialView("_GridPartial", model); 

} 

Now the above action result can be accessed using AJAX as follows. 

[AJAX ] 

$.ajax({ 

            url: url, //LoadGrid.. 

            type: 'GET', 

            success: function (gridResults) { 

                $('#TestGrid').html(gridResults); 

            }, 

            error: function (error) { 

                alert("Error: " + error); 

            } 

        }); 

For more information on using Grid with partial view, please refer to the below help link. See the Working with Partial View section in the below link. 

https://help.syncfusion.com/aspnetmvc/grid/how-to 

Please let us know if you have any queries. 

  

Regards, 

Madhu Sudhanan P 

[Ramya Jayapandi]

From: Stephen Harris 
Sent: Tuesday, October 25, 2016 12:11 AM
To: Syncfusion Support <[e-mail]>
Subject: RE: Syncfusion support community forum 127055, render $(&quot;#Grid&quot;).ejGrid as script from a ApiController, has been updated. 

I can’t use a partial view because the application that is rendering the grid knows nothing about its content -  it’s columns, data etc.  It finds out about this in the html that is returned to it via a remote web API server.  This means I want to turn a HTML string such as ‘$("#GridDetail").ejGrid({ allowPaging: true, columnLayout: ej.Grid.ColumnLayout.Fixed, columns: [{ field: "Id", headerText: "Id" }, { field: "tifURI", headerText: "TIF Image", template: true, templateID: "#columnTemplate", width: 1000, height: 400 }] });’ into an eGrid control in the success function of the Ajax call. In other words, I want to create the whole eGrid control out of html. I have tried several jQuery functions such as $("#GridDetail").html(gridResults); and $("#GridDetail").append('<div>' + grid1 + '</div>'); but all they do is render on the view as a html string.  Note that I can use these jQuery functions to render Html elements without problem.   

 

Any suggestions? 

[Madhu Sudhanan P]

Hi Stephen, 

The Script content will be activated once it is placed inside a SCRIPT element, but in your case, it is placed inside a DIV element which is the cause of the issue. And hence please place the returned control string inside a script element as follows. 

 

<div id='target'> 

    <div id='Grid'></div> 

    <script></script> //Place the content here. 

</div> 

$.ajax({ 

       . . . .  

     success: function (e) { 

                $('#target').find('script').html(e); 

            } 

        }); 

Please let us know if you have any queries. 

Regards, 

Madhu Sudhanan P