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() %> |