Telerik Forums
UI for ASP.NET Core Forum
1 answer
105 views

Hello!

Is it possible to enable Drag&Drop on a FloatingActionButton?

Thank you

Aleksandar
Telerik team
 answered on 20 Dec 2021
1 answer
762 views

Hello I facing one issue with Grid. I have in custom DropDownListFor my model.

Everything like load option for dropdown, create new row with default works fine but when I change form default to other item in View I see still default value. But when I submit create or update button I see selected item..

I attached 2 screenshots where in default you will see default value and on click you see selected (attachment selected)

Here is my view ManageRecipe.cshtml

@{
}
@model Recipes.Business.ViewModels.Recipes.ManageRecipeViewModel
@using Recipes.Business.ViewModels.Recipes
<div class="container-fluid">
    <div class=" d-sm-flex align-items-center justify-content-between mb-4">
                <h3 class="h3 mb-2 text-gray-800">@ViewBag.FormName</h3>
    </div>
    <div class="card-shadow mb-4">
        <form method="post">
        <div class="card-header py-3 border-all">
            <div class=" d-sm-flex align-items-center justify-content-between mb-4">
                <h5 class="h5 mb-2 text-gray-800">Hlavička Receptury</h5>
            </div>
                <div class="form-row ">
                    <div class="col ">
                        <label asp-for="@Model.RecipeId">Číslo Receptury</label>
                        <input type="text" asp-for="@Model.RecipeId" class="form-control" required placeholder="Číslo Receptury">
                    </div>
                    <div class="col ">
                        <label asp-for="@Model.RecipeName">Název Receptury</label>
                        <input asp-for="@Model.RecipeName" type="text" class="form-control " required placeholder="Název Receptury">
                    </div>
                    <div class="col">
                        <label asp-for="SelectedCalculationId">Metoda výpočtu</label>
                             <kendo-combobox name="SelectedCalculationId" filter="FilterType.Contains"
                                                bind-to="Model.CalculationMethods"
                                                value="@Model.SelectedCalculationId"
                                                placeholder="Vyber metodu výpočtu..."
                                                datatextfield="CalculationMethodName"
                                                datavaluefield="CalculationMethodId"
                                                style="width:100%">
                                </kendo-combobox>
                    </div>
                </div>
                <div class="form-row">      
                    <div class="col">
                        <label asp-for="@Model.RecipeNote">Poznámka</label>
                        <input type="text" class="form-control text-xs" id="inpNote" placeholder="Poznámka k receptuře">
                    </div>
                    <div class="col" id="prescriptionInput">
                            <label for="prescriptionComboBox_input">Předpis</label>
                            <kendo-combobox name="prescriptionComboBox" filter="FilterType.Contains"
                                            bind-to="Model.Prescriptions"
                                            value="@Model.SelectedPrescriptionId"
                                            placeholder="Vyber předpis..."
                                            datatextfield="PrescriptionName"
                                            datavaluefield="PrescriptionId"
                                            style="width:100%"
                                            >
                            </kendo-combobox>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-check">
                            <label class="form-check-label" for="switch">
                                Receptura pro barvení
                            </label>
                            @(Html.Kendo().Switch()
                            .Name("IsColorRecipe")
                            .Messages(c=>c.Checked("Ano").Unchecked("Ne"))
                            .Events(ev => ev.Change("changeSwitch"))
                            .Checked(@Model.IsColorRecipe)
                            )
                        </div>
                    </div>
                    <div id="colorInputs"class="form-row" hidden >
                        <div class="col ">
                            <label asp-for="@Model.WaterInRecipe">Voda na sůl</label>
                            <input type="number" class="form-control text-xs" asp-for="@Model.WaterInRecipe" id="inpWater">
                        </div> 
                        <div class=" col">
                            <label asp-for="@Model.SaltInRecipe">Program </label>
                            <input type="number"  class="form-control text-xs" asp-for="@Model.SaltInRecipe" id="inpProgram">
                        </div>
                    </div>
                </div>
        </div>
         <div class ="card-body mt-2 py-3 border-all">
            <div class="table-responsive">
                @(Html.Kendo().Grid<RecipeLinesDetailViewModel>()
                .Name("#grid")
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                
                .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .Read(read=>read.Action("Recipes_ReadLines", "Recipes"))
                .Update(update => update.Action("Update", "Recipes"))
                .Create(create => create.Action("Create", "Recipes"))
                .Destroy(destroy => destroy.Action("Destroy", "Recipes"))
                .Model(m =>{
                    m.Id(id=>id.RecipeLineId);
                    m.Field(id=>id.RecipeLineId).Editable(false);
                    m.Field(f=>f.ChemistryRecipeViewModel).DefaultValue(
                        new ChemistryRecipeViewModel{
                            ChemistryId="1",
                            ChemistryName="testChemistry"
                        });
                }))

                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                    toolbar.Excel();
                    toolbar.Search();
                })

                .Columns(c=>{
                    c.Bound(c=>c.RecipeLineId).Hidden(true);
                    c.Bound(c=>c.ChemistryRecipeViewModel.ChemistryName).EditorTemplateName("ChemistryIdEditor");
                    c.Bound(c=>c.Dosage);
                    c.Bound(c=>c.Units);
                    c.Bound(c=>c.Rounded);
                    c.Bound(c=>c.Units);
                    c.Bound(c=>c.Comment);
                })
                .Excel(excel=>excel.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
                .Pageable()
                .Sortable()
                .Filterable()
                .Editable())
            </div>
        </div>
        <div class="card-footer mt-2 py-3 border-top">
            <button class="btn btn-primary" type="submit">Uložit</button>
        </div>
        </form>
                       
    </div>
