Syncfusion controls and jQuery.load()

[Georgi Kashev]

Hi,

I am trying to build an application with one active page that will load and display other pages in a container div. I managed to do that with jQuery ajax support ($.get, .load). It works great till I try to load a page that contains a Syncfusion grid. The grid is simple not shown. It is there in the source but the div visibility is still hidden. It seems that the script used to show the div is not run.
Furthermore if I try to load the same page again a script error occurs complayning that it can't find the mvcScriptManager...

Can you provide a sample of how to do this.

Regards,
Georgi Kashev

[Eswari S]

Hi Georgi,

Thanks for your interest with Syncfusion products.

We have provided response to your query in the incident 81632.

Could you please follow up with the incident.

Please let us know if you have any queries.

Regards,
Eswari.S

[Dilip Gangurde]

Hi,

I am also facing same issue and looking for solution. Can you please let me know how to go to incident  81632

[Pon Selva Jeganathan]

Hi Dilip,

 

Thanks for contacting syncfusion forum.    

 

Based on your query, we suggest you follow the below steps,

 

Step #1: [aspx]

<%= Html.Syncfusion().Tab("myTab")

.AutoFormat(Skins.Blueberry).ClientSideOnSelect("onselect") //ClientSideOnSelect event is called for tab click event.

%>

 

<div id="tools">

<% Html.RenderPartial("GenericDropdown",Model); %> // GenericDropdown is loaded into the first tab.

</div>

<div id="grid"> // Initally grid will be empty.

 

</div>

</div>

Step #2: $.ajax function to load the grid

Initially the grid will be empty ,after $.ajax call the grid loads into another div element.

<script type="text/javascript">

  function onselect() {

  $.ajax(

  {

  url: "Home/Grid",

  type: "GET",

  success: function (data) {

  $("#grid")[0].innerHTML = data; //grid data is assigned to the innerHTML.

  $.fn.sfEvalScripts(data); //SfEvalScripts evaluates the all scripts in ajaxcall result

  }

  }

  );

  }

  </script>

 

 

Step #3: $.ajax call redirected to the Grid action.

[Controller]
public ActionResult Grid()

{

var data = SqlCE.Categories.ToList();

 

return PartialView("Grid",data);

}

 

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Grid(PagingParams args)

{

var data = SqlCE.Categories.ToList();

 

return data.GridActions<Categories>();

}

 

Step #4: [grid.ascx]

<%=Html.Syncfusion().Grid<Test_GenericDropDown_2010.Models.Categories>("FlatGrid")

.Datasource(this.Model)

.Column(col=>{

col.Add(c => c.CategoryID);

col.Add(c => c.CategoryName);

col.Add(c => c.Description);

})

.EnablePaging()

.EnableSorting()

 

%>

 

Please refer to the below sample,

Test_GenericDropdown666867211.zip

If the above solution does not meet your requirement kindly share the detailed explanation of your requirement, and video demo/screenshot of your requirement and share the grid code example.

 

Kindly get back to us for further assistance.

Regards,

Pon selva