Kendo Grid update field in inline editing mode

[Erkki]

I am trying to update Kendo Aspnet core grid field while adding a new record in inline editing.

Here are more details.

Start adding a new row in grid -> add programically content to the edit fields.

I have a grid with textArea field called VideoSubtitleText which I am trying to update using javascript code.

Here is my js code

let ttt = $("#VideoSubtitleText").kendoTextArea().data("kendoTextArea");
 ttt.value("New subtitle text");
 ttt.trigger("change");

And this is my grid

@(Html.Kendo().Grid<VideoSubtitle>
     ()
     .Name("subtitlegrid")
     .Filterable()
     .Editable()

     
     .Selectable(selectable => selectable
     .Mode(GridSelectionMode.Single))
     .Scrollable()
     .ClientDetailTemplateId("templateSubtitleStyle")
     .ToolBar(toolbar =>
     {

         toolbar.ClientTemplateId("GridToolbarTemplate");
     })

     .Columns(columns =>
     {

         columns.Bound(column => column.VideoSubtitleBeginTimeStr).Title("Start Time").Width(70).Filterable(false);
         columns.Bound(column => column.VideoSubtitleEndTimeStr).Title("End Time").Width(70).Filterable(false);
         columns.Bound(column => column.VideoSubtitleText).Title("Text").Width(380).HtmlAttributes(new { @class = "wrap" });

         columns.Command(column =>
         {                                                
             column.Edit();
             column.Destroy();
         }).Width(140);

     })
     .DataSource(ds => ds.Ajax()
     .Sort(sort => sort.Add("VideoSubtitleBeginTimeStr").Ascending())
     .Read(r => r.Url("/VideoDataDetails?handler=ReadSubtitles").Data("forgeryToken"))
     .Update(u => u.Url("/VideoDataDetails?handler=UpdateSubtitle").Data("forgeryToken"))
     .Create(c => c.Url("/VideoDataDetails?handler=CreateSubtitle").Data("forgeryTokenAndLocale"))
     .Destroy(d => d.Url("/VideoDataDetails?handler=DestroySubtitle").Data("forgeryToken"))

     .Model(m => m.Id(id => id.VideoSubtitleId))
     .Events(ev => ev.RequestEnd("gridRequestEnd"))

     )

     .Events(events => events
     .Change("onSubtitleSelected")
     .Save("onSaveSubtitle")
     .SaveChanges("onSaveSubtitle")
     .Remove("onRemove")
     .Edit ("onSubtitleEdit")

     )
     .HtmlAttributes(new { style = "height: 600px;" })

 )

 

JS code updates the grid field (VideoSubtitleText) correctly first time. However I need to update same field multiple times. 
This causes problem and extra element is added each time when field is updated from my js code.
Image showing the problem is attached.
The code updates the field but additional html elements are created when multiple updates are done to the same field
 

[Stoyan]

Hello Erkki,

Based on the information you have share your approach is generally correct.

I suspect that the issue arises because at this line:

let ttt = $("#VideoSubtitleText").kendoTextArea().data("kendoTextArea");

the expression not only selects the available client-side reference of the TextArea but also initializes a new empty TextArea due to highlighted part of the code.

Please remove the unnecessary bit of code and let me know whether the desired outcome has been achieved.

Regards,
Stoyan
Progress Telerik

[Erkki]

Hello Stoyan,

I removed the part you suggested and now it works ok.

Problem solved, thanks for your help.