</div>


<style >
   .border-all{border: 0.15rem solid #9e9e9e !important;}
   .border-top{border-top: 0.15rem solid #36b9cc !important;}
   .k-grid .k-grid-search {
        margin-left: auto;
        margin-right: 0;
    }
</style>

@section Scripts{

<script>
    function changeSwitch(e){
        if(e.checked){
                $('#IsColorRecipe').attr('checked','true')
                document.getElementById("colorInputs").hidden = false;
                document.getElementById("inpWater").setAttribute("required","");
                document.getElementById("inpProgram").setAttribute("required","");
            } 
            else{
                document.getElementById("colorInputs").hidden = true;
                document.getElementById("inpWater").removeAttribute("required","");
                document.getElementById("inpProgram").removeAttribute("required","");
            }
    }
    
</script>
}

here is ChemistryIdEditor.cshtml


@model Recipes.Business.ViewModels.Recipes.ChemistryRecipeViewModel

@(Html.Kendo().DropDownListFor(x => x).DataSource(x => x.Read(y => y
.Action("AllChemistry", "Recipes")))
.DataTextField("ChemistryName").DataValueField("ChemistryId")
.Filter(FilterType.Contains)
.HtmlAttributes(new { data_bind = "value: ChemistryName" }))


here is model class RecipeLinesDetailViewModel


public class RecipeLinesDetailViewModel
    {
        
        public int? RecipeLineId { get; set; }
        
        public ChemistryRecipeViewModel ChemistryRecipeViewModel { get; set; }
        [UIHint("Units")]

        public UnitRecipeViewModel Units { get; set; }

        [Display(Name = "Dávkování")]
        public float Dosage { get; set; }
        [Display(Name = "Zaokrouhlení")]
        public float Rounded { get; set; }

        [Display(Name = "Poznámka")]
        public string? Comment { get; set; }
    }

and finally controller


using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Recipes.Business.Interfaces;
using Recipes.Business.ViewModels.Recipes;
using Recipes.Data.Models;
using System;
using System.Collections.Generic;
using System.Linq;

namespace Recipes.Controllers
{
    public class RecipesController : Controller
    {
        IRecipeManager recipeManager;
        IChemistryManager chemistryManager;

        public RecipesController(IRecipeManager recipeManager,IChemistryManager chemistryManager)
        {
            this.recipeManager = recipeManager;
            this.chemistryManager = chemistryManager;
        }

        public IActionResult Index()
        {

            return View();
        }

        public IActionResult ManageRecipe()
        {
            ViewBag.FormName = "Nová receptura";

            return View(recipeManager.GetNewRecipeData());
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult ManageRecipe(ManageRecipeViewModel model)
        {
            if (!ModelState.IsValid)
            {
                return View(model);
            }
            return View();
        }
        public IActionResult Recipes_Read([DataSourceRequest] DataSourceRequest request)
        {
            
            return Json(recipeManager.GetRecipesOverView().ToDataSourceResult(request));
        }
        public IActionResult Recipes_ReadLines([DataSourceRequest] DataSourceRequest request)
        {
            var x = recipeManager.GetTestData();
            return Json(x.ToDataSourceResult(request));
        }
        public IActionResult AllChemistry()
        {
            return Json(recipeManager.GetRecipesChemistry());
        }
    }
}

I read all elated topic here but if I modify code I still have same result..

Can someone help me?

Many thx in advance

Lukas

 

Lukas
Top achievements
Rank 1
Iron
 answered on 19 Dec 2021
1 answer
272 views

Afternoon,

 

I am trying to apply persistence to a DatePicker so that when a user navigates to another page and then returns, the DatePicker retains its value.  Here is my DatePicker:

        @(Html.Kendo().DatePicker()

            .Name("datepicker")

            .Events(e =>

            {

                e.Change("onChangeDate");

            })

            .Format("dd/MM/yyyy")

            .Max(DateTime.Today)

    )

 

The DatePicker defaults to today’s date on the first entry to the page and stores that value in the session storage.  This date is displayed successfully in the DatePicker.

     $(document).ready(function () {

        // Set the datePicker value

        var date = setDate();

        var datePicker = $("#datepicker").data("kendoDatePicker");

        alert(date);

        datePicker.value(date);

    });

The alert confirms the date variable value: Tue Dec 14 2021 00:00:00 GMT+0000 (Greenwich Mean Time)


Here are my other functions:

    function setDate() {

        // Get the datePicker value from session storage of the browser.

        var datePickerValue = sessionStorage.getItem("datePickerValue");

 

        if (nullCheck(datePickerValue)) {

            datePickerValue = kendo.date.today();

        }

        return datePickerValue;

    }

 

    function nullCheck(data) {

        // Return true if null

        return (typeof data !== 'undefined' && data !== null) ? false : true;

    }

 

On return to the page, the alert confirms that the date variable value is still the same as before, but that date is not displayed in the DatePicker by datePicker.value(date); The DatePicker remains blank.

The onChangeDate function sets the session storage to the newly selected date.

 

I've tried setting the format of the data variable to dd/MM/yyyy, but that doesn't seem to make any difference. Plus it works on first entry to the page so it must be able to interpret the date value.

 

Kind regards,

 

Richard

Alexander
Telerik team
 answered on 17 Dec 2021
1 answer
341 views

Hi,

is there a way to show the unit during editing in the NumericTextBox.

 

Right now the behavior is like this:

  • Editing: 123,55  (without EUR)--> After losing the focus it's formating the value to 123,55 EUR

The desired behavior would be that the EUR would be showing up already in the editing mode.

  • Editing 125,55 EUR 

 

Regards
Martin

Stoyan
Telerik team
 answered on 16 Dec 2021
6 answers
387 views

We're currently experiencing issues with the Telerik NuGet Server (https://nuget.telerik.com/nuget).

We are working to resolve those as soon as possible. Please follow this thread for updates.

Apologies for the inconvenience.

Joel
Top achievements
Rank 1
Iron
 answered on 15 Dec 2021
1 answer
564 views

Good afternoon,

I have a yearly dashboard where I have set up a slightly complicated scenario using several MVC Core components.

When you select a year from the dropdown it forces each of the charts/grids to read the data based on the selected year. The 'Yearly Activity' tab is the default tab and works nicely. I have a few pie charts and a bar chart on one tab which are arranged using the TileLayout - this allows them to be resized and dragged. It looks like this:


On the second tab "Monthly Activity by Operator" there is a kendo grid which displays aggregated data based on the selected year. However, when I click on the second tab and change the year in the dropdown, then click back on the first tab, the bar and pie chart have updated correctly data-wise but have not resized correctly in layout - they appear zoomed in:

I've tried making them resize if I click on the 'Yearly Activity' tab:

function tabSelect(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Yearly Activity") {

            kendo.resize($(".k-grid, .k-chart"));

        }

    }

I also have these functions, which are almost exactly as written in the demos:

    $(document).ready(function () {

        kendo.resize($(".k-grid, .k-chart"));

    });

    function onTileResize(e) {

        if (e.container) {

            // for widgets that do not auto resize

            // https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages

            kendo.resize(e.container, true);

            $(document).bind("kendo:skinChange", updateTheme);

        }

    }

 

    function updateTheme() {

        var charts = $(".k-chart");

        $.each(charts, function (i, elem) {

            var theme = kendoTheme;

            if (/(default-|bootstrap-|material-|classic-)/.test(kendoTheme)) {

                theme = "sass";

            }

            $(elem).getKendoChart().setOptions({ theme: theme });

        });

    }

 

    $(window).on("resize", function () {

        kendo.resize($(".k-card-body"));

    });

How can I get the charts to resize themselves correctly, as if I was on the first tab when I changed the year?

Kind regards,

Richard

Aleksandar
Telerik team
 updated answer on 15 Dec 2021
1 answer
4.3K+ views

Afternoon,

Is there a way to display a formatted date in a readonly TextBox on a kendo form without using a DateTimePicker as below?

            items.Add()

                .Field(f => f.Datelastedited)

                .Label(l => l.Text("Date Last Edited:"))

                .Editor(e => e.DateTimePicker()

                    .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })

                    .Format("{0:dd/MM/yyyy HH:mm:ss tt}"))

                .InputHtmlAttributes(new { @readonly = "readonly" });

