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. Image for the cookie policy date

Syncfusion controls and jQuery.load()

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


3 Replies

ES Eswari S Syncfusion Team June 21, 2011 07:21 AM UTC

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



DG Dilip Gangurde replied to Eswari S July 8, 2022 07:30 AM UTC

Hi,


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



PS Pon Selva Jeganathan Syncfusion Team July 14, 2022 03:39 AM UTC

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 gridInitially 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


Loader.
Live Chat Icon For mobile
Up arrow icon