Scheduler customeditor - apend patrial view

[Frank]

Hello,
I need to append partial view into custom editor.

Scenario: When the user clicks the add button in the editor, another line (div) should appear in the custom editor with a drop down list.
Or is there another solution instead of using the patriarchal view? Any examples are welcome :)

Thanks.

Regards
Frank

[Frank]

Hi,

No answers, because it's not possible to use partial view in Scheduler customEditor? Or I should use jquery append method and create dropdownlist dynamically?

Regards
Frank

[Frank]

Hi Ivan,

I found a solution. I created a function that adds an array of feature IDs to the model before sending the data to the controller.

 

<script>
    $(".k-scheduler-update").click(function () {
        var i = 1;
        var arrIdFeature = [];

        $("input[id*='ddlFeatureList']").each(function () {
           /*console.log("ddl[", i++, "] selected val: ", $(this).val());*/
            arrIdFeature .push($(this).val());
        });

        var container = $(this).closest(".k-scheduler-edit-form");
        var uid = container.attr("data-uid");
        var scheduler = $("\#myscheduler").data("kendoScheduler");
        var model = scheduler.dataSource.getByUid(uid);
        model.set("IdFeature", arrIdFeature );
</script>

Best regards
Frank

[Ivan Danchev]

Hi Frank,

Thank you for sharing your approach.

Looking at the logic it appears that the difference with the project I sent is that there is an IdFeature field in the model (a list or an array) that is supposed to have the values of the DropDownLists. So instead of submitting the model and accessing different fields to which the DropDownLists are bound (e.g., Feature1, Feature2...), you need a separate field that holds those values. Thanks again for sharing and elaborating more on the scenario.

[Ivan Danchev]

Hello Frank,

Displaying the content of a partial view in the Scheduler's custom editor follows the same logic used to display a partial view in a standard MVC view. Assuming you have set up a custom editor in the Scheduler, e.g.,

.Editable(editable => {
    editable.TemplateName("CustomEditorTemplate");
})

and you have the custom editor view (CustomEditorTemplate.cshtml) in the Views\Home\EditorTemplates folder, then to display a partial view (let's say it is called Partial1.cshtml) in the custom editor, you need to add the following in the custom editor view:

@Html.Partial("Partial1")

The content of the partial view (e.g., a DropDownList) will be displayed along with the other content that is present in the custom editor view.

Alternatively, you can declare the DropDownList in the custom editor itself next to the other fields it contains. This way using a partial view can be avoided. That is if using a partial view is not required for some specific reason in your scenario.

For more details on using a custom editor in the Scheduler, see https://docs.telerik.com/aspnet-mvc/html-helpers/scheduling/scheduler/how-to/custom-editor

Regards,
Ivan Danchev
Progress Telerik

[Frank]

Hi Ivan,
Thanks for reply. I can append partial view which contains drop down list with datasource. But when I click create button in console in header setion is only selected value only from first loaded patrial view (loaded while customeditor is opening first time), there are no selected values from other patrial view:

<patrial view>
<dropdownlist>  --> gets selected value
</patrial view>

<patrial view>
<dropdownlist> --> no selected value
</patrial view>

<patrial view>
<dropdownlist> --> no selected value

How to get selected value from all dropdownlists?

Thanks in advance!

Regards
Frank
</patrial view>

[Ivan Danchev]

Frank,

I am not sure exactly which button you refer to here:  "click create button", but if you are attempting to create a new event, most of its fields will have no value, since it is a new event, i.e. it doesn't have title, description, etc. data set in it yet. Thus the inputs in the Scheduler's editor will be empty, and initially the DropDownList won't show a specific value selected.

This can be worked around by specifying a default value for the respective field. Let's say I want to use a DropDownList to display several predefined event descriptions. Partial2 will contain the following:

@model SchedulerCustomEditor.Models.MeetingViewModel

@(Html.Kendo().DropDownListFor(model => model.Description)
	.HtmlAttributes(new { data_bind = "value:description" })
	.DataTextField("Text")
	.DataValueField("Value")
	.BindTo(new[] {
		new { Text = "No description", Value = "No description" },
		new { Text = "Description 1", Value = "Description 1" },
		new { Text = "Description 2", Value = "Description 2" }
	})
	.ToClientTemplate()
)

 Note that the DropDownListFor helper is used, it is bound to the Description field and its value is set like this:

.HtmlAttributes(new { data_bind = "value:description" })

Lower case must be used for the built-in fields such as title, description, start, etc. For custom fields the casing should match that of the field in the model, e.g., MyField:

.HtmlAttributes(new { data_bind = "value:MyField" })

This partial view will be loaded in the custom editor as previously discussed:

<div class="k-edit-label">
	@(Html.LabelFor(model => model.Description))
</div>
<div data-container-for="description" class="k-edit-field">
	@Html.Partial("Partial2")
</div>

As you can see the data of the DropDownList contains 3 items. If I don't explicitly specify a default value for the Description field to which the DropDownList is bound, on creating a new event that field is null thus nothing will displayed as selected in the DropDownList. If I want a value to be displayed as selected, for example the "No description" value, I have to set the default value of the Description field in the Scheduler DataSource Model configuration:

.DataSource(d => d
	.Model(m => {
		m.Id(f => f.MeetingID);
		m.Field(f => f.Title).DefaultValue("No title");
		m.Field(f => f.Description).DefaultValue("No description");
		m.RecurrenceId(f => f.RecurrenceID);
	})
	.Events(e => e.Error("error_handler"))
	.Read("Meetings_Read", "Home")
	.Create("Meetings_Create", "Home")
	.Destroy("Meetings_Destroy", "Home")
	.Update("Meetings_Update", "Home")
)

Now the default field value matches the value of the first item in the DropDownList and it will be displayed as selected.

The approach is valid for one or multiple DropDownLists loaded in the custom editor.

[Frank]

 

Hi Ivan,
thank you for the answer. Unfortunately, only the value in the first drop-down list is passed to the controller.

My patrial view:

@model MyApp.Models.ViewModel.MyViewModel

@{ 
    var index = Guid.NewGuid().ToString();
}

<div class="k-edit-label">
    @(Html.LabelFor(model => model.IdFeature))
</div>
<div data-container-for="IdFeature" class="k-edit-field">


    @(Html.Kendo().DropDownListFor(model=>model.IdFeature)
    .HtmlAttributes(new { data_bind = "value:IdFeature", Name = "ddlFeatureList" + Guid.NewGuid(), Id = "ddlFeatureList" + Guid.NewGuid() })
    .OptionLabel("-- select --")
    .DataTextField("Text")
    .DataValueField("Value")
    .ValuePrimitive(true)
    .DataSource(source =>
    {
        source.Read(read => { read.Action("FeatureList", "Scheduler"); });
    })
)
</div>

 

I must generate Id of dropdown list, because I get error in case of more than one instance of dropdownlist on page.

I can get all values using function:

$(".k-scheduler-update").click(function () {
        var list = [];

        $("input[id*='ddlFeatureList']").each(function () {
            console.log("ddl[", i++, "] selected val: ", $(this).val());
            list.push($(this).val());
        });

        var postData = { IdFeature: list };
                
        console.log(postData);
})

In my viewmodel I have:

public IList<int> IdFeature {get; set;}

[Frank]

Hi Ivan,

Do you have any info? What I'm doing wrong?

Thanks in advance!

Best regards
Frank

[Ivan Danchev]

Hi Frank,

Attached to this reply you can find a sample project that demonstrates how to use DropDownLists loaded from partial views as editors for the fields in the Scheduler's custom editor. Two partial views (Partial1 and Partial2) are loaded in the custom editor. Each of those views contains a DropDownList.

To verify that the proper values are sent to the Create action:
1. Set a break point in the Create action.
2. Run the Index page.
3. Double-click a slot in the Scheduler to add a new event.
4. The editor opens. Select a Title and a Description in the DropDownLists.
5. Save the event.

The Create action will be called and the new event data will be accessible in the action through the "meeting" object. Both the selected Title and Description values are sent as expected to the server.

I hope this example points you in the right direction with regard to implementing the desired scenario.

[Frank]

Hi Ivan,

Thank you for your answer. Maybe I wasn't to precise. In my scenerio I might have mulitple dropdownlists with list of features (ddlFeatureList1, ddlFeatureList2.... ddlFeatureListX). When user click button "add new feature" patrialview with dropdonlist will be apend to editor. So for example user want to  choose three different features - one feature per doprdownlist. Finally user click button "create" and three feature IDs should be posted to controler as an array [IdFeature[0] = 1, IdFeature[1] = 3, IdFeature[2] = 4].
Question is: how can I post an array with selected IDs?

Thanks in advance

Best regards
Frank

[Ivan Danchev]

Frank,

Could you modify the project I attached and demonstrate the issue in it?