I want the TextBox to be readonly so I don't need the ability to change the value, or display the buttons to set the time or date elements.

A NumericTextBox has a Format method, but the TestBox doesn't.

Kind regards,

Richard

Aleksandar
Telerik team
 answered on 15 Dec 2021
1 answer
540 views

I'm trying to implement a double click event on kendo grid row which would open a kendo window and the content is called making an ajax call based on the row data. The content gets it's data from a view. It works for the first time but when I close the window using out-of-the box window close button and select the same row or another row, the double click doesn't work. I want client to have option to get out of window/form and switch the row and double click it.  Developer Tools shows the following error when dblclick is attempted second time or on subsequent attempts. ""dataitem" uncaught typeerror cannot read property of undefined (reading 'dataitem') at HTMLTableRowElement.

"Below is a code snippet. 

//grid

@(Html.Kendo().Grid(Model)

        .Name("mygrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.id).Title("id");            
            columns.Bound(p => p.Col2).Title("Col2").Width(130);

        })
        .Pageable()
        .Sortable()
        .Scrollable(scr => scr.Height(430))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
         )
        .Selectable()
)

     @{
    string[] actions = new string[] { "Close" };

}
<div class="windowdiv">
        <kendo-window name="window"
                      draggable="true"
                      resizable="true"
                      width="700"
                      height="650"
                      min-height="600"
                      min-width="600"
                      modal="true"
                      position-top="0%"
                      position-left="30%"
                      actions="actions">
            <content>
            </content>
            <popup-animation enabled="false" />
        </kendo-window>
    </div>
