Editor rendered different after `Convert to Telerik application`.

5 posts, 0 answers
  1. Alberto
    Alberto avatar
    10 posts
    Member since:
    May 2019

    Posted 04 Sep Link to this post

    Hi There,
    In our original ASP.NET MVC 5 application, the following editor (in the code box below) was a dropdown control with three states: `Not set`, `true` and `false`.

    After converting the VStudio solution into a Telerik application we got the two states checkbox in the attached image. Why?

    Thanks,

    Alberto

    <div class="form-group">
        @Html.LabelFor(m => m.validated, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.validated, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.validated)
        </div>
    </div>
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1036 posts

    Posted 06 Sep Link to this post

    Hi Alberto,

    Telerik Applications have their own custom editors defined in the Views/Shared/EditorTemplates/ folder of the project. I suppose that the validated field in question is of type bool. In such a case, the application will automatically use the Boolean.cshtml as its editor template. In order to avoid that, I would suggest you to either remove the Boolean.cshtml from the EtitorTemplates folder or directly use a DropDownListFor (or Kendo().DropDownListFor) helper instead of the EditorFor.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Alberto
    Alberto avatar
    10 posts
    Member since:
    May 2019

    Posted 06 Sep in reply to Veselin Tsvetanov Link to this post

    Hi Veselin,

    This is the modification you suggested:

    <div class="form-group">
        @Html.LabelFor(m => m.validated, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @(
                Html.Kendo().DropDownListFor(model => model.validated)
            )
            @Html.ValidationMessageFor(m => m.validated)
        </div>
    </div>

     

    Here is the result:

    • No options inside the dropdown control. See attached image.

    My ASP.NET application was converted to a Telerik application and all the files are in place.

    Why?

     

    Thanks,

    Alberto

     

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1036 posts

    Posted 10 Sep Link to this post

    Hello Alberto,

    Apart from configuring the model binding for the DropDownList widget, you will also need to feed that widget with data. To do that, I would suggest you to use the BindTo() configuration method:

    @(
    	Html.Kendo().DropDownListFor(model => model.validated)
    	.Value(value)
    	.BindTo(new List<SelectListItem> {
    		new SelectListItem() { Text = "true", Value = "True" },
    		new SelectListItem() { Text = "false", Value = "False" },
    		new SelectListItem() { Text = "Not set", Value = "" }
    	})
    )

    Within the above, you will also notice that I have used the Value() method. That is in place to translate the boolean/null value to the text values available in the widget options:

    @{ 
    	var value = Model.validated.ToString();
    }

    Attached you will find a small sample implementing the above suggestions.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Alberto
    Alberto avatar
    10 posts
    Member since:
    May 2019

    Posted 20 Sep in reply to Veselin Tsvetanov Link to this post

    It worked, thank you!
Back to Top