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.

LOading Grid via jQuery

Thread ID:

Created:

Updated:

Platform:

Replies:

108316 Apr 12,2013 04:42 PM Apr 18,2013 11:47 PM ASP.NET MVC (Classic) 5
loading
Tags: Grid
Tony Basallo
Asked On April 12, 2013 04:42 PM

It seems this issue comes up often. Not sure if its because there was a change in the new version or something else, but I get a javascript error: Uncaught ReferenceError: Syncfusion is not defined

I'm using:

$.ajax({
                type: "GET",
                url: "/garages/details/12",
                data: "",
                datatype: "html",
                success: function (data) {
                    $('#history).html(data);
                    $.fn.sfEvalScripts(data);
                }
            });
 
I am returning a PartialView that loads without issue if not done via jQuery. The content is hidden (infamous visible:hidden error).
 
So how do I get ot to work?

Johan Jacobs
Replied On April 16, 2013 03:10 AM

Hi,

I am currently evaluating the Syncfusion MVC toolkit but I am having the same problem with the grid, I cannot get it rendered using this AJAX call :

<script type="text/javascript">
function OnFindCarClick(sender, args) {
$.ajax({
type: "get",
url: "/Car/Dialog",
data: "",
datatype: "html",
success: function (result) {
$('#findCarDialogContainer')[0].innerHTML = result;
}
});
}
</script>

The controller code is as follows (it returns 1 row)  :

public ActionResult Dialog()
{
    var findCarViewModels = new CarDataContext().GetCarsForOverview();

    return PartialView(findCarViewModels);
}

Dialog.cshtml contains :

@using AllCar.Client.MVC.ViewModels.Car
@using Skins = Syncfusion.Mvc.Shared.Skins
@model IEnumerable<FindCarViewModel>

<head runat="server">
    <title>grid</title>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
</head>
<body>
<div id="findCarGrid">
@{
Html.Syncfusion()
   .Grid<FindCarViewModel>("FindCarGrid")
   .AutoFormat(Skins.Office2007Silver)
   .Datasource(Model)
   .EnablePaging()
   .EnableSorting()
   .Column(column =>
   {
   column.Add(c => c.ID).HeaderText("CarID");
   column.Add(c => c.LicensePlate).HeaderText("LicensePlate");
   }).Render();
}
</div>
@{Html.Syncfusion().ScriptManager().Combine(true).Minify(true).Render();}
</body>

This is the ActionResult I get after the call :

<head runat="server"> <title>grid</title> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> </head> <body> <div id="findCarGrid"> <link rel='nofollow' href="/MvcResourceHandler.axd?k=css&r=['-1072303604','1846849418','1821574357']&minify=true" id="GridOffice2007Silver" reg="0" rel="stylesheet" /> <script type="text/javascript"> if(typeof jQuery!='undefined'){ $(function(){ window.mvcResourceManger.registerScripts({scripts:['1314113550']}); })} </script> <script type="text/javascript"> if(typeof jQuery!='undefined'){ $(function(){ window.mvcResourceManger = new MvcResourceManger();window.mvcResourceManger.scriptPrefixUrl="/MvcResourceHandler.axd?k=js&r=";window.mvcResourceManger.cssPrefixUrl="/MvcResourceHandler.axd?k=css&r=";window.mvcResourceManger.minify="&minify=False";window.mvcResourceManger.registerCSS(['-1072303604','1846849418','1821574357'],true);window.mvcResourceManger.registerScripts({scripts:['1314113550']}); })} </script> <script type="text/javascript"> if(typeof jQuery!='undefined'){ $(function(){ var obj = $find('FindCarGridwaiting'); if(obj!=null){ obj.dispose(); obj = null; }$create(Syncfusion.Shared.Mvc.WaitingPopup, {"EnableHTML5":false,"Shape":"SquaresCircle","ShapeColor":null,"ShapeHeight":"50","ShapeWidth":"50","autoDisplay":false,"backgroundColor":"0","imageUrl":null,"popID":"FindCarGridwaiting","showImage":true,"targetId":"FindCarGrid","transparency":4}, null, null, $get("FindCarGridwaiting")); })}
</script>

<div id="FindCarGridwaiting" style="display : none;"><div id="FindCarGridwaiting_WaitingPopup_Panel" style="width: 100%;height: 100%;background-position: center center;opacity : 0.4; filter: alpha(opacity= 40); background-color:#edf7f8;"></div><img id="FindCarGridwaiting_WaitingPopup_Image" src="/MvcResourceHandler.axd?k=img&r=gbwjpbqMlCJ9MAp4aOJ5//p89Hibq6RCsmFGRuTOMiHM8WHgA5AdNgiRmcA6LuDq6mnQfmjF5d9wrRvK7lzHlNYKnmztoAj84UnyNm2qh8BrtXDE5O1tR33uY_YWdkMhjuQ8Kfm4BRX0BRHQvDE6Jg6VmqhJ4XVPiC_2ZlAZJCETWHyjUD9ZvWM1lSE320bjxAagJStMJShGAbbco/uxTa90UzeVyMTT" /></div><div class="Syncfusion-Grid-Core Syncfusion-Grid-Office2007Silver" id="FindCarGrid" style="visibility:hidden" tabindex="100"><div class="GridHeader"><div class="Hdr-widthSettings"><table cellspacing="0.25px" class="Table"><colgroup><col style="width:20px" /><col /><col /></colgroup><thead><tr class="HeaderBar"><th class="TopLeftCell"> </th><th class="HeaderCell"><div class="HeaderCellDiv">CarID</div></th><th class="HeaderCell"><div class="HeaderCellDiv">LicensePlate</div></th></tr></thead><tbody style="display:none"><tr><td></td><td></td><td></td></tr></tbody></table></div></div><div class="GridContent"><div><table cellspacing="0.25px" class="Table" id="FindCarGrid_Table"><colgroup><col style="width:20px" /><col /><col /></colgroup><tbody><tr><td class="RowHeader"><div> </div></td><td class="RowCell">1</td><td class="RowCell">1-ABC-123</td></tr></tbody></table></div></div><div class="GridPager"><div class="gridPagerContainer"><div class="FirstPageDisabled first"></div><div class="PrevPageDisabled prev" style="margin-left:2px"></div><a class="NextPrevItemDisabled Spacing PP">...</a><div class="NumericContainer" id="NumericContainer"><a class="CurrentItem NumericItem Spacing">1</a><a class="NumericItem Spacing">2</a><a class="NumericItem Spacing">3</a><a class="NumericItem Spacing">4</a><a class="NumericItem Spacing">5</a><a class="NumericItem Spacing">6</a><a class="NumericItem Spacing">7</a><a class="NumericItem Spacing">8</a><a class="NumericItem Spacing">9</a><a class="NumericItem Spacing">10</a></div><a class="Spacing NP">...</a><Div class="NextPageDisabled"></Div><Div class="LastPageDisabled" style="margin-left:2px"></Div><div class="RefreshPager" style="display:inline-block"></div></div><div class="ParentMsgBar" style="text-align:right"><span class="MsgBar" style="height:5px"></span></div></div></div>
<script type="text/javascript">
if(typeof jQuery!='undefined'){ $(function(){
window.mvcResourceManger.registerScripts({scripts:['-1062513930','-680387287','1524871607','2118969926','1556611223']});
})}

</script>

<script type="text/javascript">
if(typeof jQuery!='undefined'){ $(function(){
var obj = $find('FindCarGrid'); if(obj!=null){ obj.dispose(); obj = null; }$create(Syncfusion.Mvc.Grid.GridControl, {"ActionMode":0,"AddNewRowPosition":"Top","AllowAutoWrap":false,"AllowDeleting":false,"AllowDragnDrop":false,"AllowEditing":false,"AllowMergeCells":false,"AllowNew":false,"AllowPaging":true,"AllowRowsDragging":false,"AllowScrolling":false,"AllowSorting":true,"AutoFormat":2,"CloseOnEscape":true,"ColumnMinWidth":13,"Culture":"nl-NL","CurrentIndex":0,"Droppable":false,"ElementtoDrag":"","EnableExcelModeCheckBox":false,"EnableOnDemand":false,"EnableSelectionOnDragging":true,"EnableToolbar":false,"ExternalForm":{"TargetID":null,"Position":1},"GridEditMode":"Normal","GridServerActionMapper":"/Car/Dialog","HighlightwhileDrop":true,"ID":"FindCarGrid","IsTable":false,"LocalizedStrings":"{\"contextmenuvisiblecolumns\":\"Visible Columns\",\"contextmenupreviouspager\":\"Previous Pager\",\"filtergreaterthan\":\"Greater Than\",\"contextmenuhidecolumn\":\"Hide Column\",\"menudialogindicator\":\"...\",\"filtergreaterthanorequal\":\"Greater Than or Equal\",\"emptytext\":\"No records to display\",\"filterlessthan\":\"Less Than\",\"unboundeditmessage\":\"Do you want to continue editing?\",\"contextmenucleargrouping\":\"Clear Grouping\",\"toolbarexporttoexcel\":\"Export to Excel\",\"toolbarexporttopdf\":\"Export to PDF\",\"contextmenusortbydesc\":\"Sort in Descending Order\",\"contextmenugroupby\":\"Group By\",\"contextmenucollapse\":\"Collapse\",\"contextmenulastpage\":\"Last Page\",\"search\":\"Search\",\"filterand\":\"And\",\"editrecordcaption\":\"Edit Details of\",\"addnewrecord\":\"Add New Record\",\"contextmenusortbyasc\":\"Sort in Ascending Order\",\"filtercustom\":\"Custom Filter\",\"nomatchtext\":\"No Matches Found\",\"filtermatchcase\":\"Match Case\",\"filterlessthanorequal\":\"Less Than or Equal\",\"toolbareditrecord\":\"Edit Record\",\"buttoncancel\":\"Cancel\",\"integerfilters\":\"Number Filters\",\"contextmenunextpage\":\"Next Page\",\"gototext\":\"Goto\",\"contextmenufirstpage\":\"First Page\",\"filtervalidationerror\":\"Invalid Data\",\"pagertext\":\"Page : {0} of {1} ({2} items)\",\"customfiltercaption\":\"Show rows of\",\"contextmenusave\":\"Save Request\",\"textfilters\":\"Text Filters\",\"pagesizetext\":\"Change PageSize\",\"items\":\"Items\",\"filternotequal\":\"Not Equal\",\"toolbarexporttoword\":\"Export to Word\",\"contextmenuclearfilter\":\"Clear Filters\",\"buttonok\":\"OK\",\"toolbarcancelrequest\":\"Cancel Request\",\"datetimefilters\":\"DateTime Filters\",\"contextmenupreviouspage\":\"Previous Page\",\"unboundaddnewmessage\":\"Do you want to continue adding?\",\"contextmenunextpager\":\"Next Pager\",\"contextmenuaddrecord\":\"Add Record\",\"toolbarsaverecord\":\"Save Record\",\"contextmenucancel\":\"Cancel Request\",\"filterendswith\":\"Ends With\",\"buttonsave\":\"Save\",\"filterstartwith\":\"Starts With\",\"unbounddeletemessage\":\"Do you want to delete?\",\"filteror\":\"Or\",\"contextmenuexpand\":\"Expand\",\"bulkeditalert\":\"Unsaved changes will be lost. Are you sure you want to continue?\",\"groupdropareatext\":\"Drag a column header here to group its column\",\"nocellselectedalert\":\"No cells selected for performing editing operation\",\"contextmenueditrecord\":\"Edit Record\",\"filtercontains\":\"Contains\",\"contextmenudeleterecord\":\"Delete Record\",\"filterselectall\":\"Select All\",\"contextmenuclearsorting\":\"Clear Sorting\",\"filterequal\":\"Equal\",\"contextmenurefreshpager\":\"Refresh Pager\",\"filterblank\":\"Blank\",\"filterclear\":\"Clear Filters\",\"toolbardeleterecord\":\"Delete Record\"}","PagerPosition":"BottomLeft","PagerStyle":"Default","PrimaryKeys":[],"ResizeSettings":{"ResizeToFit":false,"ClipContent":false},"RowsDraggingMode":0,"SaveOnEnter":true,"Skin":"Syncfusion-Grid-Office2007Silver","SliderWidth":300,"TargetHtmlElementId":"","TextboxWidth":35,"TimeSpan":5000,"TotalRecordsCount":1,"VisibleColumns":"[{\"Name\":\"ID\",\"Member\":\"ID\",\"type\":\"Int64\",\"HeaderText\":\"CarID\",\"FormatText\":\"\",\"JqueryFormat\":\"\",\"Visible\":true,\"CssName\":null,\"Width\":-1,\"AllowFilter\":false,\"TemplateColumn\":false,\"TemplateName\":null,\"AllowEditing\":false,\"ResizeSettings\":true,\"AllowAutoWrap\":true,\"AllowSearching\":true,\"IsUnbound\":false,\"TextAlign\":0,\"AllowContextMenu\":true,\"DropDownDataSource\":null,\"DataTextField\":\"\",\"DataValueField\":\"\",\"HtmlEncode\":false,\"IsNullable\":false,\"GridCommands\":\"\"},{\"Name\":\"LicensePlate\",\"Member\":\"LicensePlate\",\"type\":\"String\",\"HeaderText\":\"LicensePlate\",\"FormatText\":\"\",\"JqueryFormat\":\"\",\"Visible\":true,\"CssName\":null,\"Width\":-1,\"AllowFilter\":false,\"TemplateColumn\":false,\"TemplateName\":null,\"AllowEditing\":false,\"ResizeSettings\":true,\"AllowAutoWrap\":true,\"AllowSearching\":true,\"IsUnbound\":false,\"TextAlign\":0,\"AllowContextMenu\":true,\"DropDownDataSource\":null,\"DataTextField\":\"\",\"DataValueField\":\"\",\"HtmlEncode\":false,\"IsNullable\":false,\"GridCommands\":\"\"}]","WebService":null,"rowsDroppingMapper":""}, null, null, $get("FindCarGrid"));

})}

</script>


</div>

<script type="text/javascript">
if(typeof jQuery!='undefined'){ $(function(){
window.mvcResourceManger.registerScripts({scripts:[]});
})}

</script>


</body>

The model contains 1 row and when hitting the breakpoint in the view, I can see that the grid is being populated with that record. As a test I setup the same grid in a view being called via MVC RenderAction and then the grid gets rendered without a problem.
What am I doing wrong here ???

Thanks for your support !

Regards,

Johan

Ranjithkumar R G [Syncfusion]
Replied On April 16, 2013 04:30 AM

 

Hi Tony,

 

Thanks for using Syncfusion products.

 

We have updated your query regarding ‘Grid invisible in ajax post’ in incident  #107046. Please follow up with that for further reference.

 

Regards,

Ranjithkumar


Ranjithkumar R G [Syncfusion]
Replied On April 16, 2013 04:32 AM

Hi Johan,

 

Thanks for your  interest in Syncfusion products.

 

We would like to let you know that your reported issue has been fixed already . We suggest you to create an incident using your Direct Track account to receive the patch for your reported issue.

 

Regards,

Ranjithkumar


Johan Jacobs
Replied On April 16, 2013 06:30 AM

okay, thanks for the quick support !
Incident has been created !

Regards,

Johan

Ranjithkumar R G [Syncfusion]
Replied On April 18, 2013 11:47 PM

Hi Johan,

 

Thanks for your update.

 

We suggest you to follow up with the incident for further reference.

 

Please let us know if you have any concern.

 

Regards,

Ranjithkumar


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.

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.

;