<script>
    $(document).ready(function () {
        /*$("#window").data("kendoWindow").center();*/
        $("#window").data("kendoWindow").close();
    });
    
    //double click
    $("#mygrid").on("dblclick", "tr.k-state-selected", function () {
        var dataItem = $("#mygrid").data("kendoGrid").dataItem($(this));
        id = (dataItem.id);
        alert("double clicked");

        $("#window").data("kendoWindow").title("Id: " + id);
        $("#window").kendoWindow({
            content: {
                url: "@Url.Action("ActionName","ControllerName")",
                data: { id: id }
            }
        });
        /*$("#window").data("kendoWindow").center();*/
        $("#window").data("kendoWindow").open();     
    });
</script>
Tsvetomir
Telerik team
 answered on 14 Dec 2021
1 answer
156 views

I'm having an issue where I have some code that opens an existing Excel file, adds some data then saves the file. When this runs all the charts in the original Excel file disappear. 

I have tested it and even if I just open the Excel file and save it without making any changes the charts are gone. 

I can't upload Excel files here but I have attached a screenshot of the before / after.

Example code

var xlsxFormatProvider = new XlsxFormatProvider();

// Import 
using Stream input = new FileStream("c:\\tmp\\Charts.xlsx", FileMode.Open);
var workbook = xlsxFormatProvider.Import(input);


// Export
using Stream output = new FileStream("c:\\tmp\\Charts_Edited.xlsx", FileMode.Create);
xlsxFormatProvider.Export(workbook, output);

 

Thanks,

Richard

Stoyan
Telerik team
 answered on 13 Dec 2021
1 answer
119 views

The scenario what I am trying to achieve:
For example, 
I got a  "product" model with totally 7 properties,
and in the grid I'm only showing 4 properties,
say showing "ProductId", "ProductName", "SupplierId", "CategoryId"

public product
{
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int? SupplierId { get; set; }
        public int? CategoryId { get; set; }
        public string QuantityPerUnit { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
}
However,
How can I show all 7 properties when editing or adding a new record in Grid ?
Alexander
Telerik team
 answered on 10 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?