Questions on UI for ASP.NET Core Forum

1 answer

891 views

How to set numeric text box max value based on template data item field

I am setting up a custom kendo window for a grid popup. On the window I have a form that will be posted via ajax. I am attempting to use a numeric text box in the template for the popup but I need to set the max value based on the data item that is using the popup. Is it possible to use a numeric text box in a kendo template and set the max value to a field in the data item for the template? Also, I can't seem to figure out how to set up validation for numeric text box either. How do I use a numeric text box that is not bound to the model but still validates the input?

This is the grid columns. The custom command opens my kendo window.

.Columns(columns =>
            {
                columns.Bound(m => m.Name).Groupable(false);
                columns.Bound(m => m.InventoryTypeName);
                columns.Bound(m => m.Description).Hidden().Groupable(false);
                columns.Bound(m => m.Active);
                columns.Bound(m => m.BulkItems).Hidden();
                columns.Bound(m => m.QuantityOnHand).Hidden();
                columns.Bound(m => m.QuantityAssigned).Hidden();
                columns.Bound(m => m.QuantityTotal).Hidden();
                columns.Bound(m => m.Brand).Title("Brand Required").Hidden();
                columns.Bound(m => m.SerialNumber).Title("S/N Required").Hidden();
                columns.Bound(m => m.ModelNumber).Title("Model# Required").Hidden();
                columns.Bound(m => m.Size).Title("Size Required").Hidden();
                columns.Bound(m => m.Color).Title("Color Required").Hidden();
                columns.Bound(m => m.CreatedBy).Title("Creator").Hidden();
                columns.Bound(m => m.CreatedDate).Title("Creation Date").Hidden();
                columns.Bound(m => m.UpdatedBy).Title("Last Editor").Hidden();
                columns.Bound(m => m.UpdatedDate).Title("Last Edit Date").Hidden();
                columns.Command(m => { m.Edit(); m.Custom("Assign").Click("AssignInventory"); });
            })

Here is the script for the custom command.

@*Assign inventory script for command button*@
    <script type="text/javascript">
        function AssignInventory(e) {
            e.preventDefault();

            var assignTemplate = kendo.template($("#AssignInventoryTemplate").html());
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#AssignInventoryWindow").data("kendoWindow");

            wnd.content(assignTemplate(dataItem));
            wnd.center().open();
        }

        function AssignmentTypeData() {
            var inventoryTypeId = $("#InventoryTypeId").val();

            return { inventoryTypeId: inventoryTypeId };
        }

        function FilterAssignees(e) {
            return {
                assignmentTypeId: $("#AssignmentType").val()
            }
        }
    </script>

This is my template script for the window.

