We Keep Coding

Passing Data from one Kendo Grid to another which resides inside a popup window

I'm using .net-core and Kendo-UI for a project.
I'm trying to pass checked(Each row has a checkbox) values from one Kendo Grid to another which resides in a popup window.
This popup window is a bootstrap 4 popup that is called when the button is clicked.
The problem is the grid in the popup window will not show the checked data.
How it works is the user checks off rows in the grid and then clicks a button which then fires a POST to the server.
This post contains an array of the checked rows.
This array is then passed back through the controller to the other Kendo Grid inside the popup.
What I expect to happen is the data passed to the controller is passed back to this new grid.
What is happening is the second grid remains empty.
I checked the network tab in chrome tools and the controller is returning the data.
Its just not finding its way to the grid.
Any ideas?
// Here is the controller function, ajax call and the kendo grid(popup).
// Controller function
public IActionResult SendInventoryGridData
([DataSourceRequest]DataSourceRequest request, string ViewBy, int BrandId, string[] Asins)
{
List <InventoryVM> Datalist= new List<InventoryVM>();
foreach(string Asin in Asins)
{
Datalist.Add(new InventoryVM { Asin = Asin, Quantity = 1 });
}
var results = Datalist;
return Json(results.ToDataSourceResult(request));
}
// Ajax Post
$.ajax({
type: "POST", url: '#Url.Action("SendInventoryGridData", "InventoryManager")',
success: function (data) {
console.log(data);
},
data: { "ViewBy": viewBy, "BrandId": brandId, "Asins": Asins },
accept: 'application/json'
});
`````````````````````````````````````````````````````````````````````````
// Kendo Grid in popup window
`````````````````````````````````````````````````````````````````````
#(Html.Kendo().Grid<Grit.WebUI.Models.Inventory.InventoryVM>()
.Name("gReviewFeedbackCombo")
.Columns(columns =>
{
columns.Bound(p => p.Asin).Title("Asin");
columns.Bound(p => p.Quantity).Editable("productNameEditable");
})
.Scrollable(sc => sc.Endless(true))
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Asin))
.Read(read => read.Action("SendInventoryGridData", "InventoryManager")))
.Events(events => events.DataBound("dataBound")
)
)
``````````````````````````````````````````````````````````````````````````

After some thought I found an answer. I removed the ajax call and let the grid call the function itself. Worked like a charm.

request.Form[control id] getting null after submit button click

My html controls in my view are bound to my view Model properties
like so:
#Html.ListBoxFor(
m => m.SelectedServiceLine,
Model.ServiceList,
new { id = "Service", multiple = "multiple", style = "width: 150px;" })
I am fetching the selected value using request.Form[Service] and passing it as a parameter to my procedure when clicking submit but when I change my values and submit I am not able to retrieve value in request.Form[Service] as I am getting null here.
Note: during rebind after clicking the submit button the value in SelectedServiceLine is taken from request.Form[Service].

The key used in post is the name of the control, not the id.
To get the value of this control:
#Html.ListBoxFor(m => m.SelectedServiceLine, Model.ServiceList, new { id = "Service", multiple = "multiple", style = "width: 150px;" })
you should use
Request.Form["SelectedServiceLine"]

KendoUI cascading drop-downs does not update after binding once

I am using KendoUI cascading Drop-downs and it seems to be working fine for most part but it seems to have a little problem. However, I think it is a problem with my implementation NOT with the tool because on their Demo page here it seems to work fine. Also, I tried to follow the code exactly as it as to make sure that I do get the same behavior. Now, I am seeing following behavior:
I select an option in parent drop down and then click on the child drop down then it calls the conroller action correctly
It continues to do that as far as results for child dropdown are empty
Once it gets some value to bind child drop-down with, it stops making any call to the controller despite of what I choose in parent drop-down or child-dropdown.
I am not sure why it happens. Following is my code snippet:
Controller code
[HttpGet]
public ActionResult FindAlignmentsByTeamId(int teamId)
{
var teams = Client.GetAlignmentsByTeamId(teamId);
return Json(teams, JsonRequestBehavior.AllowGet);
}
.cshtml code
#* Perent Dropbox *#
<tr>
<td>EmployeeID</td>
<td><b>#Model.EmployeeId</b></td>
</tr>
<tr>
<td>Team</td>
<td>
#(Html.Kendo().DropDownList()
.Name("Team")
.DataTextField("TeamName")
.DataValueField("TeamId")
.DataSource(source => source.Read(read => read.Action("GetAllTeams", "Employee")))
)
</td>
</tr>
#* Child DropBox *#
#(Html.Kendo().DropDownList()
.Name("Alignment")
.DataTextField("AlignmentName")
.DataValueField("AlignmentId")
.DataSource(source => source.Read(read => read.Action("FindAlignmentsByTeamId", "Employee").Data("FilterAlignment"))
.ServerFiltering(true)
)
.CascadeFrom("teamId")
.AutoBind(false)
)
<script type="text/javascript">
function FilterAlignment() {
return {
teamId: $("#Team").val()
}
};
</script>
I am not sure what happens after it is bound successfully with a value for the first time so that it has a reason to believe that now it does not have to be checking on any OnChange() events anymore? Any ideas?

