popup template cascading dropdowns and antiforgery

[Randy Hompesch]

My kingdom for a good sample.

I am trying to use a custom popup template with a couple of dropdownlists and have them cascade. This is in asp.net core (NOT MVC).

My big questions are how to do the cascade and pass forgeryToken with it and how to receive the cascade call (i.e. the function signature). Below is what I have now and it doesn't work.

Another question I have is, what should the signature of the c# function be for the second (traits) dropdown be on the server.

Currently, I have:

public ActionResult OnPostCropsReadAsync([DataSourceRequest] DataSourceRequest request)

How do I get the id of the first dropdownlist to know how to filter?

THanks … Ed

Here's the popup template and below that is the calling grid.

01.@model TCWP.Pages.IndexModel.CertificateModel
02.@{
03.    ViewData["Title"] = "Certificate";
04.}
05.<container>
06.    <div class="row">
07.        <div class="col-md-6">
08.            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
09.            <div class="form-group">
10.                <label>Crop</label>
11.                @(Html.Kendo().DropDownListFor(m => m.CropId)
12.                                                        .DataValueField("CropId")
13.                                                        .DataTextField("CommonName")
14.                                                        .AutoBind(true)
15.                                                        .HtmlAttributes(new { style = "width:100%" })
16.                                                         .AutoWidth(true)
17.                                                         .Filter(FilterType.Contains)
18.                                                         .DataSource(source =>
19.                                                         {
20.                                                                source
21.                                                                .Ajax()
22.                                                                .PageSize(40)
23.                                                                .Read(r => r.Url("?handler=CropsRead")
24.                                                                .Type(HttpVerbs.Post).Data("forgeryToken")
25.                                                                );
26.                                                         }).SelectedIndex(0)
27.                )
28.
29.            </div>
30.            <div class="form-group">
31.                <label>Trait</label>
32.                @(Html.Kendo().DropDownListFor(m => m.TraitId)
33.                                                        .DataValueField("TraitId")
34.                                                        .DataTextField("TraitDesc")
35.                                                        .AutoBind(true)
36.                                                        .HtmlAttributes(new { style = "width:100%" })
37.                                                         .AutoWidth(true)
38.                                                         .Filter(FilterType.Contains)
39.                                                         .DataSource(source =>
40.                                                         {
41.                                                                source
42.                                                                .Ajax()
43.                                                                .PageSize(40)
44.                                                                .Read(r => r.Url("?handler=TraitsRead")
45.                                                                .Type(HttpVerbs.Post).Data("GetCascadeData")
46.                                                                );
47.                                                         }).SelectedIndex(0)
48.                )
49.
50.            </div>
51.        </div>
52.    </div>
53.</container>
54.
55.<script type="text/javascript" >
56.  function GetCascadeData()
57.    {
58.        debugger;
59.        var tmp =  $.extend(true, {}, forgeryToken(),
60.            {
61.                CropId = $("#Input_CropId").Input.val();
62.            });
63.        return tmp;
64.
65.    }
66.</script>

 

 

 

01.    @(Html.Kendo().Grid<IndexModel.CertificateModel>()
02..Name("grid")
03..ToolBar(t =>
04.{
05.    t.Create().Text("Add New");
06.})
07..HtmlAttributes(new { style = "height: 850px;" })
08..Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CertificateEditTemplate")
09.    .Window(w => w.Title("Certificate").Width(650)))
10..Events(evt => { evt.Edit("OnEdit"); })
11.            .Columns(columns =>
12.            {
13.                columns.Bound(c => c.CertId).Width(100).Visible(false);
14.                columns.Bound(c => c.CropName).Width(150);
15.                columns.Bound(c => c.TraitName).Width(150);
16.                columns.Bound(c => c.UserFullName).ClientTemplate("#=UserFullName#").Width(150).Visible(false);
17.                columns.Bound(c => c.OriginCountryName).Width(150);
18.                columns.Bound(c => c.IssuingCountryName).Width(150);
19.                columns.Bound(c => c.YearIssued).Width(110)
20.                    .HtmlAttributes(new { style = "text-align:right; " });
21.                //   .HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
22.                columns.Bound(c => c.ExpirationDate).Width(150).Format("{0:d}").HtmlAttributes(new { style = "text-align:right; " });
23.                //.HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }); ;
24.                columns.Command(c =>
25.                {
26.                    //    c.Destroy().Text("Delete");
27.                    c.Edit();
28.                }).Visible(User.IsInRole("Admin")).Width(85);
29.                                    columns.Command(c => c.Custom("Print").Click("OnRunReport").HtmlAttributes(new { style = "height:25px" })).Width(70);
30.                                })
31.            .Resizable(resize => resize.Columns(true))
32.            .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
33.            .Scrollable()
34.            .Groupable()
35.            .Filterable()
36.            .Sortable()
37.            .Pageable() //p => { p.PageSizes(true); })
38.            .DataSource(ds =>
39.                                ds.Ajax()
40.                         .Batch(true)
41.                                .Events(ev => ev.Error("errorHandler"))
42.                                .ServerOperation(false)
43.                                .Read(r => r.Url("?handler=CertsRead").Data("forgeryToken"))
44.                                .Update(u => u.Url("?handler=CertsUpdate").Data("forgeryToken"))
45.                                .Create(c => c.Url("?handler=CertsCreate").Data("forgeryToken"))
46.                                .Model(m =>
47.                                {
48.                                    m.Id(c => c.CertId);
49.
50.                                })
51.                .PageSize(20)
52.
53.                )

