This is a migrated thread and some comments may be shown as answers.

Kendow window with grid paging issue

5 Answers 42 Views
AJAX and Web 2.0
This is a migrated thread and some comments may be shown as answers.
Dayana Maliyakal
Top achievements
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

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 May 2014, 12:05 PM
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
 
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
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},
0
Dimo
Telerik team
answered on 30 May 2014, 06:21 AM
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
 
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
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,
Dayana 
 
0
Dimo
Telerik team
answered on 30 May 2014, 06:57 AM
Hi Dayana,

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!
 
Tags
AJAX and Web 2.0
Asked by
Dayana Maliyakal
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Dayana Maliyakal
Top achievements
Rank 1
Share this question
or