Value Changed Event to change a related property value

Jan_Schulz

Hi,

is there a way to react on a value change event in a custom form field? Background for this:We want to set the display name of an object on the basis of 2 different properties. How can we do this?

regards,

Jan

Geoff_Ross

OK, looks good so far. We prob just need to wrap that in a custom task and a $(document).ready() to sort out the timing.

app.custom.formTasks.add('FFM.Class.Zugangsgruppe',null, function(formObj, viewModel){
    $(document).ready(function() {
        if(jsonViewModel.ClassTypeId == 'd5845502-c02e-c603-fe19-e9740cd5aa4c') {
            $('[name="DisplayName"]').bind("change", function (){
                alert('Changed DisplayName');
            });
        }
    });
});

This is assuming you have a control for DisplayName on the Custom CI form.

Geoff

Geoff_Ross

Hi @Jan_Schulz,

You can bind a function to the change event. Here's an example for when the catalog item on a HWA is changed.

pageForm.viewModel.Target_HardwareAssetHasCatalogItem.bind("change", function (){
    // do stuff
});

Geoff

Jan_Schulz

Hi @Geoff_Ross ,

thank you for the answer. But how can i bind to a simple string property textfield like DisplayName?

sorry i am new to javascript and Kendo.

regads,

Jan

Geoff_Ross

Jan,

No problem. Much the same way. You need to bind to the control rather than the model. You can grab the input element with jQuery

$('[name="Title"]').bind("change", function (){
    // do something
});

Geoff

Jan_Schulz

@Geoff_Ross thank you again :-)

i did it, but dont work. Is there anything else i must do that the code will work. I only wrote

if(jsonViewModel.ClassTypeId == 'd5845502-c02e-c603-fe19-e9740cd5aa4c')

{

    $('[name="DisplayName"]').bind("change", function (){

        alert('changed DisplayName');

    });

}

Geoff_Ross

Where have you placed that code?

Jan_Schulz

I create a own js file which will be loaded from custom.js file. Inside the custom.js file is a script Loader.

var loadScript = function(path,urls){

   urls.forEach(function(url){       

       if(window.location.href.indexOf(url) !== -1){ // Verify we are on the valid page

           var result = $.Deferred(),

           script = document.createElement("script");

           script.async = "async";

           script.type = "text/javascript";

           script.src = path;

           script.onload = script.onreadystatechange = function(_,isAbort){

               if(!script.readyState || /loaded|complete/.test(script.readyState)){

                   if(isAbort)

                       result.reject();

                   else

                       result.resolve();

               }

           };

           script.onerror = function(){result.reject();};

           $("head")[0].appendChild(script);

           console.log("Loaded " + path);

           return result.promise();

       }

   });

};

loadScript("/CustomSpace/ConfigItem/FFM.Class.Zugangsgruppe.DisplayNameEvent.js",["/DynamicData/Edit"])

The code from my last post is the only Code in the FFM.Class.Zugangsgruppe.DisplayNameEvent.js file.

Geoff_Ross

OK, looks good so far. We prob just need to wrap that in a custom task and a $(document).ready() to sort out the timing.

app.custom.formTasks.add('FFM.Class.Zugangsgruppe',null, function(formObj, viewModel){
    $(document).ready(function() {
        if(jsonViewModel.ClassTypeId == 'd5845502-c02e-c603-fe19-e9740cd5aa4c') {
            $('[name="DisplayName"]').bind("change", function (){
                alert('Changed DisplayName');
            });
        }
    });
});

This is assuming you have a control for DisplayName on the Custom CI form.

Geoff

Jan_Schulz

Thank you very much. Your support is perfect. Have a nice day.