[Solved] Getting the Selected Value in a Template after document.ready

[TestSubject8]

Hello, my team and I have recently purchased your MVC UI components and I am having some difficulty with the popup editor for the grid and get the selected value of a droplist.

So basically I have a telerik MVC grid which has popup editor.  I have set the popup editor to be my own custom template.  What I need to do is show or hide certain controls based on what one of my dropdownlists has selected.  

As it stands right now I have some jquery that handles the selected value change event for the droplist and this works fine, my only issue is that when the popup loads the value of the droplist it is always the first in the list regardless of what is selected.  I know my droplist is binding to the model correctly because after the load is finished it selects the proper item in the list I just have the wrong set up controls showing up...

It's seems to me that I am having a timing issue... Is there anyway to check after the $(document).ready event has fired to get the proper value?

Any advice would be very much appreciated!

[Atanas Korchev]

Hello Testsubject8,

Could you provide more info about the implementation? Pasting some code or attaching a sample project would help.

By the way your account is currently not associated with a commercial license. You may consider asking the person who made the purchase to add you as a licensed developer so you can fully benefit from Telerik support services.

Regards,
Atanas Korchev
the Telerik team

[TestSubject8]

Hi Atanas, I did put in a request to get the license from management and am still waiting to receive the info...

Here is my view:

@ModelType MembersPortal.models.Address

 

@Code      

       

     

    Dim grid = Html.Telerik().Grid(Model) _

                        .Name("GridResidences") _

                        .Pageable(Function(paging) paging.PageSize(5)) _

                        .Filterable() _

                        .Sortable() _

                        .EnableCustomBinding(True) _

                        .Editable(Function(e) e.DisplayDeleteConfirmation(True).Mode(GridEditMode.PopUp).TemplateName("AddressTemplate")) _

                        .DataKeys(Function(keys) keys.Add(Function(c) c.AddressId)) _

                        .ToolBar(Function(commands) commands.Insert().ButtonType(GridButtonType.ImageAndText)) _

                        .DataBinding(Sub(databinding)

                                             databinding.Ajax().Select("SelectBinding", "Address")

                                             databinding.Ajax().Insert("InsertBinding", "Address")

                                             databinding.Ajax().Update("SaveBinding", "Address")

                                             databinding.Ajax().Delete("DeleteBinding", "Address")

                                     End Sub)

     

    grid.Columns(Function(columns) columns.Bound(Function(o) o.AddressType).Width(100))

    grid.Columns(Function(columns) columns.Bound(Function(o) o.Street).Width(100))

    grid.Columns(Function(columns) columns.Bound(Function(o) o.StartDate).Width(100))

    grid.Columns(Function(columns) columns.Bound(Function(o) o.EndDate).Width(100))

     

         

    grid.Columns(Function(columns) columns.Command(Sub(commands)

                                                                  commands.Edit().ButtonType(GridButtonType.ImageAndText)

                                                                  commands.Delete().ButtonType(GridButtonType.ImageAndText)

                                                          End Sub))  

    

 

    grid.Render()

     

End Code

Here is my Template:

@ModelType MembersPortal.Models.Address
<table>
<tr>

    <td>

            <div>

                @Html.LabelFor(Function(model) model.StartDate)

            </div>

            <div>           

                @Html.Telerik.DatePickerFor(Function(model) model.StartDate)

            </div>

        </td>

        <td>

            <div>

                @Html.LabelFor(Function(model) model.EndDate)

            </div>

            <div>

                @Html.Telerik.DatePickerFor(Function(model) model.EndDate)               

            </div>

        </td>

    </tr>

    <tr>      

        <td>

            <div>

                @Html.LabelFor(Function(model) model.Ownership)

            </div>

            <div>             

 

                @Html.Telerik.DropDownListFor(Of String)(Function(o) o.Ownership).BindTo(New SelectList(Model.OwnershipTypes, "Value", "Text", Model.Ownership))

                                                                             

            </div>

        </td>

        <td id="ownershipOptionColumn">   

            <div id='divTitleNames'>

                    <strong>Title Names will go here</strong>

            </div>

 

            <div id='divHotelStay'>

                    <strong>Hotel stay options will go here</strong>

                     

            </div>

            <div id='divLandlordInfo'>

                    <strong>Landlord info here.</strong>                   

            </div>   

        </td>       

    </tr>

</table>

 

<script type="text/javascript">

 

    $('#divTitleNames').hide();

    $('#divHotelStay').hide();

    $('#divLandlordInfo').hide();

 

 

 

    $(document).ready(function () {

 

        var dropList = $('#Ownership').data('tDropDownList');

 

        if (dropList.value() == 2001) {

            $('#divHotelStay').show();

 

            $('#divTitleNames').hide();

            $('#divLandlordInfo').hide();

        }

        else if (dropList.value() == 2000) {

            //landlord name and telephone here.

            $('#divLandlordInfo').show();

 

            $('#divTitleNames').hide();

            $('#divHotelStay').hide();

        }

        else {

            $('#divTitleNames').show();

 

            $('#divHotelStay').hide();

            $('#divLandlordInfo').hide();

        }

                     

        $('#Ownership').bind('valueChange', function (e) {

             

 

            alert("inside change");

 

            if (dropList.value() == 2001) {

                $('#divHotelStay').show();

 

                $('#divTitleNames').hide();

                $('#divLandlordInfo').hide();

            }

            else if (dropList.value() == 2000) {

                //landlord name and telephone here.

                $('#divLandlordInfo').show();

 

                $('#divTitleNames').hide();

                $('#divHotelStay').hide();

            }

            else {

                $('#divTitleNames').show();

 

                $('#divHotelStay').hide();

                $('#divLandlordInfo').hide();

            }

 

        });

 

    });  

         

 

</script>

Thank you!

[Atanas Korchev]

Hello Testsubject8,

 The problem is that document.ready will fire only once when the page is loaded. I suggest you handle the OnEdit event of the grid and move your code there.

Regards,
Atanas Korchev
the Telerik team

[TestSubject8]

Works great!  The only issue is that I already had a javascript method in the onEdit to centre the pop up editor.  Is there anyway to add more than one onEdit method call?

Thank you! 

[TestSubject8]

Was just discussing my issue with a co-working and he mentioned just calling a local method that would call the other two... Which works great!

Thanks again for your help!