<script type="text/x-kendo-template" id="AssignInventoryTemplate">
    <form id="AssignInventoryForm" class="k-edit-form-container" action="/Inventory/AssignInventory" method="post" kendo-validator="true">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />

        <div class="k-edit-label">
            <label>Assignment Type</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("AssignmentType")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignment Type")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                    });
                })
                .ToClientTemplate()
            )
        </div>

        <div class="k-edit-label">
            <label>Assign To</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("Assignee")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignee")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("AssignmentType")
                .ToClientTemplate()
            )
        </div>

        # if(data.BulkItems) { #
            <div class="k-edit-label">
                <label>Quantity To Assign</label>
            </div>
            <div class="k-edit-field">
                @*<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                    <input id="QuantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAssign" value="1" required="required">
                </span>
                <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAssign" id="QuantityToAssign_validationMessage" data-valmsg-for="QuantityToAssign">
                    <span class="k-tooltip-icon k-icon k-i-warning"></span>
                    <span class="k-tooltip-content">The QuantityToAssign field is required.</span>
                    <span class="k-callout k-callout-n"></span>
                </div>*@
                @(Html.Kendo().NumericTextBox()
                    .Name("QuantityToAssign")
                    .Value(1)
                    .Min(1)
                    .Max(@<text>#:QuantityOnHand#</text>)
                    .ToClientTemplate()
                )
                <span class="k-invalid-msg" data-for="QuantityToAssign"></span>
            </div>
        #}#
    </form>

</script>

In the template I can set up a numeric input but I'd like to use the Kendo numeric text box if possible. Either way, I need to validate that the numeric input is within the min/max range but can't seem to get it to validate.

NumericTextBox

answered on 03 Jan 2023

0 answers

111 views

Custom Popup Editor pass parameter to datasource keying off of Edit or Create

I have a custom popup editor which has a DropDownListFor which has a datasource. I need to pass a parameter to the Read method which is a .NET action. The parameter needs to be whether or not we are in update or create mode.

I currently pass CompanyId from the ViewData but I need one more param as mentioned above. Since Model is null always in Edit or Create mode I cannot key off of that.

            @Html.LabelFor(m => m.UserId)
            @(Html.Kendo().DropDownListFor(m => m.UserId)
             .OptionLabel("Select..")
             .DataTextField("Text")
             .DataValueField("Value")
                 .DataSource(dataSource => {
                        dataSource.Custom()
                                  .Type("aspnetmvc-ajax")
                                  .Transport(transport => transport.Read("Global_SalesUsers_DropDown", "Company", new {companyId = companyId}))
                                    .Schema(schema => schema.Data("Data"))
                                    .Events(events => events.RequestEnd("processViewDataResponse"));
                    })           
            )
           @Html.ValidationMessageFor(m => m.UserId)

Grid

asked on 03 Jan 2023

0 answers

113 views

Custom popup editor, getting value from Model in edit mode and using it as DropDownList datasource parameter

I have a custom popup grid editor (which is a partial view). Model is always null in the editor so I cannot access the Model to key off values.

I have a datasource for this dropdown list as you can see below. I need to add a userId parameter to this datasource when in edit mode. Unfortunately I have not been able to figure out how to get that value since Model is null.

Any tricks I can do here?

<div class="editor-container">
    <div class="row">
        <div class="col">
            @Html.LabelFor(m => m.UserId)
            @(Html.Kendo().DropDownListFor(m => m.UserId)
             .OptionLabel("Select..")
             .DataTextField("Text")
             .DataValueField("Value")
                 .DataSource(dataSource => {
                        dataSource.Custom()
                                  .Type("aspnetmvc-ajax")
                                  .Transport(transport => transport.Read("Global_SalesUsers_DropDown", "Company", new {companyId = companyId}))
                                    .Schema(schema => schema.Data("Data"))
                                    .Events(events => events.RequestEnd("processViewDataResponse"));
                    })           
            )
           @Html.ValidationMessageFor(m => m.UserId)
        </div>
    </div>

Grid

asked on 03 Jan 2023

0 answers

79 views

Is it possible to block script execution in PDFViewer?

Hello!

Is it possible to block java script execution in PDF documents in PDFViewer?

Or maybe it is possible to find out if there is a script in the document?

I will be grateful for any answer.

PDFViewer

asked on 02 Jan 2023

1 answer

102 views

Cascading drop down data source change

Hello, I am trying to change the read action of my child drop down based on the parent drop down value. In my scenario, the read action for my "Assignee" drop down needs to call the appropriate controller based on the "Assignment Type" drop down value. I'm struggling to find documentation on how I can update the drop down data source. I'm assuming the best approach would be to utilize the select event of the parent drop down to then update the child drop down read action, but I need some direction on how to approach this. The following is the setup of my cascading drop down inputs. I'm not sure if it matters, but these are being used in a template for a custom grid command that opens a kendo window popup.

    <div class="k-edit-form-container">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />
    </div>

    <div class="k-edit-label">
        <label>Assignment Type</label>
    </div>
    <div class="k-edit-field">
    @(Html.Kendo().DropDownList()
            .Name("AssignmentType")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignment Type")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                });
            })
            .ToClientTemplate()
        )
    </div>

    <div class="k-edit-label">
        <label>Assign To</label>
    </div>
    <div class="k-edit-field">
        @(Html.Kendo().DropDownList()
            .Name("Assignee")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignee")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetActiveInventoryTypes", "InventoryType").Data("FilterAssignees");
                });
            })
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom("AssignmentType")
            .ToClientTemplate()
        )
    </div>

