JS break when resizing column

2 posts, 0 answers
  1. PopaC
    PopaC avatar
    4 posts
    Member since:
    Mar 2016

    Posted 04 Oct Link to this post

    Hi to all,

    I have an issue regarding the resizing feature on a gridview, when I'm trying to resize any column, the code break with this message :

    Unhandled exception at line 48, column 27944 in http://localhost:54998/Scripts/kendo/2016.2.714/kendo.all.min.js
    0x800a138f - JavaScript runtime error: Unable to set property 'width' of undefined or null reference

    on those lines :

    resizeend: function () {
        var newWidth = th.outerWidth(), column, header;
        cursor(that.wrapper, '');
        if (browser.webkit) {
            that.wrapper.removeClass('k-grid-column-resizing');
        }
        if (columnWidth != newWidth) {
            header = that.lockedHeader ? that.lockedHeader.find('thead:first tr:first').add(that.thead.find('tr:first')) : th.parent();
            var index = th.attr(kendo.attr('index'));
            if (!index) {
                index = header.find('th:not(.k-group-cell):not(.k-hierarchy-cell)').index(th);
            }
            column = leafColumns(that.columns)[index];
            column.width = newWidth;          /* <--- WHERE IT BREAKS*/
            that.trigger(COLUMNRESIZE, {
                column: column,
                oldWidth: columnWidth,
                newWidth: newWidth
            });
            that._applyLockedContainersWidth();
            that._syncLockedContentHeight();
            that._syncLockedHeaderHeight();
        }
        that._hideResizeHandle();
        th = null;
    }

     

    And here is the code of the grid :

    @(Html.Kendo().Grid(Model)
          .Name("mainGrid")
          .Columns(columns =>
          {
              //// Column binding
              //// First three columns are locked
              columns.Bound(c => c.Article).Width(70).Locked(true).Lockable(false);
              columns.Bound(c => c.ParagraphNb).Title("Paragraph").Width(90).Locked(true).Lockable(false);
              columns.Bound(c => c.CircularSName).Title("Legislation short name").Width(180).Locked(true).Lockable(false)
                  .ClientTemplate("#=generateNameTemplate('Document', 'SN', CircularSName, false, data.UnderReview)#"); // Template based column to generate link toward Documnets
     
              columns.Bound(c => c.CircularLName).Title("Legislation long name").HtmlAttributes(new { @class = "multiline-cell" }).Width(300);
     
              columns.Bound(c => c.EntitiesNameList).ClientTemplate("#=generateEntitiesTemplate(Entities)#").Width(150).HtmlAttributes(new
              {
                  @class = "multiline-cell"
              });
              columns.Bound(c => c.EntitiesIdList).Hidden(); // Entities list column is used for filtering purposes only and is hidden (list of Guids)
     
              columns.Bound(c => c.Section).Width(200);
              columns.Bound(c => c.FullText).Title("Full text").ClientTemplate("<div class='fulltext-cell'>  #if (data.UnderReview) " +
                                                               "{# " +
                                                               "<span class='under-review'> Full Text is unavailable until the paragraph is published. </span>" +
                                                               "#} " +
                                                               "else if (data.IsRepealed) " +
                                                               "{# " +
                                                               "<span class='repealed-disclaimer'> This paragraph has been repealed </span>" +
                                                               "#}" +
                                                               "else" +
                                                               "{# " +
                                                               " #=data.FullText #" +
                                                               "#}#" +
                                                               "</div>")
                                                               .HtmlAttributes(new { @class = "multiline-cell" })
                                                               .Width(600);
              columns.Bound(c => c.Category).Width(150);
              columns.Bound(c => c.MainTopic).Width(125);
              columns.Bound(c => c.SubTopic1).Title("Other topic 1").Width(125);
              columns.Bound(c => c.SubTopic2).Title("Other topic 2").Width(125);
              columns.Bound(c => c.ObligationTitle).Title("Obligation title").Width(200);
              columns.Bound(c => c.ObligationDrafted).Title("Obligation Text").HtmlAttributes(new { @class = "multiline-cell" }).Width(345);
              columns.Bound(c => c.LogicLinks).Width(250).ClientTemplate("#=generateLinksTemplate(data.LogicLinks)#"); ;
     
              columns.Bound(c => c.Information).Title("Administration comments").HtmlAttributes(new { @class = "multiline-cell" }).Width(350);
              columns.Bound(c => c.ShortEntryDate).Title("Entry in force date").Width(160).Format("{0:dd/MM/yyyy}");
              columns.Bound(c => c.Order).Title("Order in Legislation");
     
              columns.Bound(c => c.Id).ClientTemplate("<button class='editButton' onclick='editParagraph(\" #=data.Id #\");'>Edit</button>").Title("").Width(60);
          })
          .Scrollable(scrollable => scrollable.Height(540))
          .Resizable(resizable => resizable.Columns(true))
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(new[] { 25, 50, 100 })
              .ButtonCount(5)
              )
     
          .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("Read", "Paragraph"))
              .PageSize(25)
              .ServerOperation(true)
              .Sort(s =>
              {
                  s.Add("CircularSName").Ascending();
                  s.Add("Order").Ascending();
              })
          )
     
          .Selectable(selectable => selectable
              .Mode(GridSelectionMode.Multiple))
     
          // Eport Excel
          .Excel(excel => excel
            .FileName(string.Format("Paragraphs_{0}.xlsx", DateTime.Now.ToString("yyyyMMdd")))
            .Filterable(true)
            .AllPages(true)
            .ForceProxy(true)
            .ProxyURL(Url.Action("ExportExcel", "Paragraph"))
          ))

     

    Can you help me to understand this and how to fix it ?

     

    Cheers ! 

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 06 Oct Link to this post

    Hello PopaC,

    We are not aware of such an issue, and the provided code snippet was not enough to determine what might be causing it.

    Can you please send us an isolated runnable project, where the error can be observed, so we can inspect it, and provide further assistance?

    Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
Back to Top