Questions on UI for ASP.NET MVC Forum

1 answer

94 views

CascadeFrom not refreshing filtered list

Here's the definition of the two items that are linked by the CascadeFrom:
items.Add().Field(f => f.Country)
.ColSpan(1)
.Name("cmbCountry")
.Editor(e => e.ComboBox()
.AutoWidth(false)
.DataTextField("name")
.DataValueField("id")
.BindTo(@CountryModel.Countries)
.Placeholder("--- Select or Type Country"));
items.Add().Field(f => f.StateProvince)
.ColSpan(1)
.Name("cmbStatesProvinces")
.Editor(e => e.ComboBox()
.AutoWidth(false)
.AutoBind(false)
.Placeholder("--- Select State/Province ---")
.DataTextField("name")
.DataValueField("id")
.DataSource(dS => dS.Read(read => read.Action("GetStateList", "Address").Data("filterState")).ServerFiltering(true))
.CascadeFrom("cmbCountry")
@*.BindTo(@StatesProvinces.StateProvince)*@
);

Here's the AddressController.GetStateList:

public JsonResult GetStateList(string? Country)
{
JsonResult? retval = null;
if (!string.IsNullOrEmpty(Country))
{ var Country_ID = CountryModel.Countries.Where(s => s.name == Country).ToList()[0].code;
var State = StatesProvinces.StateProvince.Where(s => s.countryCode == Country_ID);
retval = Json(State.Select(s => new { id = s.id, name = s.name }).ToList());
}
else
retval = Json(StatesProvinces.StateProvince);

return retval;
}

This works for the first Country that is selected... afterwards - if the Country is changed, the GetStateList is not called again to refresh the related/CascadeFrom Combobox.

ComboBox

Form

General Discussions

Window

answered on 26 May 2022

4 answers

93 views

setting value of second drop down

I have a kendo form with two drop down list editors.

How can I from Javascript set the selected value of one of the drop downs.

Both drop downs are using server side filtering .

There is a possibility that the value i need to set is not in the already pulled data , but it is guaranteed to be in the full datasource.

Any direction would be appreciated.

    @(Html.Kendo().Form<KitMasterViewModel>()
        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidationKitMaster", "KitsOverview"), method = "POST" })
        .FormData(Model)
        .Layout("grid")

        .Grid( c => c.Cols(2).Gutter(4))
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(false));
        })
        .Items(items =>
        {
            items.AddGroup()
                .Label("Kit Information")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.SeqKit)
                        .Label(l => l.Text("Kit Number:"));
                    i.Add()
                        .Field(f => f.DateSchedule)
                        .Label(l => l.Text("Date Required"));

                    i.Add()
                        .Field(f => f.KitQty)
                        .Editor(E =>
                        {
                            E.NumericTextBox<int>()
                                .HtmlAttributes(new {style = "text-align:right" })
                                .Format("N0");
                        })
                        .Label(l => l.Text("Kit Quantity:"));

                    i.Add()
                        .Field(f => f.PickOrder)
                        .Label(l => l.Text("Pick Order:"))
                        .Editor(E => {
                            E.DropDownList()
                                .DataTextField("Text")
                                .DataValueField("Value")
                                .BindTo(new List<SelectListItem>()
                                {
                                                 new SelectListItem()
                                                 {
                                                     Text="Lowest Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.LowestQty}",
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="FIFO Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.FIFO}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Match Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.ClosestMatch}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Custom Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.Custom}"
                                                 },
                                });
                        });



                    i.Add()
                        .Field(f => f.ID)
                        .Label(" ")
                        .EditorTemplate("<input name='ID' type='hidden' />");
                });

            items.AddGroup()
                .Label("Source")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.IDBom)
                        .Label("Assigned Bill of Material")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .DataValueField("IDBom")
                                .DataTextField("LongName")
                                .HtmlAttributes(new { style = "width:100%"})
                                .Filter("contains")
                                .Events(item => item.Change("BillChanged"))
                                .MinLength(3)
                                .Height(520)

                                .Template("<table><tr><td style='width:200px' >#: data.PartNumber #</td><td style='width:50px'>#: data.Revision #</td></tr></table>")

                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax")
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetBOMMasters", "BillOfMaterial");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });
                                    }
                                );


                        });


                    i.Add()
                        .Field(f => f.IDAVL)
                        .Label("Assigned Constraint")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .Name("ddlAVL")
                                .HtmlAttributes(new { })
                                .DataTextField("NameAVL")
                                .DataValueField("IDAVL")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .MinLength(3)
                                .Filter(FilterType.Contains)
                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetAVLMasters", "BOMEdit");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });

                                    }
                                );


                        });
                });

        })
        )

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type='text'], textarea").attr('spellcheck', false);
    });

    function BillChanged(e) {
        var ddl = e.sender; 
        var selectedValue = ddl.value(); 

        $.ajax({
            url: "@Url.Action("GetBOMMasters", "BillOfMaterial",new { id = UrlParameter.Optional, operation = UrlParameter.Optional })" + "/" + selectedValue,
            type: 'POST',
            contentType: 'application/json;',
            data: JSON.stringify({ id: selectedValue }),
            success: function (bom) {
                if (bom.Data.length>0) {
                    var idAVL = bom.Data[0].IDAVL;

                    // I need to set the value of ddlAVL to idAVL here
                    // but i am at a loss to how to do it

                    debugger;
                }
            }
        });
    }

    function NavigateComponents() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new {id=Model.ID, operation = "components"})";
    }

    function NavigateKitInfo() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new { id = Model.ID, operation = "info"})";
    }

    function NavigateOverview() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview", new { id = UrlParameter.Optional, operation = UrlParameter.Optional})";
    }

