Cascading problem after the 2nd list

[Jason]

I am trying to cascade 3 levels but is failing the 3rd drop down.  Is this not possible? Everything works until I select the 500 scale then nothing else the 100 scale option does not do anything

 

   <h4>Select Grid:</h4>
    @(Html.Kendo().DropDownList()
              .Name("MainGrid")
              .HtmlAttributes(new { style = "width:50%" })
              .OptionLabel("Select Grid Section...")
              .DataTextField("Gridid")
              .DataValueField("Gridid")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeMainGrid", "GridPrint");
                  });
              })
    )

    <h4 style="margin-top: 2em;">500 Scale:</h4>
    @(Html.Kendo().DropDownList()
              .Name("Grid500")
              .HtmlAttributes(new { style = "width:50%" })
              .OptionLabel("Select Map 500 Scale...")
              .DataTextField("MapName")
              .DataValueField("Pagenumber")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeGrid500", "GridPrint")
                      .Data("filterGrid500");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("MainGrid")
    )



     <button class="k-button k-primary" id="get" style="margin-top: 0em;  ">Add this Grid</button>
    <script>
            function filterGrid500() {
                return {
                    MainGrid: $("#MainGrid").val()
                };
            }
    </script>

    <h4 style="margin-top: 2em;">100 Scale:</h4>
    @(Html.Kendo().DropDownList()
              .Name("Grid100")
              .HtmlAttributes(new { style = "width:50%" })
              .OptionLabel("Select Map 100 Scale...")
              .DataTextField("MapName")
              .DataValueField("Pagenumber")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeGrid100", "GridPrint")
                      .Data("filterGrid100");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("Grid500")
    )
    <button class="k-button k-primary" id="get2" style="margin-top: 0em;">Add this Grid</button>
    <script>
           function filterGrid100() {
                return {
                    Grid500: $("#Grid500").val()
                };
            }
    </script>
</div>
<script>

 

[Jason]

I have been debugging this extensively and still can not get it to work. ALL of the json calls are working and are being properly filtered on the server. When I remove the line CascadeFrom from the Grid100 the drop down works but ONLY on the first load. So I can select the MainGrid which then populates the Grid500 which then populates the Grid100, however with the CascadeFrom removed if I go back to the MainGrid or Grid500 the Grid100 does not clear and rebind the data.  If I leave CascadeFrom in, the Grid100 never comes out of the greyed-out stage. the dropdown never works at all.  So I KNOW the data is getting pulled in. I am using the Kendo UI v2016.3.1118  version of Kendo 

@(Html.Kendo().DropDownList()
             .Name("Grid100")
             .HtmlAttributes(new { style = "width:50%" })
             .OptionLabel("Select Map 100 Scale...")
             .DataTextField("MapName")
             .DataValueField("Pagenumber")
             .DataSource(source =>
             {
                 source.Read(read =>
                 {
                     read.Action("GetCascadeGrid100", "GridPrint")
                     .Data("filterGrid100");
                 })
                 .ServerFiltering(true);
             })
             .Enable(true)
             .AutoBind(false)
             //.CascadeFrom("Grid500")
   )




   <script>
       function filterGrid100() {
           return {
               Grid500: $("#Grid500").val()
           };
       }
   </script>

[Dimitar]

Hello Jason,

I tested with a local sample that is identical to this example here (which also uses 3 cascading DropDownLists), but I was unable to recreate the described behavior. 

Do you notice the same behavior in the demo as well? If yes, may I ask you to provide a simple isolated example which showcases the issue? You can also provide a short screencast which demonstrates the behavior at your end. This way I will be able to troubleshoot the issue and help you to resolve it.

Regards,
Dimitar
Telerik by Progress

[Jason]

The demo's work fine  I have attached screenshots as well as the complete code plus a saved text version of the JSON files for you to look at.  THANKS for the help

[Dimitar]

Hello Jason,

Thank you for the code sample and additional resources provided.

In the attached file (TelerikMvcAppCascadingGrid.zip)  you will find a working example, which I managed to setup by following your code and guidelines. 

You will notice that in GridPrintController I have made a few modifications to the actions which return the data for the DropDownList widgets. In order to make the cascading functionality work, you will have to pass the selected option from the first and second DropDownLists as to the controller action. I have changed the signature of the  GetCascadeGrid500 and GetCascadeGrid100 to the following:

