Textbox value set by jquery is empty on save

[Mattias]

Hi,
I set a textbox value from another textbox by jquery like this:

$('input[id="Name"]').live('change keyup', function () {

   var urlSegment = $('input[id="UrlSegment"]');

   urlSegment.val("Test");

});

I can see the value "Test" in the second textbox but when clicking on save, the posted value is empty.
I think the problem lies along with ajax cause when changing to server binding the value is posted.

The form is generated in a popup by the grid.

How do I solve this?

Regards,
Mattias

[todd]

I'm having the same problem have you resolved this issue yet?

[Mattias]

Hi Todd,
It seems to work by adding .change() to the textbox.

$('input[id="Name"]').live('change keyup', function () {

   var urlSegment = $('input[id="UrlSegment"]');

   urlSegment.val("Test");

   urlSegment.change();

});

/Mattias

[todd]

Awesome that worked thanks!

[John]

Thank you so much!  I found this after hours of beating my head against the keyboard and it worked perfectly.

[Tsvetomir]

Hello,

When the jQuery val() method is used, the value of the input is visually changed. However, in order to have the same value applied in the model, you would have to manually trigger the change method so it would be indicated that the respective model's property has to be updated with the value of the input. Therefore, the provided suggestion above should be utilized:

$('input[id="Name"]').live('change keyup', function () {
   var urlSegment = $('input[id="UrlSegment"]');
   urlSegment.val("Test");
   urlSegment.change();
});

 

Regards,
Tsvetomir
Progress Telerik

[Luke]

Good afternoon, 

I am having this same issue, but using '.change()' isn't resolving the issue for me. I'm not sure what else to do.

I am auto filling a name and email textbox based on available users in the domain.

var Name = $('input[id="Name"]');
var Email = $('input[id="Email"]');

Name.bind("on keyup", function (e) {
                var UN = $(this).val();
                $.ajax({
                    cache: false,
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    url: url,
                    data: {"UserName": UN },
                    success: function (results) {
                        if (results) { alert("SUCCESS: " + results); }
                        var res = results.split(",");
                        var email = res[0];
                        var name = res[1];
                        if (name) {
                            Name.val(name);
                            Name.change();
                            Email.val(email);
                            Email.change();
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("AJAX error");
                    }
                });

 

For some reason the name field gets posted successfully but email is always null even though I get the text I need in the textbox.

here is my grid

@(Html.Kendo().Grid<vmPurchasingList>()
    .Name("PurchasingList")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name);
        columns.Bound(c => c.Email);
        columns.Bound(c => c.StepsString);
        columns.ForeignKey(c => c.CostCenterId, (System.Collections.IEnumerable)ViewData["UsersCostCenters"], "Id","Name")
               .Title("Cost Center");
        columns.ForeignKey(c => c.StepsId, (System.Collections.IEnumerable)ViewData["Steps"], "Id", "Type")
               .Hidden(true);
        columns.ForeignKey(c => c.StepsHwyId, (System.Collections.IEnumerable)ViewData["StepsHwy"], "Id", "Type")
               .Hidden(true);
        columns.Command(command => { command.Edit(); }).Width(160);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => {
            events.Error("error_handler");
            events.Sync("reload");
        })
        .Model(model =>
        {
            model.Id(c => c.Id);
            model.Field(c => c.Id).Editable(false);
            model.Field(c => c.Name);
            model.Field(c => c.Email);
            model.Field(c => c.CostCenterId).DefaultValue(1);
            model.Field(c => c.StepsId).DefaultValue(0);
            model.Field(c => c.StepsHwyId).DefaultValue(0);
        })
        .Create(create => create.Action("Create", "Home"))
        .Read(r => r.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Events(e => e.Edit("onEdit"))
    .HtmlAttributes(new { style = "height:700px;" })
)

 

I am also having the same issue with the drop down lists when I attempt to 'clear' a users selection based on another drop down list.

[Tsvetomir]

Hi Luke,

As an alternative to triggering the change manually, you could set the value for the fields directly in the model and the binder should show the values in the textbox elements automatically:

var model = $("#grid").getKendoGrid().editable.options.model; 
model.set("Name", name);  
model.set("Email", email);  

 

Regards,
Tsvetomir
Progress Telerik

[Luke]

Thank you, that did the trick. I implemented my code above inside the onEdit(event) call for my popup editing so my code was slightly different. I needed to update the model and the text of the textbox.

function onEdit(event) {
    var model = event.model;
    var Name = $('input[id="Name"]');
    var Email = $('input[id="Email"]');

    Name.bind("on keyup", function (e) {
        var UN = $(this).val();
        $.ajax({
           cache: false,
           type: "GET",
           contentType: "application/json; charset=utf-8",
           dataType: 'json',
           url: autoFillUrl,
           data: {"UserName": UN },
           success: function (results) {
               if (results) { alert("SUCCESS: " + results); }
               var res = results.split(",");
               var email = res[0];
               var name = res[1];
               if (name) {
                   Name.val(name);
                   Email.val(email);
                   model.Name = name;
                   model.Email = email;
               }
           },
           error: function (xhr, ajaxOptions, thrownError) {
                alert("AJAX error");
           }
       });
   });
}

[Tsvetomir]

Hi Luke,

The set() method exposed by the observable objects is supposed to be updating the inputs automatically. Therefore, you would not have to manually fill the input as the binder will be automatically triggered.

https://docs.telerik.com/kendo-ui/api/javascript/data/observableobject/methods/set

 

Kind regards,
Tsvetomir
Progress Telerik

[Luke]

In my case it's not working as expected. I am capturing the onEdit() event to implement the desired auto fill functionality within the editor popup window. None of the fields automatically update/refresh based on the model either within 'onEdit()' or because of the popup editing. Therefore, I am manually updated the model and the displayed text.

[John]

var model = $("#grid").getKendoGrid().editable.options.model;

What is this sorcery?!  I can't tell you how useful this little tidbit is...

[Tsvetomir]

Hi,

Whenever the Kendo UI Grid enters edit mode, a custom editable widget is dynamically created that has a reference to the currently edited item. An alternative to this would be to pass the TR element to the dataItem() method of the Kendo UI Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/dataitem

 

Regards,
Tsvetomir
Progress Telerik