DropDownList

answered on 02 Jan 2023

0 answers

211 views

CheckBoxGroup BindTo() Method cannot convert List<object> to string[]

I've posted my question in a wrong forum,

So I reposted the quesiton again here.

Scenario:

I am trying to enable and disable CheckBoxGroup items,

and it dependes on whether if the categories of the item has values.

For example, If there are two categorie, which are animals and fruits.

If I recieved no datas of fruits, I'll disabled the CheckBoxGroup item "fruits".

What I've tried so far

I search through documents and found this tutorial of the BindTo() method,

However, I got an error message saying "Cannot convert from System.Collections.Generic.List<MyCheckBoxItemModel> to string []

Questions

1. According to the method, how can I convert List<model> to string[] in my .cshtml ?

2. (Extension Question) In the tutorial, I'm awared that in the "InputGroupItemModel" there was a "Enabled" attribute.

Is it mean that if passed it to the front end and attached it with the BindTo() method, the CheckBoxGroup will automatically enable or disable the checkbox item?

(I'll show my code below)

Code

CheckBoxItemDto.cs

 public class CheckBoxItemDto
    {
        //public IDictionary<string, object> HtmlAttributes { get; set; }

        //public string CssClass { get; set; }

        public bool? Enabled { get; set; }

        //public bool? Encoded { get; set; }

        public string Label { get; set; }

        public string Value { get; set; }
    }

CheckBoxItemViewModel.cs

public class CheckBoxItemViewModel
    {
        public List<CheckBoxItemDto> Items { get; set; }

        public string[] CheckBoxGroupValue { get; set; }
    }

MyViewModel.cs

public class EqInstsDataViewModel
    {
        public IEnumerable<MyOtherViewModel> MyOtherViewModel { get; set; }
        public CheckBoxItemViewModel CheckBoxItemViewModel { get; set; }
    }

Controller

 public IActionResult GetChartPartialView()
        {
            try
            { 
                List<CheckBoxItemDto> checkBoxItemDto = GetCheckBoxItem();  //Get CheckBox Items
                CheckBoxItemViewModel checkBoxItem = new CheckBoxItemViewModel() { Items = checkBoxItemDto };

                MyViewModel myViewModel = new MyViewModel() { Items = checkBoxItem }

                return PartialView("~/Views/Shared/_MyPartialView.cshtml", myViewModel);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

public List<CheckBoxItem> GetCheckBoxItem()
        {            
            try
            {
                #region CheckBoxItems

                var itemsList = new List<CheckBoxItemDto>()
                {
                    new CheckBoxItemDto()
                    {
                        Label = "Animals",
                        Value = "1",
                        Enabled = true
                    },
                     new CheckBoxItemDto()
                    {
                        Label = "Friuts",
                        Value = "2",
                        Enabled = false
                    } ,
                };

                #endregion

                return itemList;
            }
            catch(Exception)
            {
                throw;
            }
        }

_MyPartialView.cshtml

@(Html.Kendo().CheckBoxGroup()     
        .Name("MyCheckBox")
        .BindTo(Model.CheckBoxItemViewModel.Items)  //Cannot convert from List<CheckBoxItemDto> to string[]
        .Value(Model.CheckBoxItemViewModel.CheckBoxGroupValue)
        .Layout("horizontal")
     )

CheckBoxGroup

asked on 30 Dec 2022

1 answer

115 views

asp.net core kendo editor inputs lose doubleclick bindings after editor undo action is executed.

I have an editor (classic mode) I use in an editor template like @(Html.Kendo().EditorFor(m => m.Content) for a grid to create and update HTML content coming from the database that has inputs and selects. When I first load the content to the editor, I have a processEditorInputs() JavaScript function that loops thru all the inputs and selects in the editor's iframe, adds a css class to them, and adds a dblclick event listener so they can be edited via a kendo dialog I have also in my view. Everything is working fine but I have an issue I have not been able to figure out. After the undo action is performed in the editor, either by ctrl+Z or toolbar action, all my inputs in the editor lose their doubleclick binding and therefore cannot be edited again via the dialog. I tried subscribing to the 'Execute' event of the editor to call my processEditorInputs() function again after undo is performed like below:

function onExecute(e) {
if(e.name == 'undo'){
processEditorInputs();
}
}

This seems to be only working after executing undo multiple times only and it does not seem reliable.

Here is my editor.

@(Html.Kendo()
.EditorFor(m => m.Content)
.StyleSheets(css => css.Add(Url.Content("~/css/site.css?3")))
.Tools(tools => tools
.Clear()
.ViewHtml()
.CustomTemplate(ct => ct.Template("<li class='k-tool-group k-button-group' role='presentation'><button type='button' onclick='openInsertCheckbox();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Checkbox'><i class='mdi mdi-checkbox-marked-outline'></i></button><button type='button' onclick='openInsertInput();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Input'><i class='mdi mdi-form-textbox'></i></button><button type='button' onclick='openInsertSelect();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Select'><i class='mdi mdi-form-dropdown'></i></button></li>"))
.Undo()
.Redo()
.Bold()
.Italic()
.Underline()
.Strikethrough()
.JustifyLeft()
.JustifyCenter()
.JustifyRight()
.JustifyFull()
.InsertUnorderedList()
.InsertOrderedList()
.Outdent()
.Indent()
.CreateLink()
.Unlink()
.InsertImage()
.InsertFile()
.SubScript()
.SuperScript()
.TableEditing()
.Formatting()
.CleanFormatting()
.FontName()
.FontSize()
.ForeColor()
.BackColor()
.Pdf()
.Print()
.CustomTemplate(ct => ct.Template("<li class='k-tool-group k-button-group' role='presentation'><button type='button' onclick='insertPageBreak();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Page Break'><i class='fas fa-grip-lines'></i></button>"))
).Events(events => events
.Execute("onExecute")
))

My javascript functions.

$(document).ready(function () {
$(".t-placeholder").on("dragstart", function (e) {
e.originalEvent.dataTransfer.setData("text", $(this).html());
});
processEditorInputs();
});

I would appreciate your assistance with this matter. Please let me know if more information is needed.

Thanks.

Editor

answered on 28 Dec 2022

0 answers

448 views

Html.Kendo().Switch() rendering as checkbox in a grid column

How comes this is displaying a checkbox? This is an ASP.NET CORE app. I do have the mobile CSS included (not sure if that is required)

Here is the column and template. It simply renders as a checkbox.

columns.Bound("").ClientTemplateId("switchTemplate");

<script id="switchTemplate" type="text/x-kendo-template">
    <text>
            @(Html.Kendo().Switch()
                .Name("switch#=Id#")
                .Checked(true)
                .ToClientTemplate()
            )
    </text>
</script>

Grid

Switch

asked on 28 Dec 2022

1 answer

236 views

How to make grid edit functionality working with tab click

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

answered on 22 Dec 2022

1 answer

187 views

Import Excel file to Kendo Grid using MVC Core - Razor

Hi,

I saw the question and answer about import excel file to kendo grid back in 2020. Do you have any update on the topic or do you have samples? I have the project that our customers want to import data from excel file to the database. They want to see data in the grid before save to table in database. Is it possible? Any advice. Thank you.

Grid

answered on 21 Dec 2022