SignalR Grid, custom popup, @Model is null, ValueFor returns null

[RubiCom]

Hello,

 

I have a signalr bound grid. The grid has custom popup editor with Tabstrip. First tab - upload picture, or show picture based on ImageUrl field of currently edited record.

So, I'm trying to access:

 - @Model.ImageUrl  - it throws null exception and breaks the page overall, or

- @Html.ValueFor(model=>model.ImageUrl) - it is always null, but I'm sure there are values in database

I have tried the same, just to test it, with for example Firstname field from the same model - the same result

@Html.LabelFor(model=>model.ImageUrl) and @Html.EditorFor(model=>model.ImageUrl) work fine, I can see the label and the correct value inside a textbox.

<div class="row">
            <div>
                @Html.ValueFor(model => model.Firstname) @*this is always null, but I need a value*@
            </div>
            <div>
              @* @Model.Firstname  this breaks whole page with null exception*@
            </div>
            <div>
                @Html.EditorFor(model => model.Firstname) @*this works correctly*@
            </div>
        </div>

 

/////////// below is the code, why I need the value

<div id="pictures" class="picture dropZoneElement">
                @if (Html.ValueFor(model => model.ImageUrl) != null)
                {
                    <div class="k-edit-label">
                        <img src="Files/Images/" + @Html.ValueFor(model => model.ImageUrl) />
                    </div>
                }
                else
                {
                    <div class="textWrapper">
                        <p><span>+</span>Add Image</p>
                        <p class="dropImageHereText">Drop image here to upload</p>
                    </div>
                }
            </div>

 

Kind regards

DC

 

[RubiCom]

Hello again. I have replicated the issue using your example "signalR-bound-grid" . I can send you the code, but I cannot attach it in here. Changes to replicate:

Index.cshtml ,add custom template to edit grid items:

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomTemplate"))

If you edit an item on the grid, you get a popup with a custom template. On that custom template, I would like to use @Html.ValueFor , for example, for (model => model.ProductName) as per below code of CustomTemplate.cshtml

 

@model KendoUIMVC5.Models.ProductViewModel

<div class="k-edit-label">
    @Html.LabelFor(model => model.ProductName)
</div>
<div class="k-edit-field">
    @Html.EditorFor(model => model.ProductName)
</div>
<div class="k-edit-field">
    Here should be the value: @Html.ValueFor(model => model.ProductName)
</div>

 

Attached is a screenshot which shows the outcome and the missing value.

Regards

 

 

[Viktor Tachev]

Hello DC,

 

Thank you for the description of the scenario. Using SignalR is useful when you would like to show real-time changes and refresh the Grid widget. 

However, I would recommend using this functionality when the Grid is not editable. With editing enabled the users can experience unexpected results. For example if two users edit the same record simultaneously and press update only the changes for the first user will be applied and the ones from the second will be ignored. Thus, if you need to have editing in the Grid I suggest not using SignalR.

 

With that said, if you would like to show a value from the model in the popup you can use MVVM and attribute binding. Add an element and specify the data-bind attribute to it. This way the respective value will be retrieved and shown in the popup. Check out the article below that describes attribute binding in more detail:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/attr

 

Regards,
Viktor Tachev
Progress Telerik