I am working with a Kendo grid on my MVC webapp. The grid is bound by data passed to the View. An event currently exists to load another grid when a row is selected/clicked on. I have been tasked with adding a column that contains a checkbox based on a boolean value from the record in the dataset. Until this point, everything is working.
My question is, how can I add an event to whenever the checkbox is checked and unchecked while keeping the event fro when a row is selected? That is, if the user clicks on the row, I still want it to load the other grid based on the selected row, but if the user clicks on the checkbox in the row, I want it call a function to toggle the value and update the database (essentially call function changeFlag). As a test, I put an alert() call in the function which runs when a row is selected, but the function never fires if I check/uncheck the checkbox.
I have some exposure to MVC, but Telerick/Kendo are completely new for me. Any ideas, tips, or guidance would be greatly appreciated.
It is my checkbox code
<div class="row">
<div class="form-group">
<label class="form-label">
<span><b>@ResourceManagerClass.GetResource("CCTV Available", ProjectSession.Employee.LanguageId)</b></span>
@Html.Kendo().CheckBoxFor(x => x.IsCCTVAvailable).Checked(true).Enable(false).HtmlAttributes(new { @class = "form-control", @onclick = "ManageCCTVCameraInputBox(event)" }).ToClientTemplate()
</label>
<br />
<label class="form-label">
@ResourceManagerClass.GetResource("CCTV Detail", ProjectSession.Employee.LanguageId)
</label>
<br />
@(Html.TextAreaFor(x => x.CCTVDetail, 3, 5, new { @class = "form-control textAreaWith" }))
</div>
</div>
It is my function
function ManageCCTVCameraInputBox(e) {
debugger
if (e != undefined) {
if (e.currentTarget.checked && e.currentTarget.id == "IsCCTVAvailable") {
$('#CCTVDetail').prop('disabled', false);
} else {
$('#CCTVDetail').prop('disabled', true);
}
} else {
if ('@Model.IsCCTVAvailable' == "True") {
$('#CCTVDetail').prop('disabled', false);
}
else {
$('#CCTVDetail').prop('disabled', true);
}
}
}
This code is working fine in kendo 2020.1.114 after upgrading the checkboxes are not working so I have added Toclienttemplate() at the end of the textbox after adding Toclienttemplate() it is showing error unexpected error<
So I didn't made any changes in script also but from where it is binding I didn't get it
Can anyone suggest me a answer or any reference link
Thanks
HTML
<input type="checkbox" id="chkShowPopEventDay" />
JavaScript
$("#chkShowPopEventDay").kendoCheckBox({
label: "ShowPopEventDay",
checked: true,
});
I tried to use the check box by referring to the address, but the message appears as follows. Is there anything wrong?
Reference URL: https://demos.telerik.com/kendo-ui/checkbox/index
function onSave(e)
{
//console.log(e.container.find("input[name=eTmfCompletenessComment]").val());
//if (e.values.eTmfCompletenessComment.length > 3)
//{
// e.values.eTmfCompletenessActive == true;
//}
//if (e.container.find("input[name=eTmfCompletenessComment]").val().length > 3)
//{
// console.log(e.container.uid);
// //checkbox cell is in editmode
// e.container.find("input[name=eTmfCompletenessActive]").checked == true;
// //e.container.item.find("input[name=eTmfCompletenessActive]").checked == true;
//}
$(document).on("keyup", "#eTmfCompletenessComment", function () {
function dirtyField(data, fieldName) {
if (data.dirty && data.dirtyFields[fieldName]) {
return "<span class='k-dirty'></span>"
}
else {
return "";
}
}
var commentcheck = $(this).val()
console.log('$(this).val() =', $(this).val())
var grid = $('#Grid').data("kendoGrid");
var items = grid.items();
if (commentcheck.length > 3) {
//var gc = $(this).parents(".k-")
$(this).parents(".k-master-row").find('input[type="checkbox"]').prop("checked", true);
//items.each(function () {
var dataItem = $(this).parents(".k-grid-cell").find('input[type="hidden"]');
set.dataItem.dirty = true;
dataItem.set(true);
dataItem.dirtyField.set(true, eTmfCompletenessActive)
//})
}
})
console.log("onSave");
}
When activating the editable.mode in a checkbox it makes the UI control non clickable.
Details: When the mouse hover the checkbox it activates the editable mode on the checkbox but right after that when I try to click it the UI does not response.
Kendo UI version: '2016.1.112'
a model is returned to the form in which parameter "Raion" bool has a value of true or false.
How to make it so that CheckBox itself takes the required value?
@(Html.Kendo().CheckBox().Name("Raion").Label("Выезд на район"))
public class ServiceViewModel
{
*****
public bool Raion { set; get; }
****
}
@model service.Models.ServiceViewModel@(Html.Kendo().CheckBox().Name("Raion").Label("Выезд на район"))
I want to add checbox to my grid. I tried to use the Select() method but the method shows an error No overload for method Select takes 0 arguments. I need to pass to controller a collection of id elements that the user has selected.
@(Html.Kendo()
.Grid<Model>()
.Name(gridId)
.Columns(col =>
{
col.Select();
col.Bound(fds => fds.Id);
col.Bound(fds => fds.CreateDateTime).ClientTemplateDateTime();
col.Bound(fds => fds.IdClient);
})
.Pageable()
.Sortable()
.DefaultPageable()
.Resizable(c => c.Columns(true))
.AllowCopy(true)
.DataSource(d =>
d.Ajax()
.Model(m => m.Id(vm => vm.Id))
.Read("GetAnalysis", "Export")))
Hi,
I wonder if you could help. I have a Kendo UI grid that has 2 bool elements, this is a MVC core 3.1 project. When I click on the Create or Update buttons on the Edit popup, nothing happens - no errors and the controller action is not being called.
I have code similar to the following code for the grid itself :
@(Html.Kendo().Grid<MyObject>()
.Name("MyGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(m => m.Id(e => e.Id))
.PageSize(20)
.Read(read => read.Action("Read", "ActionRead"))
.Create(create => create.Action("Create", "ActionCreate"))
.Update(update => update.Action("Update", "ActionUpdate"))
.Events(events => events.Error("onError"))
)
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Bound(p => p.IsCompleteStatus).ClientTemplate("<input type='checkbox' #= IsCompleteStatus ? checked='checked' :'' # />");
columns.Bound(p => p.IsPendingStatus);
columns.Command(command =>
{
command.Edit();
command.Custom("Remove").Click("onRemove").Visible("isRemoveable").IconClass("k-icon k-i-delete k-icon-32");
command.Custom("Restore").Click("onRestore").Visible("isRestorable").IconClass("k-icon k-i-reset k-icon-32");
});
})
.ToolBar(toolbar => toolbar.Create().Text("Add Status"))
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.GridDefaults()
And this is what I have in my view for the popup window:
<form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Id" type="hidden" />
@Html.FormGroupFor(m => m.Name)
@Html.EditorFor(m => m.IsCompleteStatus)
@Html.FormGroupFor(m => m.IsPendingStatus)
</form>
The popup displays fine. However clicking on the Create button (when I hit 'Add') or the Update button (when I click on 'Edit') does absolutely nothing, unless I actually check the checkbox.
If it is a bool type, it also doesn't let me leave it empty, so it needs it checked all the time.
If it a bool? type, it doesn't let me interact with it at all - I cannot check the boxes, so no Create/Update either. If I remove the checkboxes from the view, it displays and works fine. Can you help please? Thank you
I have a login form that have a boolean item (Remember Me) which is a bool value, The form shows the field as Input (Text Field) .. This is the form :
@(Html.Kendo().Form<SchoolCore.Models.ViewModel.LoginViewModel>()
.Name("LoginForm")
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.HtmlAttributes(new { action = "Login", method = "POST" })
.Items(items =>
{
items.Add()
.Field(f => f.Email)
.Label(l => l.Text("Email :"));
items.Add()
.Field(f => f.Password)
.Label(l => l.Text("Password :"));
items.Add()
.Field(f => f.RememberMe))
.Label(l => l.Text("Remember Me"));
})
)
What I miss?
Thanks in advanced