Kendow window with grid paging issue

6 posts, 0 answers
  1. Dayana Maliyakal
    Dayana Maliyakal avatar
    27 posts
    Member since:
    Jan 2010

    Posted 29 May 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 May 2014 Link to this post

    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!
     
  3. Dayana Maliyakal
    Dayana Maliyakal avatar
    27 posts
    Member since:
    Jan 2010

    Posted 30 May 2014 Link to this post

    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},
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 May 2014 Link to this post

    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!
     
  5. Dayana Maliyakal
    Dayana Maliyakal avatar
    27 posts
    Member since:
    Jan 2010

    Posted 30 May 2014 in reply to Dimo Link to this post

    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 
     
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 May 2014 Link to this post

    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!
     
Back to Top