Questions on UI for ASP.NET Core Forum

1 answer

481 views

Make a cascading inline grid edit template for ASP.NET Core

Hello I have searched multiple forum responses on similar issues for this answer seen the cascading dropdown demos and the MVC5 dropdown demo. I can't seem to make my cascading inline grid dropdown recognize the parent object to enable the second dropdown.

I have been able to access the cascade effect when the initial dropdown is not in the grid. So I can make a dropdown that cascades I just cant seem to get it to work in the grid while editing.

Any suggestions? Thanks!

code below

subedit.cshtml

@model CircuitStatus
@(Html.Kendo().DropDownList()
          .Name("subdrop")
          .OptionLabel("Select option")
          .DataTextField("station_name")
          .DataValueField("station_id")
          .DataSource(source =>
            {
                source.Read(read =>
                        {
                            read.Action("station_Read", "CircuitStatus");
                        }).ServerFiltering(true);
            })
        )

cascadedropdowntemplate.chtml

@(Html.Kendo().DropDownList()
          .Name("circuit")
          .HtmlAttributes(new { style = "width:100%" })
          .OptionLabel("Select product...")
          .DataTextField("circuit_name")
          .DataValueField("circuit_id")
          .DataSource(source =>
                  {
              source.Read(read =>
              {
                  read.Action("cirucitBystation_Read", "CircuitStatus")
                      .Data("getSubstationName");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("subdrop")

          )

<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbySubstationName: $("#subdrop").val()
        };
    }
</script>

finally the index.cshtml

<div class="row"><div class="col-12">
        @(Html.Kendo().Grid<QCReview.Models.CircuitStatus>()
                .Name("grid")
                .Columns(columns =>
                {
                columns.Bound(p => p.STATION_NAME).EditorTemplateName("subedit").Filterable(filterable => filterable.Multi(true).CheckAll(true));
                columns.Bound(p => p.CIRCUIT_ID).Title("Circuit ID").EditorTemplateName("cascadedropdowntemplate");
                    columns.Bound(p => p.QA_EXT).ClientTemplate("<input type='checkbox' disabled #=QA_EXT ? checked='checked' :'' # />").Title("QA Ready");
                    columns.Bound(p => p.OMS_READY).ClientTemplate("<input type='checkbox' disabled #=OMS_READY ? checked='checked' :'' # />").Title("OMS Ready");
                    columns.Bound(p => p.INSERT_DATETIME).Format("{0:MM/dd/yyyy}").Title("Insert Date");
                    columns.Bound(p => p.QA_DATETIME).Format("{0:MM/dd/yyyy}").Title("QA Date");
                    columns.Bound(p => p.LAST_UPDATE_DATETIME).Format("{0:MM/dd/yyyy hh:mm tt}").Title("Last Update Date");
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                })
                .Events(events =>
                    events.Edit("edit")
                    )
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable(filter => filter.Extra(false)
                .Operators(operators => operators
                .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
                )))
                .Groupable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(50)
                .Events(events =>
                {
                    events.Error("error_handler");
                    events.Change("onChange");
                })
        .Model(model =>
        {
            model.Id(p => p.CIRCUIT_ID);
            model.Field(p => p.STATION_NAME).Editable(true);
            model.Field(p => p.CIRCUIT_ID).Editable(true);
            model.Field(p => p.INSERT_DATETIME).Editable(false);
            model.Field(p => p.SUBSTATION_NAME).Editable(true);
            model.Field(p => p.LAST_UPDATE_DATETIME).Editable(false);
    })
    .Create(create => create.Action("CircuitStatus_Create", "CircuitStatus"))
    .Read(read => read.Action("CircuitStatus_Read", "CircuitStatus"))
    .Update(update => update.Action("CircuitStatus_Update", "CircuitStatus"))
    .Destroy(update => update.Action("CircuitStatus_Destroy", "CircuitStatus"))

    )
    )
<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbystationName: $("#subdrop").val()
        };
    }
</script>

DropDownList

Editor

Grid

updated question on 14 Feb 2023

1 answer

120 views

ExpansionPanel: Expand and Collapse event - get reference to sender

Hello,

What is correct way to get ExpansionPanel's name that caused expand/collapse event? I would like to create general method to save expand panels expanded states.

By trial and error I have discovered that both expand and collapse event handlers seem to get some argument. This is argument is undocumented. My tests show that I can get ExpansionPanel name following way:

function expand(e){
var expandPanelName=$(e.item).attr("name");
console.log(expandPanelName);
}

Is this correct way to do it or can this be changed in future versions of Kendo?

Thanks
Mikko

ExpansionPanel

answered on 14 Feb 2023

1 answer

205 views

How to focus grid in Dialog?

I have a question because the focus is not moving.
1. User presses button
2. Search dialog is opened.
3. Input and grid exist in dialog.
4. After searching in input, output search result on grid
5. Press ArrowDown at input to move focus to grid
6. Processing according to the keyboard that the user pressed on the grid (pressing the up key to go up within the grid, and pressing the down key to go down within the grid)

I've done up to process 4.
So when I pressed ArrowDown in the input of the dialog during process 5,
Call $('#grid').find('table')[0].focus();

When grid's navigable is true,
normally focuses on the header of the grid.
And the rest of the keystrokes except for the direction key within the grid are output normally.

If the grid's navigable does not enter false or navigable,
The grid's header is not focused.

The problem here is...
1. If navigable = true, ==> focus goes but direction key does not work
2. Without navigable => focus does not go by itself (keyboard event not detected)

To sum up, when there is input and grid in the dialog, I want to focus on grid, and I want to detect all key events of grid, including direction keys.

Ask for advice.

Dialog

Grid

answered on 13 Feb 2023

1 answer

444 views

Programmatically set step's contentId

Good afternoon,

I'm trying to find a way to programmatically set the content id for the next step in a wizard based on a radiogroup choice on the previous step.

I'm basing it on the Accepted answer from Mihaela on this post:

https://www.telerik.com/forums/skipping-diabled-steps-in-wizard-doasn-t-work

Incidentally, the required validation on the radiogroup in the example doesn't seem to work - you can click next to step 2 without choosing an option.

Rather than disable steps and jump to a different next step, I'd like to set the content for the next step based on the selected option.

On the select event for the wizard form I've tried the following:

                    var wizard = e.sender;
                    var radioValue = $("input[name='uploadType']:checked").val();
                    if (radioValue == "1") {
                        //e.sender.insertAt(3, { title: "Upload File(s)", contentId: "uploadFile" });
                        wizard.steps()[3].contentId = "uploadFile";
                    }
                    else {
                        //e.sender.insertAt(3, { title: "Choose File(s)", contentId: "chooseFile" });
                        wizard.steps()[3].contentId = "chooseFile";
                    }
                    e.preventDefault();
                    wizard.select(3);

I've used the syntax from this question:

https://www.telerik.com/forums/programmatically-enable-or-disable-wizard-buttons

$("#wizard").data("kendoWizard").steps()[1].buttons()[1].enable(true);

This assumes that e.sender on the wizard select event is the equivalent of $("#wizard").data("kendoWizard").

I have two templates with partial views which are used dependent on the radiogroup selected value:

<script type="text/x-kendo-template" id="uploadFile">
    @await Html.PartialAsync("_UploadFile")
</script>

<script type="text/x-kendo-template" id="chooseFile">
    @await Html.PartialAsync("_UploadChoose")
</script>

The insertAt method works by inserting a step with the desired content, but I don't want to insert multiple new steps.

Can what I want to do be achieved? Can the content be set programmatically?

I did also wonder if it was possible to have the conditional logic (e.g. if (radiogroup value == 1) in the kendo template, but this also didn't seem to work.

Kind regards,

Richard

RadioGroup

Wizard

answered on 10 Feb 2023

2 answers

316 views

ASP Net Core Hierarchy Grid not working

Hi there,

1st post, so I hope I don't do anything wrong or miss anything.

I have the following models (short version, originally the models do contain a lot more properties)

    publicclassDevices
    {
        public string dealerNo { get; set; }
        public string outletNumber { get; set; }
        public List<Application> applications { get; set; }
        public string deviceId { get; set; } 
    }

    public class Application
    {
        public int Id { get; set; }
        public string name { get; set; }
        public string version { get; set; }
    }

I would like to have a grid showing all devices, and by unfolding I want to see all applications from this specific device with version and so on.

I checked every available forum topic and hierarchy grid example, but I can't get it to run. The returned result from the controller and database query does contain everything.

This is my view:

@(
Html.Kendo().Grid<Devices>()
                        .Name("grid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.dealerNo);
                            columns.Bound(p => p.outletNumber);
                            columns.Bound(p => p.deviceId);
                        })
                        .Groupable()
                        .ColumnMenu()
                        .Sortable()
                        .ClientDetailTemplateId("template")
                        .Scrollable(s => s.Height("auto"))
                        .Filterable()
                        .ToolBar(toolbar =>
                        {
                            toolbar.Search();
                        })
                        .Pageable(p => p
                            .ButtonCount(5)
                            .PageSizes(new[] { 10, 25, 500 })
                            .Refresh(true)
                            .Input(true)
                        )
                        .HtmlAttributes(new { style = "height:600px;" })
                        .DataSource(ds => ds
                            .Ajax()
                            .ServerOperation(false)
                            .Group(groups => groups.Add(p => p.dealerNo))
                            .Events(events => events.Error("error_handler"))
                            .Read(r => r.Action("Devices_Read", "Home").Type(HttpVerbs.Post))
                            .Model(model =>
                            {
                            model.Id(order => order.dealerNo);
                            })
                        )
                    )


<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Application>()
                .Name("grid_#=deviceId#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.name).Width(110);
                    columns.Bound(o => o.version).Width(110);
                    columns.Bound(o => o.availableVersion).Width(110);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(r => r.Action("App_Read", "Home", new { deviceId = "#=deviceId#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
</script>

And the controller:

        public ActionResult App_Read(string id, [DataSourceRequest] DataSourceRequest request)
        {
            // return data
        }

String id on App_Read is always null, and I can't find the error. I need to pass the Devices.deviceId so my query for applications will be filtered for this specific device.

If I use standard read method in the child grid

Action("App_Read", "Home"))

I get all the data, but of course every child grid is showing all applications.

Please point me to my mistake so I can pass the deviceId string (which is a guid generated by EF Core) to the controller.

Thanks,

Thomas

Grid

answered on 09 Feb 2023

1 answer

213 views

Can an editor template be used for the grid delete confirmation?

I have looked for different forums and knowledge base posts relating to grid delete actions but can't find anything quite like I'm trying to accomplish. I would like to use a template for the confirmation popup when the destroy button is clicked on a grid row. I don't want the confirmation alert, instead I would like to have an editor template.

My grid setup:

columns.Command(m => { 
                m.Edit(); 
                m.Custom("Assign").Click("AssignInventory").IconClass("k-i-document-manager").Visible("AssignVisible");
                m.Destroy().Text("Destroy").Visible("AssignVisible"); // Only visible if the inventory is assignable, has quantity on hand
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("InventoryTemplate").DisplayDeleteConfirmation(false)) // Do not show confirmation alert

Here is the template I'm trying to use in a popup window once the destroy button is clicked.

<script type="text/x-kendo-template" id="DestroyInventoryTemplate">

    # if(data.BulkItems) { #
        <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="Id" name="Id" value="#:data.Id#" />
        <input type="hidden" id="Name" name="Name" value="#:data.Name#" />
        <input type="hidden" id="Description" name="Description" value="#:data.Description#" />
        <input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
        <input type="hidden" id="QuantityTotal" name="QuantityTotal" value="#:data.QuantityTotal#" />
        <input type="hidden" id="QuantityOnHand" name="QuantityOnHand" value="#:data.QuantityOnHand#" />
        <input type="hidden" id="Brand" name="Brand" value="#:data.Brand#" />
        <input type="hidden" id="SerialNumber" name="SerialNumber" value="#:data.SerialNumber#" />
        <input type="hidden" id="ModelNumber" name="ModelNumber" value="#:data.ModelNumber#" />
        <input type="hidden" id="Size" name="Size" value="#:data.Size#" />
        <input type="hidden" id="Color" name="Color" value="#:data.Color#" />
        <input type="hidden" id="RetirementDate" name="RetirementDate" value="#:data.RetirementDate#" />
        <input type="hidden" id="Destroyed" name="Destroyed" value="#:data.Destroyed#" />
        <input type="hidden" id="CreatedBy" name="CreatedBy" value="#:data.CreatedBy#" />
        <input type="hidden" id="CreatedDate" name="CreatedDate" value="#:data.CreatedDate#" />
        <input type="hidden" id="Active" name="Active" value="#:data.Active#" />
        <input type="hidden" id="InventoryTypeName" name="InventoryTypeName" value="#:data.InventoryTypeName#" />
        <input type="hidden" id="RequiredSerialNumber" name="RequiredSerialNumber" value="#:data.RequiredSerialNumber#" />
        <input type="hidden" id="RequiredModelNumber" name="RequiredModelNumber" value="#:data.RequiredModelNumber#" />
        <input type="hidden" id="RequiredBrand" name="RequiredBrand" value="#:data.RequiredBrand#" />
        <input type="hidden" id="RequiredSize" name="RequiredSize" value="#:data.RequiredSize#" />
        <input type="hidden" id="RequiredColor" name="RequiredColor" value="#:data.RequiredColor#" />
        <input type="hidden" id="PermissionPersonnel" name="PermissionPersonnel" value="#:data.PermissionPersonnel#" />
        <input type="hidden" id="PermissionLocation" name="PermissionLocation" value="#:data.PermissionLocation#" />
        <input type="hidden" id="PermissionInventory" name="PermissionInventory" value="#:data.PermissionInventory#" />

        <div class="k-edit-label">
            <label>Quantity To Destroy</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="QuantityToAdd" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAdd" value="1" required="required" validationMessage="Quantity to destroy is required">
            </span>
            <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAdd" id="QuantityToAdd_validationMessage" data-valmsg-for="QuantityToAdd">
                <span class="k-tooltip-icon k-icon k-i-warning"></span>
                <span class="k-tooltip-content">The Quantity to destroy field is required.</span>
                <span class="k-callout k-callout-n"></span>
            </div>
        </div>
    #} else {#
        <span class="text-center">Are you sure you want to destroy this inventory?</span>
    #}#

    <div class="k-edit-buttons k-actions-end">
        <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
            <span class="k-icon k-i-check k-button-icon"></span>
            <span class="k-button-text">Destroy</span>
        </button>
    </div>
</script>

Grid

answered on 09 Feb 2023

1 answer

777 views

How to use unminified scripts with 2023.1

I import the Kendo UI scripts from a local folder (no CDN) and use the unminified version in my development environment so that I can step with the Chrome JavaScript debugger into Kendo code. My setup in my layout page is similar to this:

<environment include="Development">
    <script src="@Url.Content("~/kendo/js/nonmin/kendo.all.js")" type="text/javascript" asp-append-version="false"></script>
    <script src="@Url.Content("~/kendo/js/nonmin/kendo.aspnetmvc.js")" type="text/javascript" asp-append-version="false"></script>
    <script src="@Url.Content("~/kendo/js/kendo.timezones.min.js")" type="text/javascript" asp-append-version="false"></script>
</environment>
<environment exclude="Development">
    <!-- imports the minified version here -->
</environment>

I would copy the unminified versions of kendo.all.js and kendo.aspnetmvc.js from the source package download to the nonmin folder under my app.

Now with the change to modules, that does not work. Since kendo.all.js just imports other scripts, I copied all the .js files from the source distribution to the nonmin folder. Then I got errors for each script "Uncaught SyntaxError: Cannot use import statement outside a module" so I changed the type on the script tags from "text/javascript" to "module". But now every instance of kendo.syncReady within the page yields the error "Uncaught ReferenceError: kendo is not defined"

General Discussions

answered on 07 Feb 2023

2 answers

2.4K+ views

dotnet restore fails when fetching from telerik servers

Hi,

We have a system with Github Actions where we build our project whilst adding the telerik nuget repository.

And then it fails with a 500 error, it works sometimes, but not always.

    steps:
    - name: Checkout ${{ github.GITHUB_REF }}
      uses: actions/checkout@v2

    - name: Setup .NET Core
       uses: actions/setup-dotnet@v1
       with:
        dotnet-version: "5.0.x"
        
    - name: Setup Node.js environment
       uses: actions/setup-node@v2.1.2

    - name: Register Nuget Packages
       env: # Or as an environment variable
        telerik_username: ${{ secrets.telerik_username }}
        telerik_password: ${{ secrets.telerik_password }}
       run: dotnet nuget add source https://nuget.telerik.com/nuget --name telerik.com --username "$telerik_username" --store-password-in-clear-text --password "$telerik_password"

    - name: Install dependencies
       run: dotnet restore Project

2021-05-25T09:07:14.2001354Z   Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'.
2021-05-25T09:07:14.2008435Z   Response status code does not indicate success: 500 (Internal Server Error).
2021-05-25T09:07:14.2014387Z   Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'.
2021-05-25T09:07:14.2036427Z   Response status code does not indicate success: 500 (Internal Server Error).
2021-05-25T09:07:14.2081008Z /home/runner/.dotnet/sdk/5.0.203/NuGet.targets(131,5): error : Failed to retrieve information about 'Telerik.UI.for.AspNet.Core' from remote source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'. [/home/runner/work/(project...)]

General Discussions

Installer and VS Extensions

answered on 07 Feb 2023

1 answer

523 views

Wizard ValidationSummary use with Partial View content

Good afternoon,

I am using the wizard component with a partial view on step 1, and a form on step 2.

 @(Html.Kendo().Wizard()
        .Name("uploadWizard")
        .Events(events => {
            events.Select("onFormSelect");
            events.FormValidateFailed("onFormValidateFailed");
        })
        .ValidateForms(v => v.ValidateOnPrevious(false))
        .LoadOnDemand(true)
        .ReloadOnSelect(false)
        .Steps(s => {
            s.Add()
                .Title("Choose Route")
                .ContentId("chooseRoute")
                .Buttons(b =>
                {
                    b.Next();
                });
            s.Add<TransactionViewModel>()
                .Title("File Details")
                .Form(form =>
                {
                    form.FormData(Model);
                    form.Items(items =>
                    {
                        items.Add()
                            .Field(f => f.FileVersion)
                            .Label(label => label.Text("Version of file (if applicable) e.g. 1.00:")
                            .Optional(true))
                            .InputHtmlAttributes(new { @maxlength = "50" });
                        items.Add()
                            .Field(f => f.FileDescription)
                            .Label(label => label.Text("Description of file use/content:"))
                            .Editor(e => e.TextArea()
                            .MaxLength(256)
                            .Rows(2)
                        );
                        items.Add()
                            .Field(f => f.BusinessReason)
                            .Label(label => label.Text("Business reason for the transfer:"))
                            .Editor(e => e.TextArea()
                            .MaxLength(256)
                            .Rows(2)
                        );
                        items.Add().Field(f => f.SourceUri).Label(label => label.Text("Source URI (if from an identifiable source):").Optional(true));
                    });
                })
                .Buttons(b =>
                {
                    b.Previous();
                    b.Next();
                });
            s.Add().Title("Upload File").Content("Upload file");
        })
    )

The partial view content contains a Kendo dropdownlist and a Kendo grid. I need the user to have selected a value from the dropdownlist and the grid before the step 1 wizard button allows the navigation to step 2.

I have added required text inputs to the partial view to capture the required value of the dropdownlist and id of the selected row in the grid. I'm going to hide the inputs but I want the "this field is required" error messages to appear in a validation summary, as they do on the step 2 form.

I've tried adding @Html.ValidationSummary() to the partial view but the error messages still appear next to the text inputs (which are due to be hidden). The partial view isn't based on a model.

The wizard's select event checks if the two inputs are valid and prevents the user from moving on:

               // Get the current step's container element
                var container = e.sender.currentStep.element;
                // Instantiate a validator for the container element
                $(container).kendoValidator();
                // Get the validator's reference
                var validator = $(container).kendoValidator().data("kendoValidator");
                // Validate a given input elements
                if (!validator.validateInput($("#SourceEnvironmentId")) || !validator.validateInput($("#RouteId"))) {
                    // Prevent the wizard's navigation
                    e.preventDefault();
                }

How do I get the validation error messages for the hidden inputs to appear in the validation summary on step 1?

Kind regards,

Richard

Wizard