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);
}
Related
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.
I am using a 'Telerik UI for ASP.NET Core' DropDownList. The datasource is requesting a list of SelectItems where one of the item has the Selected value on true. My guess is the right behaviour would be for the item to be automatically selected but it is not.
Dropdownlist:
#(Html.Kendo().DropDownList()
.Name("CategoryId")
.DataSource(ds => ds.Read(read => read.Action("GetQuestionCategories", "Questions").Data("getParentCategoryId")).ServerFiltering(true))
.DataValueField("Value")
.DataTextField("Text")
.Events(events => events.Change("reloadLearningObjectives"))
.HtmlAttributes(new { #class = "form-control wide-full" })
)
The json text it is requesting:
[{"Disabled":false,"Group":null,"Selected":false,"Text":"Algemeen","Value":"62357618-ac53-4092-86d1-6c583b286bbe"},{"Disabled":false,"Group":null,"Selected":false,"Text":"Ballonvaren","Value":"9489c310-7549-45c7-a518-43f8016b2c3b"},{"Disabled":false,"Group":null,"Selected":false,"Text":"Paramotor","Value":"78d1a658-93f1-4eca-8b75-ad4bd4d33ef1"},{"Disabled":false,"Group":null,"Selected":false,"Text":"Part 66","Value":"b7b5845a-e2e0-45be-ad55-002180f8360b"},{"Disabled":false,"Group":null,"Selected":false,"Text":"ROC-Light","Value":"84ddea95-bda6-46b3-9660-2383d46033a0"},{"Disabled":false,"Group":null,"Selected":true,"Text":"Zweefvliegen","Value":"7367e8ff-d4a6-4766-b6b8-59f24f6e7b08"}]
As you can see the last item has "Selected" to true but when the page is done loading it still says that an item needs to be selected.
You can use the dataBound event, and set the value of the widget there using the value() method , reference code sample :
https://www.telerik.com/forums/dropdownlist-mvc---set-default-value-at-runtime#BV2tUQaLKkaPPOq5WaA9FQ
So you can try to modify above code sample to meet your requirement :
dataBound: function(e) {
// handle the event
$.each(e.sender.dataSource._data, function (key, value) {
if(value.Selected==true){
e.sender.value(value.Value);
}
});
},
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)
)
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');
}
});
});
Let's say I have a view with Kendo treeview bounded to remote data source.
#(Html.Kendo().TreeView()
.Name("schemas")
.DataTextField("name")
.DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
.Events(events => events
.Select("onSelected")))
So the treeview just makes a call to the Schemas action in my FormsController
Also on the same page I have a form, which is simply the textbox and a button to submit the form
#using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
}
So I am just wondering what is the best way to handle user input and pass it to the the Load action of the FormsController? The user should select one of the options in the treeview and enter the value into textbox.
Or should I create some sort of viewmodel for my view with all my nodes inside + two additional fields for the textbox input and selected node?
I would take out the form elements, leaving:
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
The following js, this will pick up the tree item id on select.
The second function will call your Form controller action with the parameters.
<script>
var selectedNodeid;
//get the tree selected item id
function onSelected(e) {
var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
selectedNodeid = data.id;
}
//button on click event
$(document).ready(function () {
$("#next")
.bind("click", function () {
//get parameters then pa
var id = selectedNodeid;
var rootElementName = $('#rootElementName).val()
$.ajax({
url: "Form/Load",
data:{id:id,rootElementName:rootElementName},
success: function () { }
});
}
})
</script>
I haven't tested this but it should be close.
I look forward to someone adding a better approach.