[Tsvetomir]

Hi Randy,

When the Kendo UI DropDownList widgets are configured, the second one would initiate its request only when a change in the first has been made. Therefore, the retrieved data for the second one should depend on the selected value of the first one. An example of cascading DropDownList widgets could be found here:

https://demos.telerik.com/aspnet-core/dropdownlist/cascadingdropdownlist

The concept here is to use the Data() option to pass the additional data. However, if you would like to send the AntiForgeryToken as well, the Data() should be configured as follows:

source.Read(read =>
  {
      read.Action("GetCascadeProducts", "DropDownList").Data("additionalInfo");
  })

function additionalInfo() {
    return $.extend(true, {}, kendo.antiForgeryTokens(), {categories: $("#categories").val()});
}

Feel welcome to contact me in case additional assistance is required.


Best regards,
Tsvetomir
Progress Telerik

[Randy Hompesch]

Hi,

So if I have the c# and markup below that.

WHat should the signature be for the Trait read so that I can put a where clause on the ddlTrait? Right now I have:

public ActionResult OnPostTraitsReadAsync([DataSourceRequest] DataSourceRequest request)
{
    IEnumerable<Trait> lst = new List<Trait>();
    try
    {

        lst = (from a in _db.Traits
               orderby a.TraitDesc
               select a).ToList();

    }
    catch (Exception ex)
    {
        var err = new ErrorLog(_env, _db);
        err.LogError(ex, User.Identity.Name);
    }
    return new JsonResult(lst.ToDataSourceResult(request));
}

 

@(Html.Kendo().DropDownList()
      .Name("ddlCrop")
      .DataValueField("CropId")
      .DataTextField("CommonName")
      .AutoBind(true)
      .HtmlAttributes(new { style = "width:100%" })
          .AutoWidth(true)
          .DataSource(source =>
          {
              source
              .Ajax()
              .PageSize(40)
              .Read(r => r.Url("?handler=CropsRead")
              .Type(HttpVerbs.Post).Data("forgeryToken")
              );
          }).SelectedIndex(0)
  )

 

@(Html.Kendo().DropDownListFor(m => m.TraitId)
      .DataValueField("TraitId")
      .DataTextField("TraitDesc")
      .HtmlAttributes(new { style = "width:100%" })
          .AutoWidth(true)
          .DataSource(source =>
          {
              source
              .Ajax()
              .PageSize(40)
              .Read(r => r.Url("?handler=TraitsRead")
              .Data("GetCascadeData")
              );
          })
        .Enable(false)
.AutoBind(false)
.CascadeFrom("ddlCrops")
.SelectedIndex(0)

  )

[Tsvetomir]

Hi Randy,

Based on the provided code snippets, the Read configuration should be something similar to:

.Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))

And the handler:

<script>
    function forgeryToken() {
        var model = $("#grid").getKendoGrid().editable.options.model;

        return $.extend(true, {}, kendo.antiForgeryTokens(), { categories: model.Category.CategoryID});
    }
</script>

On the server-side, you should accept the additional parameter as:

public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request,  string categories)

Give this suggestion a try and let me know in case additional assistance is required.

 

Best regards,
Tsvetomir
Progress Telerik