CODEWITHSUNDEEP
jqueryangularjstelerikkendo-grid
A_J
A_J

Reputation: 1003

Not able to update text box value in change event of dropdown kendo grid angular 1

On Ui, I have opened kendo-grid in popup-mode for editing. There is a kendoDropDownList in it to which I have binded a change event. In the change event function I want to update the value of a text-box present in the same kendo grid.

What I have tried so far:

In the editor function of the dropdown, I have access to options so I tried options.model.set("TEXT_BOX_FIELD", "Hello");

and I have also tried this: 

var uid = this.element.closest("[data-role=window]").data("uid");
var model = $("#Grid").data("kendoGrid").dataSource.getByUid(uid);
model.set("TEXT_BOX_FIELD","Hello");

In both the above approaches, I see that the value doesn't get set in the model even when the control passes the line in chrome debugger.

model.TEXT_BOX_FIELD remains empty quotes even after the set function is called. I am not able to understand the reason for this.

I also tried to set the value in the model like this:

model.TEXT_BOX_FIELD = "Hello";

In this way I can see in the debugger that the value is set in the model now but it doesn't show up in the edit pop up window of the grid although it is visible in the kendo-grid in the background.

However to show it in the popup window, I used jquery as follows:

$('[name="TEXT_BOX_FIELD"]').val("Hello");

This has worked just fine but I fail to understand why the set function did not work.

I have followed the documentation of kendo and the discussions as follows: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/access-editor-control

https://www.telerik.com/forums/custom-popup-editor-with-additional-fields

https://www.telerik.com/forums/updating-a-textbox-cell-after-drop-down-selection

I want to know the recommended way to do this task.

Edit: There was a validation with return false which was preventing the set function to set the value while defining the schema. This is triggering because initially the value of text box is empty. So I removed the validation. Now the set() function is behaving properly and I am able to see the value on UI also.

validation : {
    requiredCheck : function(input) {
        if (input.is("[name='TEXT_BOX_FIELD']") && input.val() == '') {
            //alert(input.val()) 
            input.attr("data-textBoxFieldMsg-msg",  "Text Box cannot be empty");
            return false;
        }
        return true;
    }
}

Upvotes: 2

Views: 3650

Answers (1)

A_J
A_J

Reputation: 1003

My solution:

First I used jquery to set the value in the text box like this:

$('[name="TEXT_BOX_FIELD"]').val("Hello");

and then I invoked the set function of the model to set the value like this:

var uid = this.element.closest("[data-role=window]").data("uid");
 var model = $("#Grid").data("kendoGrid").dataSource.getByUid(uid);
 model.set("TEXT_BOX_FIELD","Hello");

This time the empty validation did not throw error while calling model.set() as the value of that text-box is already set by the jQuery val() function.

Upvotes: 3

Related Questions