Kendo Grid - Edit Row Cancel - Cancels edit only the columns that are frozen.

2 posts, 0 answers
  1. Mahesh
    Mahesh avatar
    2 posts
    Member since:
    Dec 2013

    Posted 01 Apr 2016 Link to this post

    Hi

    I have a Kendo grid with first 4 columns that are frozen. When i click on Inline Edit, all editable column show up as editable. However when i cancel the edit, only the columns that are frozen become non editable. the columns that are not frozen still remain as editable and the Update / Cancel button still remains and does nothing on further press. it doesnt change itself back to "Edit" button.

    Not sure what is wrong here. Code attached below. Any help is appreciated.

    @(Html.Kendo().Grid<GoldenBook>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.Id).Width(100).HiddenField();
              columns.Bound(p => p.SORId).Width(100).HiddenField();
              columns.Bound(p => p.SOR).ClientTemplate("#=SOR.SOR#").EditorTemplateName("SORList").Width(150).MultiFilterableSearch().Locked(true);
              columns.Bound(p => p.Company).Width(100).MultiFilterableSearch().Locked(true);
              columns.Bound(p => p.GLAccount).Width(150).MultiFilterableSearch().Locked(true);
              columns.Bound(p => p.AccountingUnit).Width(150).MultiFilterableSearch().WrapHeader().Locked(true);
              columns.Bound(p => p.GLAccountType).Width(200).MultiFilterableSearch().WrapHeader();
              columns.Bound(p => p.GLAccountCategory).Width(300).MultiFilterableSearch().WrapHeader();
              columns.Bound(p => p.GLAccountName).Width(500).MultiFilterableSearch();
              columns.Bound(p => p.isActive).Width(100).MultiFilterableSearch();
              columns.Bound(p => p.DateModified).Width(200).DateTimeFormat().MultiFilterableSearch();
              columns.Bound(p => p.UserId).Width(200).MultiFilterableSearch();
              columns.Command(command => { command.Edit().Text("Edit"); }).Width(200);
          })
              .HtmlAttributes(new { style = "width: 99.5%; " })
                .Scrollable()
                .Sortable()
                .Reorderable(reorderable => reorderable.Columns(true))
                .Resizable(resizable => resizable.Columns(true))
                .Filterable()
                .ColumnMenu()
                .Events(e => e.Edit("OnEdit"))
                .Pageable(pageable => pageable
                    .Refresh(false)
                    .PageSizes(new int[] { 20, 50, 100, 500, 1000 })
                )
                .Editable(editable => { editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Top); })
                
                .ToolBar(toolbar =>
                {
                    toolbar.Template(
                    @<text>
    <div class="toolbar">
        <div id="gridtoolbar">
            <div id="gridtoolbar-left">@item.CreateButton()</div>
            <center>
    <div id="gridtoolbar-main">@ViewBag.Title
    </div>
            </center>
            <right>
    <div id="gridtoolbar-right">
                <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
                <input id="chkAllPages" type="checkbox" ng-model="allPages" ng-change="changeAllPages()" />&nbsp;&nbsp;All Pages
    </div>
            </right>
        </div>
    </div>
    </text>);
                })
                .Excel(excel => { excel.FileName(@ViewBag.Title + ".xlsx"); excel.Filterable(true); excel.AllPages(false); })
                .DataSource
                (dataSource => dataSource
                    .Ajax()
                    .Batch(false)
                    .ServerOperation(false)
                    .PageSize(50)
                    .Events(events => { events.Error("onError").RequestEnd("onRequestEnd"); })
                    .Model(model =>
                    {
                        model.Id(p => p.Id);
                        model.Field(p => p.Id).DefaultValue(0);
                        model.Field(p => p.SORId).DefaultValue(0);
                        model.Field(p => p.DateModified).DefaultValue(DateTime.Now);
                        model.Field(p => p.UserId).DefaultValue(@Utils.GetUserName());
                        model.Field(p => p.SOR).DefaultValue(new SORList() { SORId = 0, SOR = "- Select SOR -" });
                    })
                    .Create(update => update.Action("Create=GoldenBook", "Admin").Data("sendAntiForgery"))
                    .Read(read => read.Action("ReadGoldenBook", "Admin"))
                    .Update(update => update.Action("UpdateGoldenBook", "Admin").Data("sendAntiForgery"))           
                )
        )


    <script type="text/javascript">
        function OnEdit(e) {
            if (e.model != null && e.model.isNew() == false) {
                $('input[name=Id]').parent().html(e.model.Id);
                $('input[name=SORId]').parent().html(e.model.SORId);
                $('input[name=SOR]').parent().html(e.model.SOR.SOR);
                $('input[name=Company]').parent().html(e.model.Company);
                $('input[name=GLAccount]').parent().html(e.model.GLAccount);
                $('input[name=AccountingUnit]').parent().html(e.model.AccountingUnit);
            }
            if (e.model != null && e.model.isNew() == true) {
                $('input[name=Id]').parent().html(e.model.Id);
                $('input[name=SORId]').parent().html(e.model.SORId);
            }
        }
    </script>

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 05 Apr 2016 Link to this post

    Hello Mahesh,

     

    We are not aware of such issue, neither we can see something wrong with the code snippet. 

     

    Could your provide us a runnable example of the case?

     

    All seems to be working properly on the attached example.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top