</script>

DropDownList

Form

answered on 21 Apr 2022

1 answer

213 views

buttontemplate and theming

I needed to remove the clear button from a form.

So used the buttontemplate functionality ... unfortunately the styling for the button does not match the theme.

what class should I use to have the button match the overall theme. i used the class names that seemed right to me.

@(Html.Kendo().Form<BomMasterViewModel>()

        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidateBomMaster", "BOMEdit"), method = "POST" })
        .FormData(Model)
        .FocusFirst(true)
        .ButtonsTemplate("<div class=\"k-form-buttons\">" + 
                            "<button class=\"k-button k-primary k-form-submit\" type=\"submit\">Submit</button>"+
                         "</div>")

Form

answered on 04 Apr 2022

1 answer

80 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

2 answers

456 views

Export contents of Form to PDF

I have a form generated using Html.Kendo().Form. I would like to be able to export the contents of the form (labels, textboxes, checkboxes) to a new PDF on the click of a button, and then subsequently merge it with another PDF.

Is there a generic method that would enable me to do this, rather than using the PdfProcessing Library to create a new document and then add each of the fields from the ViewModel one by one.

Thank you.

Form

answered on 29 Sep 2021

0 answers

227 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

asked on 16 Sep 2021

1 answer

272 views

server side (controller) error message for password field not showing on client side

I have two password fields on a form. I have used your demo way to change there editor to password boxes. If I validate in the controller and pass back an error message indicating they need to match the error message is not displayed. How do I correct this. I am open to preventing the submit with a little javascript validation so it never goes to the server. Please Advise.

                        i.Add()
                            .Field(f => f.Password)
                            .EditorTemplateHandler("setPasswordEditor")
                            .Label(l => l.Text("Password:"));

                        i.Add()
                            .Field(f => f.ConfirmPassword)
                            .EditorTemplateHandler("setConfirmPasswordEditor")
                            .Label(l => l.Text("Confirm Password:"));

        function setPasswordEditor(container, options) {
            container.append($("<input type='password' class='k-textbox k-valid' id='Password' name='Password' title='Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:Password' aria-describedby='Password-form-hint'>"));
        }
        function setConfirmPasswordEditor(container, options) {
            container.append($("<input type='password' class='k-textbox k-valid' id='ConfirmPassword' name='ConfirmPassword' title='Confirm Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:ConfirmPassword' aria-describedby='Password-form-hint'>"));
        }

            if (model.Password!=model.ConfirmPassword)
            {
                ModelState.AddModelError("Password", "Passwords Must Match");
                ModelState.AddModelError("ConfirmPassword", "Passwords Must Match");
                return View("UserEditView",model);
            }

Form

answered on 24 Aug 2021

1 answer

624 views

How do I add intermediate buttons within a form, in order to hide/show Item Groups?

I've recently discovered the Form widget, and I like how it simplifies coding/layout of the labels and fields. However, in a form you often want to step through the form, only showing subsequent fields on the basis of answers to previous fields, or just to simplify what is presented in one go.

I have found that hide/show of a Group can be achieved on response to say a switch; eg

function onIsManagerChange(e) {
       var form = $("#requestForm").getKendoForm();
       var groups = form.wrapper.find(".k-form-fieldset");
       $(groups[1]).toggle(!e.checked);
 }

But what if I just want to show the first group, and then require the user to press a Next button. Is it possible to add a button, say to the end of:

  @(Html.Kendo().Form<AccessRequest.Models.Main>()
        .Name("requestForm")
        .HtmlAttributes(new { action = "Create", method = "POST" })
        .Items(items =>
        {
            items.AddGroup()
                .Label("You and your manager's details")
                .Items(i =>
                {
                    i.Add()
                         .Field(f => f.StaffName)
                         .Label(l => l.Text("My name"));
                    i.Add()
                       .Field(f => f.ManagerName)
                       .Label(l => l.Text("Manager name"));
------ ADD BUTTON HERE
                });
            items.AddGroup() ...

OR, is there another widget I should use that would suit this functionality better?

Form