Hello Dimitar,
Thank you very much for the answer, My _Layout page is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("New Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container-fluid body-content">
<div id="jqxMainLayout">
<div id="divSideBar">some content here</div>
<div id="jqxInnerLayout">
<!--The panel content divs can have a flat structure-->
<!--autoHideGroup-->
<div data-container="ToolboxPanel">
@Html.Partial("_MenuPage")
</div>
<div data-container="HelpPanel">
Help topics
</div>
<!--documentGroup-->
<div data-container="Document1Panel">
@RenderBody()
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<!--bottom tabbedGroup-->
<div data-container="ErrorListPanel">
<footer>
<p>© @DateTime.Now.Year - Skillworks Technologies Private Limited</p>
</footer>
</div>
<!--right tabbedGroup-->
<div data-container="SolutionExplorerPanel">
<div id="solutionExplorerTree" style="border: none;">
</div>
</div>
<div data-container="PropertiesPanel">
</div>
<!--floatGroup-->
<div data-container="OutputPanel">
<div style="font-family: Consolas;">
<p>
Themes installation complete.
</p>
</div>
</div>
</div>
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqxwidgets")
@RenderSection("scripts", required: false)
<script type="text/javascript">
var layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
width: 900,
minWidth: 550,
height: 700,
minHeight: 400,
items: [{
type: 'documentGroup',
width: '12%',
minWidth: 100,
height: '100%',
minHeight: 400,
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'ToolboxPanel'
}]
}, {
type: 'layoutGroup',
orientation: 'vertical',
width: '70%',
items: [{
type: 'documentGroup',
height: '70%',
minHeight: 300,
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}]
}, {
type: 'tabbedGroup',
height: '30%',
pinnedHeight: 30,
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}]
}]
}, {
type: 'tabbedGroup',
width: '18%',
minWidth: 200,
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
$(document).ready(function () {
$('#jqxInnerLayout').jqxLayout({ width: 968, height: 700, layout: layout });
// $('#jqxInnerLayout').jqxDockingLayout({ width: 968, height: 700, layout: layout });
});
</script>
</body>
</html>
Which will be in the Shared folder. Next is a view called items.
@model IEnumerable<MyProject.Models.item>
@{
ViewBag.Title = "Index Page";
}
//I also tried referring to the scripts here again, as somebody suggested I tried to put them in another partial page and called it here.
@section scripts{
<script type="text/javascript">
$(document).ready(function () {
var url = "items/getItems";
// prepare the data
var itemtypesource = @Html.Raw(Json.Encode(@ViewBag.PossibleitemTypes));
var iTsource =
{
datatype:"json",
datafields: [
{name: 'itemTypeId', type: 'int'},
{name: 'typeName', type:'string'}
],
id: 'itemTypeId',
localdata: itemtypesource
}
var ITAdapter = new $.jqx.dataAdapter(iTsource, {
autoBind: true, id: 'itemTypeId'
});
var source =
{
datatype: "json",
datafields: [
{ name: 'itemId', type: 'int' },
{ name: 'itemName', type: 'string' },
{ name: 'itemCode', type: 'string' },
{ name: 'itemTypeId', value:'itemTypeId', values:{ source: ITAdapter.records, value:'itemTypeId', name:'typeName'}}
],
id:'itemId',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source , {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
})
// alert('here3');
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 650,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'Item Type', columntype:'dropdownlist', datafield: 'itemTypeId', width: 250,
initeditor : function(row,cellvalue,editor,celltext,cellwidth,cellheight){
editor.jqxDropDownList({source: ITAdapter,displayMember:'typeName', valueMember:'itemTypeId'})}},
{ text: 'Item Id', columngroup: 'Item', datafield: 'itemId', width: 100 },
{ text: 'Item Name', columngroup: 'Item', datafield: 'itemName', cellsalign: 'right', align: 'right', width: 200 },
{ text: 'Item Code', columngroup: 'Item', datafield: 'itemCode', align: 'right', cellsalign: 'right', width: 100 }
],
columngroups: [
{ text: 'Item Types', align: 'center', name: 'ItemType' },
{ text: 'Item Details', align: 'center', name: 'Item' }
]
});
// alert('here4');
});
</script>
}
<h3>Items</h3>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;width:100%">
<div id="jqxgrid">
</div>
</div>
What I tried already is:
1. These things separately works fine. (May be I’ve made few changes in _layout page)
2. Adding Script references in both _layout and Index pages after removing the bundling in bundleconfig.
3. Adding them to a different page and call it through RenderPartial, etc.
So when this master page (layout page) loads the index page of items, it renders at the place @Renderbody. And this section is inside the documentlayout of a layout.
