Dayana Maliyakal
Top achievements
Rank 1
Rank 1
Dayana Maliyakal
asked on 29 May 2014, 05:51 AM
Hi Telrik Team,
I have a following function:
function RelateItemsOpenWindow() {
var ProjectID = document.getElementById('hfProjectID').value;
var window = $("#RelateItemWindow").data("kendoWindow");
window.refresh({
url: '/test1/Index/',
data: { ProjectID: ProjectID }
});
window.open().center();
window.title("Add Related Items");
}
<input type="image" title="Relate Items" id="imgNonRelatedItems"
onclick="return RelateItemsOpenWindow(); return false;" />
test1 controller contains a grid
Grid is displayed in the first time.But grid paging is not working.
How to resolve this problem?
With regards
Dayana
I have a following function:
function RelateItemsOpenWindow() {
var ProjectID = document.getElementById('hfProjectID').value;
var window = $("#RelateItemWindow").data("kendoWindow");
window.refresh({
url: '/test1/Index/',
data: { ProjectID: ProjectID }
});
window.open().center();
window.title("Add Related Items");
}
<input type="image" title="Relate Items" id="imgNonRelatedItems"
onclick="return RelateItemsOpenWindow(); return false;" />
test1 controller contains a grid
Grid is displayed in the first time.But grid paging is not working.
How to resolve this problem?
With regards
Dayana
5 Answers, 1 is accepted
0
Hello Dayana,
The provided information indicates a Javascript error on the page. The exact reason for it is unclear, but as far as Kendo UI is concerned, you can check the following:
+ if the Window uses an iframe, the nested page should include all required scripts
http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies
+ If the Window does not use an iframe, then the nested partial view should not include duplicate jQuery or Kendo UI scripts
http://docs.telerik.com/kendo-ui/getting-started/web/window/overview#using-iframes
http://docs.telerik.com/kendo-ui/getting-started/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined
Regards,
Dimo
Telerik
The provided information indicates a Javascript error on the page. The exact reason for it is unclear, but as far as Kendo UI is concerned, you can check the following:
+ if the Window uses an iframe, the nested page should include all required scripts
http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies
+ If the Window does not use an iframe, then the nested partial view should not include duplicate jQuery or Kendo UI scripts
http://docs.telerik.com/kendo-ui/getting-started/web/window/overview#using-iframes
http://docs.telerik.com/kendo-ui/getting-started/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dayana Maliyakal
Top achievements
Rank 1
Rank 1
answered on 30 May 2014, 06:00 AM
Hi Telerik Team,
Thank you for your reply.
My issue is still there.
Actually the grid paging is working if it is placed in a view or partial view.The problem occures when this view is binding on a window.
Here using script function
function test()
{
var grid = $('#rgNonRelatedItems').data('kendoGrid');
alert(grid);
}
alert message is as invalid
Please check my code
<head>
<meta name="viewport" content="width=device-width">
<title>ProjectHome</title>
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate-vsdoc.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet">
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet">
<link href="/Content/istyle.css" rel="stylesheet">
<link href="/Content/iteam.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">
<link href="/Content/SiteMain.css" rel="stylesheet">
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>//this script is used for checkbox event firing
<style type="text/css">
html, body, form {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
function ParametersForNonRelatedItems() {
return {
ProjectID: ProjectID
}
}
</head>
ucDetails.cshtml
<input type="image" src="../../Images/relateditem.gif" title="Relate Items" id="imgNonRelatedItems"
onclick="return testWindow();" />
function testWindow() {
var ProjectID = document.getElementById('hfProjectID').value;
var window = $("#RelateItemWindow").data("kendoWindow");
window.refresh({
url: '/RelateItemMapping/RelateItemMapping/',
data: { ProjectID: ProjectID }
});
window.open().center();
window.title("Add Related Items");
}
RelateItemMapping.cshtml
@{Html.RenderAction("ucRelateItemMapping", "ucRelateItemMapping");}
ucRelateItemMapping.cshtml
@(Html.Kendo().Grid(Model.RelatedItemMapping.GetNonRelatedItemList(Convert.ToInt32(ViewData["ProjectID"]), Convert.ToInt32(ViewData["ProjectItemID"]), "1,2,3,4,5,7"))
.Name("rgNonRelatedItems")
//.DataKeys(dataKeys => dataKeys.Add(model => model.RelatedItemID))
.Columns(columns =>
{
columns.Template(
@<text>
<input type='checkbox' id='chkSelect' />
</text>)
.Title("<input type='checkbox' id='chkSelectAll'/>")//To get clientselect column format
.Width("5%")
.HeaderHtmlAttributes(new { Style = "width:5%;" })
//ClientTemplate for ajax binding.It will not bind initially(ie:if not used ajax initialy)
.ClientTemplate("<input type='checkbox' id='chkSelect'/>");
columns.Template(
@<text>
<label id="ProjectItemID" style="visibility: hidden;">@(item.ItemID)</label>
<label id="lblItem">@(item.Item)</label>
</text>)
.Title("Name")
.Width("20%")
.HeaderHtmlAttributes(new { Style = "width:20%;" })
.HtmlAttributes(new { Style = "white-space:nowrap;" })
//ClientTemplate for ajax binding.It will not bind initially(ie:if not used ajax initialy)
//instead of '%' symbol we used '#' here(ie: <#= Item #>)
.ClientTemplate(
"<label><#= Item #></label>"
);
columns.Bound(model => model.ProjectName)
.HeaderHtmlAttributes(new { Style = "width:20%" })
.Title("Project")
.Width("20%");
})
.HtmlAttributes(new { style = "width:99.8%" })
.Selectable()
// .Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
//.ButtonCount(5)
)
.Scrollable(scrolling => scrolling.Height(450))
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resizing => resizing.Columns(true))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("BindNonRelatedItems", "ucRelateItemMapping")//To refresh grid
.Data("ParametersForNonRelatedItems")
)
)
On executing page page is displayed as follows:
{"Data":[{"ProjectID":0,"IsMaster":false,"EnteredBy":"","ItemStatusID":"","RelationID":0,"RelationTypeID":0,"RelationDefinitionID":0},
Thank you for your reply.
My issue is still there.
Actually the grid paging is working if it is placed in a view or partial view.The problem occures when this view is binding on a window.
Here using script function
function test()
{
var grid = $('#rgNonRelatedItems').data('kendoGrid');
alert(grid);
}
alert message is as invalid
Please check my code
<head>
<meta name="viewport" content="width=device-width">
<title>ProjectHome</title>
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate-vsdoc.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet">
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet">
<link href="/Content/istyle.css" rel="stylesheet">
<link href="/Content/iteam.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">
<link href="/Content/SiteMain.css" rel="stylesheet">
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>//this script is used for checkbox event firing
<style type="text/css">
html, body, form {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
function ParametersForNonRelatedItems() {
return {
ProjectID: ProjectID
}
}
</head>
ucDetails.cshtml
<input type="image" src="../../Images/relateditem.gif" title="Relate Items" id="imgNonRelatedItems"
onclick="return testWindow();" />
function testWindow() {
var ProjectID = document.getElementById('hfProjectID').value;
var window = $("#RelateItemWindow").data("kendoWindow");
window.refresh({
url: '/RelateItemMapping/RelateItemMapping/',
data: { ProjectID: ProjectID }
});
window.open().center();
window.title("Add Related Items");
}
RelateItemMapping.cshtml
@{Html.RenderAction("ucRelateItemMapping", "ucRelateItemMapping");}
ucRelateItemMapping.cshtml
@(Html.Kendo().Grid(Model.RelatedItemMapping.GetNonRelatedItemList(Convert.ToInt32(ViewData["ProjectID"]), Convert.ToInt32(ViewData["ProjectItemID"]), "1,2,3,4,5,7"))
.Name("rgNonRelatedItems")
//.DataKeys(dataKeys => dataKeys.Add(model => model.RelatedItemID))
.Columns(columns =>
{
columns.Template(
@<text>
<input type='checkbox' id='chkSelect' />
</text>)
.Title("<input type='checkbox' id='chkSelectAll'/>")//To get clientselect column format
.Width("5%")
.HeaderHtmlAttributes(new { Style = "width:5%;" })
//ClientTemplate for ajax binding.It will not bind initially(ie:if not used ajax initialy)
.ClientTemplate("<input type='checkbox' id='chkSelect'/>");
columns.Template(
@<text>
<label id="ProjectItemID" style="visibility: hidden;">@(item.ItemID)</label>
<label id="lblItem">@(item.Item)</label>
</text>)
.Title("Name")
.Width("20%")
.HeaderHtmlAttributes(new { Style = "width:20%;" })
.HtmlAttributes(new { Style = "white-space:nowrap;" })
//ClientTemplate for ajax binding.It will not bind initially(ie:if not used ajax initialy)
//instead of '%' symbol we used '#' here(ie: <#= Item #>)
.ClientTemplate(
"<label><#= Item #></label>"
);
columns.Bound(model => model.ProjectName)
.HeaderHtmlAttributes(new { Style = "width:20%" })
.Title("Project")
.Width("20%");
})
.HtmlAttributes(new { style = "width:99.8%" })
.Selectable()
// .Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
//.ButtonCount(5)
)
.Scrollable(scrolling => scrolling.Height(450))
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resizing => resizing.Columns(true))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("BindNonRelatedItems", "ucRelateItemMapping")//To refresh grid
.Data("ParametersForNonRelatedItems")
)
)
On executing page page is displayed as follows:
{"Data":[{"ProjectID":0,"IsMaster":false,"EnteredBy":"","ItemStatusID":"","RelationID":0,"RelationTypeID":0,"RelationDefinitionID":0},
0
Hello Dayana,
The provided information still does not answer the following questions, which are important in resolving the issue:
1. Are there Javascript errors on the page?
2. Does the Kendo UI Window use an iframe or not?
3. If it does use an iframe, are all required scripts included? If it does not use an iframe, is the view inside the Window truly partial, i.e. no jQuery and Kendo UI script files should be registered again?
Regards,
Dimo
Telerik
The provided information still does not answer the following questions, which are important in resolving the issue:
1. Are there Javascript errors on the page?
2. Does the Kendo UI Window use an iframe or not?
3. If it does use an iframe, are all required scripts included? If it does not use an iframe, is the view inside the Window truly partial, i.e. no jQuery and Kendo UI script files should be registered again?
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dayana Maliyakal
Top achievements
Rank 1
Rank 1
answered on 30 May 2014, 06:47 AM
[quote]Dimo said:Hello Dayana,
The provided information still does not answer the following questions, which are important in resolving the issue:
1. Are there Javascript errors on the page?
No
2. Does the Kendo UI Window use an iframe or not?
does not use an iframe
3. If it does use an iframe, are all required scripts included? If it does not use an iframe, is the view inside the Window truly partial, i.e. no jQuery and Kendo UI script files should be registered again?
All the scripts that I specified in the previous post are registerd in Home page only and executing page if we take (inspect element in chrome) we can view the specified scripts before moving to next page
But we are moving to next page,
here grid is not displayed and
page display is as below:
{"Data":[{"ProjectID":0,"IsMaster":false,"EnteredBy":"","ItemStatusID":"","RelationID":0,"RelationTypeID":0,"RelationDefinitionID":0},
Regards,
The provided information still does not answer the following questions, which are important in resolving the issue:
1. Are there Javascript errors on the page?
No
2. Does the Kendo UI Window use an iframe or not?
does not use an iframe
3. If it does use an iframe, are all required scripts included? If it does not use an iframe, is the view inside the Window truly partial, i.e. no jQuery and Kendo UI script files should be registered again?
All the scripts that I specified in the previous post are registerd in Home page only and executing page if we take (inspect element in chrome) we can view the specified scripts before moving to next page
But we are moving to next page,
here grid is not displayed and
page display is as below:
{"Data":[{"ProjectID":0,"IsMaster":false,"EnteredBy":"","ItemStatusID":"","RelationID":0,"RelationTypeID":0,"RelationDefinitionID":0},
Regards,
Dayana
0
Hi Dayana,
In this case, please isolate the problem in a simple runnable example and send it for further investigation. Thanks.
Regards,
Dimo
Telerik
In this case, please isolate the problem in a simple runnable example and send it for further investigation. Thanks.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!