public JsonResult GetCascadeGrid500(int? MainGrid)

The problem with your code was that you did not filter the DataSource according to the selected parameter from the DropDownList and therefore no results were found for your DropDownList (or showed incorrectly). To fix this I have added the following piece of code in GetCascadeGrid100 and GetCascadeGrid500:

if (MainGrid != null)
{
  result = result.Where(p => p.Gridid == MainGrid).ToList();
}

Additionally, the MainGrid and Grid500 parameters are populated through the .Data() method in the Home/Index.cshtml, which specifies the JavaScript function to pass parameters to the remote service:

function filterGrid500() {
  return {
    MainGrid: $("#MainGrid").val()
  };
}

I hope this solves your issue. 

Regards,

Dimitar

Telerik by Progress

[Jason]

Thanks for the help although your example works it is not conducive to my code. Perhaps there is a problem with the String results versus Integer.  If you query my functions directly I get JSON results on all three.  I don't see that you changed much of the code except that you defined an Int and are using the Int Gridid.  However I am not using that to filter (the GridID is just an autonumber in my database), I am using the String MapName to help drill down and filter.   Or perhaps I am missing something completely??    Would you like to see the Model? would that help?  I am using EF. 

[Jason]

I think I found my problem.  You said " you will have to pass the selected option from the first and second DropDownLists as parameter to the controller action"  so looking at my code, I was not getting the MAPNAME and passing that to the next dropdown.Here I changed the DataValueField.  The reason the first dropdown is using GridID is because that JSON file uses a different field name than the other two drop downs. The JSON files for anyone looking at this would show you my goof up if you looked at the "field names" 

 

      <h4>Select Grid:</h4>
    @(Html.Kendo().DropDownList()
              .Name("MainGrid")
              .HtmlAttributes(new { style = "width:50%" })
              .OptionLabel("Select Grid Section...")
              .DataTextField("Gridid")
              .DataValueField("Gridid")

              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeMainGrid", "GridPrint");
                  });
              })
    )

@(Html.Kendo().DropDownList()
              .Name("Grid500")
              .HtmlAttributes(new { style = "width:50%" })
              .OptionLabel("Select Map 500 Scale...")
              .DataTextField("MapName")
              .DataValueField("MapName")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeGrid500", "GridPrint")
                      .Data("filterGrid500");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("MainGrid")

    )




    <h4 style="margin-top: 2em;">100 Scale:</h4>
    @(Html.Kendo().DropDownList()
              .Name("Grid100")
              .HtmlAttributes(new { style = "width:50%" })
              .OptionLabel("Select Map 100 Scale...")
              .DataTextField("MapName")
              .DataValueField("Pagenumber")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeGrid100", "GridPrint")
                      .Data("filterGrid100");
                  })
                  .ServerFiltering(true);
              })
              .Enable(true)
              .AutoBind(false)
              .CascadeFrom("Grid500")

    )

[Jason]

I still have a question, becuase I need the PAGENUMBER from the Grid500 and the Grid100 dropdowns. Can I gram that to put inside the button click?  Technically I can make the DataVal on the Grid100 the Page number, but I need to pass other variable from that JSON record.  Back in ASP scripting pages and a form I could post hidden values, is that possible here?

[Dimitar]

Hello Jason,

Thank you for getting back to us.

I have provided an answer in the support ticketing system and we can continue our communication there in order to prevent thread duplication.

 

Regards,
Dimitar
Telerik by Progress

[Chris]

I had the exact same issue.  Your posted solution doesn't work, and doesn't solve the problem.  I can cascade from 1 to 2 and 1 to 3, but not 2 to 3.  It just simply won't work whatsoever.  There's no solution given from your posted code, and nothing in any forum or any documentation.  The samples are just too basic and I've followed every line of code to no avail.  Exactly what is the issue with having more than 2 cascading dropdowns?

[Dimitar]

Hello Chris,

I would suggest opening a separate support thread where we can continue our communication. There you can provide an isolated example that demonstrates the issue so that we are able to examine the exact scenario and advise you further. 

Regards,
Dimitar
Progress Telerik