[Solved] ForeignKey Column - Handling OnChange

[Rajesh]

Hi

Does anyone know how to specify an event handler for the OnChange event for a column bound using ForeignKey? I know how to specify an event handler for a custom editor template that uses a drop down list, but am not able to figure it out how to do the same when using ForeignKey.

In the event handler, i want to enable/disable certain cells depending on the value selected by the user without resorting to a rebind.

Thanks

-Rajesh

[Dadv]

Try to use the OnEdit event of the grid , find your control with jquery, add the event handler on the onChange, add you script with the column to disable.

Provide sample if you want to have an example. 

Regards,

[Rajesh]

Hi Dadv,

Thanks for the response. I have tried this approach, without much success. Here is the HTML generated for the particular cell to which i want to bind the change handler

<td class="t-grid-edit-cell">
   <div class="t-widget t-dropdown t-header" tabIndex="0">
      <div class="t-dropdown-wrap t-state-default">
         <span class="t-input">Do Not Default</span>
         <span class="t-select">
            <span class="t-icon t-arrow-down">select</span>
         </span>
      </div>
      <input style="display: none;" id="MaturityAction" name="MaturityAction" value="1" type="text" data-val-number="The field MaturityAction must be a number." data-val="true">
   </div>
   <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MaturityAction"></span>
</td>

I tried attaching an event handler to the t-input, as well to the control with the ID MaturityAction. However, in both cases, the debugger does actually hit the binding code, but the handler never gets called.

Here's the code i use to bind to the t-input class

var ddls = $(e.cell).find('.t-dropdown');
if (ddls.length > 0) {
     if($(ddls).find('#MaturityAction').length > 0) {
         if ($(ddls).find('.t-input').length > 0) {
             $(ddls).find('.t-input').change(function () {//the debugger does hit this line of code
                 alert("Bound");
             })
         };
     }
 }

The debugger does hit the code that binds to the change event, but the alert is never displayed.

The code below, i tried binding to the hidden input by the name MaturityAction (the field that stores the key value for the foreign key), however change is not fired for this either.

var ddls = $(e.cell).find('.t-dropdown');
if (ddls.length > 0) {
     if($(ddls).find('#MaturityAction').length > 0) {
             $(ddls).find('#MaturityAction').change(function () {
                 alert("Bound");
             })
         };
     }
 }

Finally, i tried binding to the change for t-dropdown itself, again no luck (omitting code for the same).

Please help me figure which control should the change event handler be bound to.

EDIT1 -- I have also tried using the bind method with "change", "OnChange" and "valueChange" as per (http://www.telerik.com/community/forums/aspnet-mvc/combobox/jquery-event-names.aspx ), and also used the binding syntax as per http://www.telerik.com/community/forums/aspnet-mvc/numericinput/standard-jquery-change-event-not-firing-in-ie.aspx . All attempts unsuccessful. I have been able to use bind successfuly for tComboBox which is not inside a grid. However, in a grid, still no luck. I think the issue is most likely with the control i am trying to bind to (am not using the appropriate class/control as the bind target).


-Rajesh

[Rajesh]

One small suspicion - i figured that telerik is not using a real drop down list, but rather mimicing one. I verified t his by looking at the html after i actually expand the drop down list - the controls present then are not the same as when the list is not expanded.. So perhaps the controls are destroyed and recreated? making it impossible to bind to the change event for a column bound with ForeignKey?

[Dadv]

You're right, the dropdown is a telerik combobox 

so try to use this : 

$(e.cell).find('#MaturityAction').bind('valueChange', function(e) { // your code });


Edit: Always in the OnEdit grid event ofcourse

[Rajesh]

Finally it worked.. but not

$(e.cell).find('#MaturityAction').bind(...)

rather 

if($(e.cell).find('#MaturityCondition').length >1)
{
$('#MaturityCOndition').bind(...)
}

Looks like a jquery quirk.

Now just need to figure out how to disable/enable to two columns. Should be as simple as setting the disabled attribute using the e.form collection.

Thanks Dadv

[Rajesh]

Dadv and all,

this approach is not suitable for disabling cells when the edit mode is inline. The reason is - when the valueChange event is fired for a drop down list, the other cells do not have any rendered controls, so there is nothing to disable. This puts me in a huge fix. I can try and trap the focus event for the columns i wish to disable - and check the value of the dropdown field to disable the control - but thats an ugly hack even if it works.

ANy better ideas?

To make sure the problem is well defined -- 

I have a foreignKey column bound using the ForeignKey method on Grid.columns.

I have 2 optional columns - OptionalColumn1 and OptionalColumn2

Now when the user edits a row, if the value of the foreignkey column is, lets say 2, i do not want OptionalCOlumn1 and OptionalColumn2 to be editable, else they should be ediatble.

AM starting a new thread for this, as this title may be misleading