The id of your parent DropDownList is "Team", not "teamId". You need to update your child DropDownList to cascade from the correct id:
#(Html.Kendo().DropDownList()
.Name("Alignment")
.DataTextField("AlignmentName")
.DataValueField("AlignmentId"
.DataSource(source => source.Read(read => read.Action("FindAlignmentsByTeamId", "Employee").Data("FilterAlignment"))
.ServerFiltering(true)
)
.CascadeFrom("Team")
.AutoBind(false)
)

Editorfor checkbox field onclick

I have an editorfor field that is a checkbox and when it is changed from false to true and the form is submitted i need to track that the checkbox was changed and is marked true. Also it has to be a javascript or jquery function.
<div class="editor-field">
#Html.EditorFor(model => model.IsPublic)
</div>
If i need to explain this better please tell me. I just cant think of how else to explain.Thanks

Hope following code will do it:
#Html.HiddenFor(model => model.IsPublicChanged) #*create special model field for handling change event*#
$().ready(function () {
//catch change event and assign value to hidden field
$("input[name=IsPublic]").on("change", function () {
$("input[name=IsPublicChanged]").val('true');
});
});
Or some different js-code if you want to see if value of checkbox was changed comparing to it's initial value:
$().ready(function () {
var trackValue = $("input[name=IsPublic]").prop("checked");
$("form").on("submit", function () {
var actualValue = $("input[name=IsPublic]").prop("checked");
if (actualValue != trackValue) {
$("input[name=IsPublicChanged]").val('true');
}
});
});

How to disable cascaded Kendo DropDownLists?

I have two Kendo DropDownLists, I want to disable second DDL when the value of the first DDL is loaded and bounded to the value of my viewmodel.
So I have such code:
#(Html.Kendo().DropDownList()
.Name("FormGroupId")
.HtmlAttributes(new { style = "width:250px" })
.OptionLabel("Select form group...")
.Template("#= data.Name # - #= data.Version #")
.DataTextField("Name")
.DataValueField("Id")
.Events(events =>
{
events.Change("onFormGroupChanged");
events.Select("onFormGroupSelected");
events.Cascade("onFormGroupCascaded");
})
.DataSource(source =>
{
source.Read(read => { read.Route(RouteConfig.GetFormGroupNames.Name); });
})
)
and
#(Html.Kendo().DropDownList()
.Name("Schema")
.HtmlAttributes(new { style = "width:250px" })
.OptionLabel("Select schema...")
.DataTextField("SchemaName")
.DataValueField("SchemaId")
.DataSource(source =>
{
source.Read(read =>
{
read.Route(RouteConfig.FilterFormSchemas.Name).Data("filterSchemas");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("FormGroupId")
)
I subscribe to the Cascade event on first DDL and try to disable second DDL from there, but it doesn't work.
JS:
function onFormGroupCascaded(e) {
$("#Schema").data("kendoDropDownList").enable(false);
}

You are already doing that.
Add events to first drop-down list:
.Events(e =>
{
e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})
Using JavaScript, handle the change event
<script>
function change() {
// get a reference to the dropdown list
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// disable the dropdown list
dropdownlist.enable(false);
};
</script>
Looks like you are already doing this. What kind of error are you getting?

This is an old question, but binding to the CascadeFrom event will not prevent the drop down from being enabled. This is due to code in the Kendo library re-enabling it later in the execution order.
Instead, bind to the DataBound event to disable the drop down. This event occurs later in the execution stack and disables the input after the Kendo code enables it.

This code works in angular directive configuration
dataBound: function (e) {
this.enable(false);
}