LOading Grid via jQuery

5 Replies
3 Participants

Created by
TB Tony Basallo

Platform
ASP.NET MVC (Classic)

Platform
ASP.NET MVC (Classic)

Control
Grid

Created On
Apr 12, 2013 08:42 PM UTC

Last Activity On
Apr 19, 2013 03:47 AM UTC

Want to subscribe?
SIGN IN

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?

5 Replies

JJ Johan Jacobs April 16, 2013 07:10 AM UTC

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 :

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>

<body>

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

RR Ranjithkumar R G Syncfusion Team April 16, 2013 08:30 AM UTC

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

RR Ranjithkumar R G Syncfusion Team April 16, 2013 08:32 AM UTC

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

JJ Johan Jacobs April 16, 2013 10:30 AM UTC

okay, thanks for the quick support !

Incident has been created !

Regards,

Johan

RR Ranjithkumar R G Syncfusion Team April 19, 2013 03:47 AM UTC

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

5 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
TB Tony Basallo
Platform
ASP.NET MVC (Classic)
Control
Grid
Created On
Apr 12, 2013 08:42 PM UTC
Last Activity On
Apr 19, 2013 03:47 AM UTC

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

LOading Grid via jQuery

Enterprise Solutions

Free Products

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

LOading Grid via jQuery