1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to render Grid by javascript code

How to render Grid by javascript code

I mean that I get data from database and want to dynamically generate Grid in "cshtml" file.

 $.ajax({
            type: "GET",
            url: '@Url.Action("GetQuestionFollowList", "Home")',
            data: { from: start, to: end, Team: team },
            success: function (data) {
                
                var gridProperties = JSON.parse(data);
                
                   
                for (var i = 0; i < gridProperties.length; i++) {
                    (function (i) {
                        setTimeout(function () {
                            var element = document.createElement("div");
                            element.id = "grid" + i;
                            document.getElementById('grid').appendChild(element);
                            $("#grid" + i).ejGrid(gridProperties[i]);
                        }, 100 * i);
                    })(i);
                }
            },
            error: function (obj) {
               
            }
        });

public async Task GetQuestionFollowList(DateTime from, DateTime to, string Team)
        {
            List gridlist = new List();
            SqlHelper.SQL.DefaultConnectionString = sqlconn;
            var result = await SqlHelper.SQL.ExecuteProcedureAsync("GetFollowUpQuestions",
                new List() {new System.Data.SqlClient.SqlParameter("@Team",Team),
                                                                new System.Data.SqlClient.SqlParameter("@from",from),
                                                                new System.Data.SqlClient.SqlParameter("to",to)
                });
            List ls = new List();
            foreach (DataRow row in result.Rows)
            {
                ls.Add(new QuestionViewModel() { QuestionId=row["questionid"].ToString(),CreationDate=row["CreationDate"].ToString(),Link=row["Link"].ToString(),CommentOwnerId=row["commentOwnerId"].ToString()});
            }

            GridProperties gridModel = new GridProperties();
            InitializeGrid(gridModel,ls);
            gridlist.Add(gridModel);
           Grid> grid = new Grid>();
            
            return Json(grid.Serialize(gridlist));
        }

        private void InitializeGrid(GridProperties gridModel,List ls)
        {
            gridModel.DataSource = ls;
            gridModel.AllowPaging = true;
            gridModel.AllowMultipleExporting = true;
        }

4 Replies
TI Timo May 10, 2018 02:40 AM UTC

Could anyone help me on this issue?

SE Sathyanarayanamoorthy Eswararao Syncfusion Team May 10, 2018 01:39 PM UTC

Hi Xavier, 

Thanks for contacting Syncfusion support. 

According to your query we suspect that you want to set all the properties of Grid on server side and render the grid in success event of an ajax post in the view page. We have achieved your requirement in the below example. 

Refer the below code example. 

      
[cshtml file] 
 
<div id="Grid"> </div> 
 
<script> 
 
    $(function () { 
        $.ajax({ 
            type: "POST", 
            url: "/Home/DataSource", 
            datatype: "json", 
            contentType: "application/json; charset=utf-8", 
            success: function (data) { 
                
                var proxy = ej.parseJSON(data.gridModel1); 
 
                proxy.dataSource = data.datasource; 
 
                    setTimeout(function () { 
 
                        $("#Grid").ejGrid( 
                          proxy 
                      ); 
                    },1);                     
            } 
        }); 
    }); 
</script> 
 
[Controller.cs] 
 
public class HomeController : Controller 
    { 
        List<Orders> order = new List<Orders>(); 
 
        public ActionResult DataSource() 
        { 
 
            int code = 10000; 
            for (int i = 1; i < 10; i++) 
            { 
                order.Add(new Orders(code + 1, "TOMSP", i + 0, 2.3 * i, "Münster", "Toms Spezialitäten", new DateTime(1991, 05, 15), "Germany", "44087", false)); 
                 
 
                          …... 
 
               code += 5; 
            } 
            var datasource = order; 
 
            GridProperties gridModel = new GridProperties(); 
 
            InitializeGrid(gridModel, datasource); 
 
            SerializeObject serialize = new SerializeObject(); 
 
            object  gridModel1 = serialize.SerializeToJson(gridModel); 
 
 
            return Json(new { gridModel1, datasource }); 
        } 
 
 
        private void InitializeGrid(GridProperties gridModel, List<Orders> ls) 
        { 
            gridModel.AllowPaging = true; 
            gridModel.AllowMultipleExporting = true; 
        } 
 
 

In the above code example we have passed the serialized grid model and dataSource to the client side and rendered the grid using those properties in the success event of an ajax post. 

We have prepared a sample for your convenience which can be downloaded from the below location. 


If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 


TI Timo May 11, 2018 09:34 AM UTC

Hi Sathyanarayanamoorthy Eswararao,

Thanks. It works well now. 

But the content of one column is '<a>http://www.xxxx.com</a>', I found I cannot click and open this link in a new page.

How to solve it?

Best Regards,
Xavier

SE Sathyanarayanamoorthy Eswararao Syncfusion Team May 15, 2018 12:59 PM UTC

Hi Xavier, 

According to your requirement we suspect that you need to place anchor tag in the content of the column. In your code example we found that you have used anchor tag without rel='nofollow' href attribute. So, without rel='nofollow' href attribute it cannot navigate to anywhere.  

For more information, refer the below link 


If you want to navigate to other pages we suggest you to define rel='nofollow' href attribute in the content.  

Find the code example:  


public ActionResult DataSource() 
        { 
 
            int code = 10000; 
            for (int i = 1; i < 10; i++) 
            { 
                order.Add(new Orders(code + 1, "TOMSP", i + 0, 2.3 * i, "Münster", "<a rel='nofollow' href='http://syncfusion.com'>Toms Spezialitäten</a>", new DateTime(1991, 05, 15), "Germany", "44087", false)); 
                6000", false)); 
              ------------------- 
               code += 5; 
            } 
 
            --------- 
 
 
            return Json(new { gridModel1, datasource }); 
        } 

For your convenience we have attached the sample and please download the sample from the following link 


Regards, 
Sathyanarayanamoorthy 



Loader.
Up arrow icon