View Model Values in Grid edit Popup

[Jonatan]

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.

[Jonatan]

can someone be of aid here?

[Jonatan]

Anyone?

[Georgi Krustev]

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