Issue with update when using virtual scrolling

[CLOCA]

Hi,

I have a a grid with inline editing and I am applying templates to each of the controls when editing through uiHints on my viewmodel.

Updating worked fine before implementing virtual scrolling, however after I added the virtual scrolling I am getting null reference errors in the console.

the console error is as follows:

Uncaught TypeError: Cannot read property 'Description' of null
    at eval (eval at getter (kendo.all.min.js:25), <anonymous>:3:22)
    at init.set (kendo.all.min.js:28)
    at init.change (kendo.all.min.js:29)
    at init.proxy (jquery-2.2.4.js:497)
    at init.trigger (kendo.all.min.js:25)
    at init._change (kendo.all.min.js:65)
    at HTMLInputElement.<anonymous> (kendo.all.min.js:65)
    at HTMLInputElement.dispatch (jquery-2.2.4.js:4737)
    at HTMLInputElement.elemData.handle (jquery-2.2.4.js:4549)
    at Object.trigger (jquery-2.2.4.js:7807)

My viewModel with ui hints looks like: 

public class FolderRetentionConfigViewModel
    {

        public int FolderRetentionConfigId { get; set; }
        public int SubSubId { get; set; }
        public int CaLocationId { get; set; }
        [UIHint("FolderRetentionConfigRetentionCodeTemplate")]
        public int? RetentionCodeId { get; set; }

        public string Description { get; set; }
        [UIHint("FolderRetentionConfigActivePeriodTemplate")]
        public int? ActivePeriod { get; set; }
        [UIHint("FolderRetentionConfigInActivePeriodTemplate")]
        public int? InactivePeriod { get; set; }
        public string TotalRetention { get; set; }
        public string Caid
        {
            get
            {
                return this.SubSub.Title  + this.SubSub.Adcode + this.SubSub.Adsubcode;
            }
        }

        public CaLocations CaLocation { get; set; }


        public RetentionCodes RetentionCode { get; set; }
        public SubSubCategories SubSub { get; set; }


    }

 

and the the template files that the UI Hints are referencing  look like this 

@model IMSCore.ViewModels.FolderRetentionConfigViewModel

@{ 

    EditTemplateHelper etHelper = new EditTemplateHelper(ViewData);

}

 

<div>

    @(Html.Kendo().MaskedTextBox()
        .Name("Description")      
    )


</div>

 

And my grid looks like this:

@(Html.Kendo().Grid<IMSCore.ViewModels.FolderRetentionConfigViewModel>()
       .Name("gridFolderRetentionConfig")
       .HtmlAttributes(new { @class = "container-fluid no-padding" })
       .Columns(columns =>
       {
           columns.Bound(c => c.Caid).Width(110);
           columns.Bound(c => c.Description);
           columns.Bound(c => c.RetentionCodeId).ClientTemplate("<div><span> " +
                       "#if(data.RetentionCode != null) { # #:data.RetentionCode.RetentionCode # # } # " +
                       "</span></div>");
           columns.Bound(c => c.ActivePeriod);
           columns.Bound(c => c.InactivePeriod);
           columns.Command(command => { command.Edit();  }).Width(EditTemplateHelper.COMMAND_WIDTH);
       })
       .Scrollable(scrollable => scrollable.Virtual(true))
       .Sortable()
       .Editable(editable =>
       {
           editable.Mode(GridEditMode.InLine);
       })
       .Events(e =>
       {
           //e.Edit("FolderRetentionConfigEditing");
           //e.Save("onGridSave");
           //e.SaveChanges("onGridSave");
       })
       .DataSource(dataSource => dataSource
           .Ajax()
           .PageSize(20)
           .Model(m =>
           {
               m.Id(pl => pl.FolderRetentionConfigId);
               m.Field(p => p.Caid).Editable(false);

           })
           .Read(read => read.Action("GetFolderRetentionDefaults_Post", "FolderRetentionsApi"))
           .Update(update => update.Action("UpdateFolderRetentionDefaults", "FolderRetentionsApi"))
           )
   )

[Stefan]

Hello, Cloca,

Thank you for the provided information.

I made an example of inline edit mode, virtual scrolling a field with a custom editor which working as expected on my end:

Also, I noticed that the field that fires the error 'Description' does not have a UIHint at all:

public string Description { get; set; }

As the issue seems very specific, please provide a runnable example demonstrating and I will gladly investigate and provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik

[CLOCA]

Hi,

Sorry for the confusion but I had the UIHint on Description field, I must have accidently deleted the line when creating the code snippet.

But I have created a small sample application using the viewmodel, templates and grid above. I had to change the file type from .zip to .jpg to be able to attach it. Hopefully you can notice something.

Thanks.

 

[Konstantin Dikov]

Hello Cloca,

The model passed to the editors will match the property type, so you need to change your editor for the Description field with the following:

@model string

<div>
    @(Html.Kendo().MaskedTextBoxFor(m=>m)
    )
</div>

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik