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.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127055 Oct 24,2016 01:05 AM UTC Oct 27,2016 06:40 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Stephen Harris
Asked On October 24, 2016 01:05 AM UTC

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 [Syncfusion]
Replied On October 24, 2016 01:10 PM UTC

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. 


Please let us know if you have any queries. 
  
Regards, 
Madhu Sudhanan P 


Ramya Jayapandi [Syncfusion]
Replied On October 25, 2016 04:36 AM UTC

From: Stephen Harris 
Sent: Tuesday, October 25, 2016 12:11 AM
To: Syncfusion Support <support@syncfusion.com>
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 [Syncfusion]
Replied On October 27, 2016 06:40 AM UTC

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 


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.

Warning Icon 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.Close Icon

;