View Model Values in Grid edit Popup

4 posts, 0 answers
  1. Jonatan
    Jonatan avatar
    14 posts
    Member since:
    Feb 2014

    Posted 04 Dec 2015 Link to this post

    I am attempting to use model values to determine which controls should be visible or not when the popup opens.

    When I attempt to access the values of the model in order to decide my course of action, the values are always the same, as if the model has not been instantiated with values.

    How do I access those values from the popup??

     Here is the code for the popup:

    @model BlueWebApp.Models.Note
     
    <div style="height: 240px;">
        <div class="editor-label">
            @Html.HiddenFor(model => model.NoteID)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NoteHeader)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.NoteHeader, new { style = "width: 80%" })
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NoteText)
        </div>
        <div class="editor-field">       
            @Html.TextAreaFor(model => model.NoteText, new { style =  "height: 100px; width: 80%" })
        </div>
        <div class="editor-field">
            @Html.CheckBoxFor(model => model.NoteIsFile)
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.NoteFileGuid)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NoteFileName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.NoteFileName, new { @readonly = "readonly" , style = "width: 80%" } )
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.NoteFileExtension)
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.GroupGuid)
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.ModelGuid)
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.CreatedDate)
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.UpdatedDate)
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.UpdatedUser)
        </div>
    </div>
    <div>
        @(Html.Kendo().Upload()
            .Name("files")
             
            .Events(events => events.Success(
            @<text>
            function(e)
            {
                if(e.operation == 'upload')
                {
                    $('#NoteFileGuid').val(e.response.guid);
                    $('#NoteFileGuid').trigger('change');
         
                    $('#NoteFileExtension').val(e.response.extension);
                    $('#NoteFileExtension').trigger('change');
                     
                    $('#NoteFileName').val(e.response.fileName);
                    $('#NoteFileName').trigger('change');
                }
                else if (e.operation == 'remove')
                {
                    $('#NoteFileGuid').val('');
                    $('#NoteFileGuid').trigger('change');
     
                    $('#NoteFileExtension').val('');
                    $('#NoteFileExtension').trigger('change');
     
                    $('#NoteFileName').val('');
                    $('#NoteFileName').trigger('change');
                }
            }
            </text>))
             .Multiple(false)
             .Async(a => a.Save("Save", "Note")
                          .Remove("Remove", "Note", new { guid = Model.NoteFileGuid, extension = Model.NoteFileExtension })
                          .AutoUpload(true)
            )
    )
     
    </div>
    <br />
     
    <script>
        var model = @Html.Raw(Json.Encode(Model)); 
         
        alert (model.NoteID); //Always 0
        alert (model.NoteIsFile); // Always false
         
        if(model.NoteIsFile)
        {
            $(".k-upload").show();
        }
        else
        {
            $(".k-upload").hide();
        }
     
            $("#NoteIsFile").change(function () {
     
            if(this.checked) {
                $(".k-upload").show();
            } else {
                $(".k-upload").hide();
            }
        });
     
     
    </script>

     

    Here is the Grid Model:

    Model(m =>
                {
                    m.Id(p => p.NoteID);
                    m.Field(p => p.NoteIsFile);
                })

    I realize that there are other similar threads, but I have not been able to deduct any reasonable solution to my issue from them.
  2. Jonatan
    Jonatan avatar
    14 posts
    Member since:
    Feb 2014

    Posted 04 Dec 2015 Link to this post

    can someone be of aid here?
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jonatan
    Jonatan avatar
    14 posts
    Member since:
    Feb 2014

    Posted 04 Dec 2015 Link to this post

    Anyone?
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 08 Dec 2015 Link to this post

    Hello Jonatan,

    I answered the support ticket opened on the same subject. I would like to ask you to continue the discussion in only one thread to avoid duplication.

    Here is a quote of the answer in the support thread:

    Thank you for getting in touch with us. Please note that the guaranteed response times for forum threads is 48 hours (business days). That being said, you will need to determine which thread type is more suitable for you in order to receive a timely answer.

    As to the question, the widget's editor template is actually evaluated on the client. It will be treated as a Kendo Template. The model during server serialization is empty one. This is due the fact that the editing happens on the client, and the edited model is JavaScript and not .NET object anymore.

    That being said, you will need to use Kendo Template syntax to show/hide editors:
    Copy Code
    # if (data.NoteIsFile) { #
    <div>
        @(Html.Kendo().Upload()
            .Name("files")
            .....
        )
    </div>
    # } #
    The above code will be evaluated on every row edit.

    You can also use the MVVM visible binding to show hide the element. The Editor template of the grid is bound to the edited model using Kendo MVVM:
    Copy Code
    <div data-bind="visible: NoteIsFile">
        @(Html.Kendo().Upload()
            .Name("files")
            .....
        )
    </div>


    Regards,
    Georgi Krustev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready