[Solved] how to enable/disable a dropdown column based on checkbox column in telerik mvc grid edit mode

[wendy]

I have a telerik mvc grid that has a cell that is a checkbox, and another cell that is dropdownlist. I need to enable and disable dropdownlist (Locations) based on the user check or uncheck the checkbox(LocationIndicator). here is the grid:

Html.Telerik().Grid<GasQualityDataManagementWeb.Areas.GasQuality.Models.LocationViewItem>(Model.Items)
.Name("dataGrid")
.DataKeys(k => k.Add(o => o.LocationKey))
.Columns(c =>
 { 
  c.Bound(o => o.LocationIndicator);
  c.Bound(o => o.Locations).Width(100); 
 })
.DataBinding(b => b.Server()
 .Insert("Insert", "Location", new { BusinessUnit = Model.BusinessUnit })
 .Update("Update", "Location", new { BusinessUnit = Model.BusinessUnit })
 .Delete("Delete", "Location")
)
.ToolBar(t =>
{
 t.Insert();
})
.Editable(e =>
{
 e.DisplayDeleteConfirmation(true);
 e.Mode(GridEditMode.PopUp);
})
.Pageable(p => p.PageSize(Model.PageSize))
.PrefixUrlParameters(false)
.Render();

I have a javascript to catch the checkbox event as follow, Please suggest a way how to enable/disable the dropdownlist

<script type="text/javascript">
$(function () {
    $('#LocationIndicator').click(function () {
        if ($('#LocationIndicator').attr('checked') == true) {
            // here need to enable the dropdown, Please suggest a way to do this 
        }
        else {
               // here need to disable the dropdown, please suggest how to disable it
        }
    });
});

 

</

 

 

script>

 

 

 

 

Thanks a lot,
Wendy
 

[Atanas Korchev]

Hello wendy,

Do you use the Telerik dropdownlist or the built-in one? The code for disabling them is different. For the DropDownList you should use the disable client-side method: 
$('#DropDownList').data('tDropDownList').disable() 

For the built-in dropdown list - check this blog post.

Also you should use live events instead of click because the checkbox is not visible when your code is executed. As a result your handler will never be run.

Regards,
Atanas Korchev
the Telerik team

[wendy]

I am using Server Edit Templates for the dropdownlist (Locations) in mvc grid. The model have a attributes to specify its data type  

[

 

UIHint("DropDownList"), Required, DisplayName("Upstream Location")]
public string Locations { get; set; }

I have created DropdownList.ascx editor and display templates under Views.
I have changed to use live event instead of click event as follow, but it still didn't work

 

$(

 

function () {
$('#LocationIndicator').live('click', (function () {
if ($('#LocationIndicator').attr('checked') == true) {
    alert("location is checked")             // i can see this alert
    $('#Locations').removeAttr('disabled');  //but this step not working.
else {
     $('#Locations').attr('disabled', 'disbale');  
    });
});

Please help, Thanks a lot,
Wendy

 

[Atanas Korchev]

Hi wendy,

 Try putting the JavaScript code inside the OnLoad event of the grid. If this does not help either please attach a sample project to this forum thread. We will review it and provide assistance.

Regards,
Atanas Korchev
the Telerik team

[wendy]

Attached is the sample project. I need to enable/disable the location dropdown based on the check box  (location indicator).
Thanks a lot,
Wendy

[Atanas Korchev]

Hello wendy,

 There are a few problems in your code:

1. You have configured the ScriptRegistrar to combine the scripts but have not registered the asset.axd HTTP handler.
2. You were manually including jQuery-1.4.1.js which Telerik Extensions for ASP.NET MVC do not support. They need jQuery-1.4.3.js.
3. I couldn't find any element with id 'LocationId' which you are trying to disable.
4. This code will not do anyhing for two reasons:
   $('#BlendedLocations').attr('disabled', 'disbale');
   
   First there is no element whose id attribute is 'BlendedLocations' - the dropdown's name attribute is 'BlendedLocations'
   
   Second the correct value for the disabled attribute is not 'disbale' but 'disabled'.

I rectified those issues and now your project seems to work as expected. You can find it attached.

Please have in mind though that we usually do not fix problems which are not related to Telerik products.

Regards,
Atanas Korchev
the Telerik team

[wendy]

Thank you so much for your help. The enable/disable dropdownlist is working now. The script is exactly what I am looking for. Thanks a lot. But I still have some other issues.

 

1. I want to configure the ScriptRegistrar to combine the scripts, how to register the asset.axd HTTP handler? I have put the line in the web.config file,  it still have 404 message on assed.axd

 

<add name="AssetHandler" preCondition="integratedMode" verb="GET,HEAD" path="asset.axd" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc"/>

2. As you can see my sample project, I am using Telerik Menu. But with javascipt debug on, I always have script runtime error “Object doesn’t support this property or method” on the line

jQuery('#MainMenu').tMenu();}); 

how to avoid this javascript runtime error? 

3. In the telerik grid popup edit mode, how to enable the “X” button to close the popup window. Righ now if user click “X” button at the upper right corner of popup window, popup doesn’t close.

I really appreciate your help. Thanks again,

[wendy]

Sorry, I have another issue, ClinetEvents "OnEdit" or "OnRowDataBound" events are not fired
 .ClientEvents(e => e.OnEdit("OnEdit"))


    <script type="text/javascript">

    function OnEdit(e) {
           alert("HERE")  // I didn't see this alert when edit button is clicked 

        }

    </script>

I try to hide some columns or disable some fields when edit window is pupup. how to do that?

 Any help would be greatly appreciated.
Wendy

[Atanas Korchev]

Hello wendy,

 All those issues are caused by the JavaScript files which are not loaded. You seem to have not properly registered the asset.axd file which is used when combination is enabled. I suggest you check this help article for instructions how to register asset.axd.

All the best,
Atanas Korchev
the Telerik team

[wendy]

I have followed the instructions to register asset.axd file. The "X" button on the popup form is working now, but the OnEdit() event is still not fired. Attached is the sameple project, I couldn't figure out why.
Thanks again for your help.
Wendy

[Atanas Korchev]

Hello wendy,

 The OnEdit event fires only for ajax editing. Your grid is configured for server editing and binding thus OnEdit is not raised. If you need an event raised when the popup is open try this:

           .Editable(e =>
               {
                   e.DisplayDeleteConfirmation(true);
                   e.Mode(GridEditMode.PopUp);
                   e.Window(w => w.ClientEvents(events => events.OnLoad("popup_onLoad")));
               })
           .Pageable(p => p.PageSize(Model.PageSize))
           .ClientEvents(e => e.OnLoad("onLoad").OnEdit("OnEdit"))
           .PrefixUrlParameters(false)
           .Render();

%>
<script type="text/javascript">
function popup_onLoad() {
    alert('Here');
}
</script>

Regards,
Atanas Korchev
the Telerik team

[wendy]

Thank you so much for your help!
How to access popup cells inside the popup_onLoad event? I need to initialize some columns after popup form is loaded.
Thanks again,
Wendy

[Atanas Korchev]

Hello wendy,

 In the load event you can use this

$(this).find('some selector');

Regards,
Atanas Korchev
the Telerik team