Questions on UI for ASP.NET MVC Forum

1 answer

64 views

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.

Button

Checkbox

Grid

View

answered on 23 Oct 2023

1 answer

275 views

The checkboxfor is not working after upgrading the kendo version from 2020.1.114 to 2022.1.119

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>&nbsp;
                                @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

Checkbox

answered on 11 May 2023

1 answer

100 views

How to use checkbox with javascript?

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

Checkbox

answered on 01 Nov 2022

0 answers

66 views

how to conditionally click a checkbox based on another cells length when the user tabs out or clicks out of a cell

https://stackoverflow.com/questions/73719432/how-to-conditionally-click-a-checkbox-in-telerik-grid-based-on-another-column-in

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");
    }

Checkbox

Editor

Grid

asked on 14 Sep 2022

1 answer

94 views

Bug in Safari Browser

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'

Checkbox

Grid

answered on 20 Jan 2022

0 answers

85 views

automatic establishment checked (checkbox)

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("Выезд на район"))

Checkbox

asked on 11 Jan 2022

2 answers

107 views

Checkbox

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")))

Checkbox

Grid

answered on 13 Dec 2021

1 answer

78 views

Grid Popup with bool or bool? doesn't work

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

answered on 09 Dec 2021

1 answer

167 views

Can I style the output of the CheckBoxGroup using the ASP.NET MVC wrapper?

I'm trying to arrange the checkboxes inside a CheckBoxGroup to mimic an existing WebForms layout (embedded in Sharepoint). The current UI has checkboxes in columns, and looks a lot cleaner than what I get with just a "horizontal" layout of the CheckBoxGroup. Any advice?

Checkbox

answered on 28 Sep 2021

0 answers

222 views

Form does not handle boolean values in Kendo ASP.NET Core

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

Checkbox

Editor

Form