Telerik Forums
UI for ASP.NET MVC Forum
0 answers
1 view

Hello,

I'm encountering an issue with the autocomplete functionality in Kendo UI Grid. While the data selected through autocomplete is correctly added to hidden fields, it does not appear in the Grid.

Specifically, after using the autocomplete functionality, I checked whether the correct data was added to the respective hidden fields and found that the values I expected were indeed present in those fields. However, I noticed that these values were not visible in the Grid. This implies that the data selected by users is not being properly reflected within the Grid.

In summary, I am unable to display the data received through the autocomplete functionality within the Grid. I would appreciate any suggestions to resolve this issue.

The code structure related to the problem I mentioned above is as follows.

@(Html.Kendo().Grid(Model.Lines)
    .Name("OrderLines")
    .ToolBar(tools => tools.Create().Text("Add new product"))
    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
    .Events(events => events
    .Change("onChange"))
    .Columns(columns =>
    {
        columns.Bound(p => p.Title)
        .ClientTemplate("#= Title #" +
        "<input type='hidden' name='Lines[#= index(data)#].Title' value='#= Title #' />")
        .EditorTemplateName("ProductTitleAutoComplete");

        columns.Bound(p => p.Title).Hidden().ClientTemplate("#= Title #" +
        "<input type='hidden' name='Lines[#= index(data)#].Title' value='#= Title #' />"
        );

        columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
        "<input type='hidden' name='Lines[#= index(data)#].Description' value='#= Description #' />"
        );

        columns.Bound(p => p.Quantity).ClientTemplate("#= Quantity #" +
        "<input type='hidden' name='Lines[#= index(data)#].Quantity' value='#= Quantity #' />"
        );

        columns.Bound(p => p.UnitPrice).ClientTemplate("#= UnitPrice #" +
        "<input type='hidden' name='Lines[#= index(data)#].UnitPrice' value='#= UnitPrice #' />"
        );

        columns.Bound(p => p.TaxRate).ClientTemplate("#= TaxRate #" +
        "<input type='hidden' name='Lines[#= index(data)#].TaxRate' value='#= TaxRate #' />"
        );

        columns.Bound(p => p.DiscountRate).ClientTemplate("#= DiscountRate #" +
        "<input type='hidden' name='Lines[#= index(data)#].DiscountRate' value='#= DiscountRate #' />"
        );

        columns.Bound(p => p.PurchaseOrderId).Hidden().ClientTemplate("#= PurchaseOrderId #" +
        "<input type='hidden' name='Lines[#= index(data)#].PurchaseOrderId' value='#= PurchaseOrderId #' />"
        );

        columns.Bound(p => p.ProductId).Hidden().ClientTemplate("#= ProductId #" +
        "<input type='hidden' name='Lines[#= index(data)#].ProductId' value='#= ProductId #' />"
        );

        columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
        "<input type='hidden' name='Lines[#= index(data)#].Id' value='#= Id #' />"
        );

        columns.Bound(p => p.MeasureWeightId).ClientTemplate("#= MeasureWeightId #" +
        "<input type='hidden' name='Lines[#= index(data)#].MeasureWeightId' value='#= MeasureWeightId #' />"
        );

        columns.Command(command => command.Destroy()).Width(100);
    })
    .DataSource(dataSource => dataSource.Ajax()
    .Model(model =>
    {
        model.Id(p => p.ProductId);
        model.Field(p => p.ProductId).Editable(false);
    })
    .ServerOperation(false)
    ))

function onChange_ProductAutoComplete(e) {
    var dataItem = e.sender.dataItem(0);

    var grid = $("#OrderLines").data("kendoGrid");

    if (dataItem) {
        var el = $(e.sender.element[0]);
        const parent = el.closest("td");
        const inputs = parent.siblings().find('input');

        $(inputs).each(function () {
            var name = $(this).attr('name');
            if (name.endsWith("Description")) {
                $(this).val(dataItem.Notes);
            } else if (name.endsWith("ProductId")) {
                $(this).val(dataItem.Id);
            }
            else if (name.endsWith("Title")) {
                $(this).attr({ value: dataItem.Title });
                $(this).val(dataItem.Title);
            }
            else if (name.endsWith("MeasureWeightId")) {
                $(this).val(dataItem.MeasureWeightId);
            }
        });
    }
}

function onReadDataOnGrid_ProductAutoComplete(e) {
    let data = {
        title: $('#Title_ProductAutoComplete').val()
    };

    return data;
}

Thank you in advance for your support.

Selman
Top achievements
Rank 1
 asked on 18 Mar 2024
0 answers
1 view

I had a request to change the filtering of a certain column from "Starts With" to use a multi-select checkbox type filter to facilitate selecting 5-10 random items.  Then of course some other users prefer the "Starts With" type of filtering.  My solution is to have dual columns for that particular field, one with each filter type.  

Since my grids save user preferences in local storage between sessions, the users can hide whichever column has the filtering they don't prefer and just use the other one.  When they reload the page, their choice of column persists and their filtering is how they like it.

Darron

 

 

Darron
Top achievements
Rank 1
 asked on 18 Mar 2024
1 answer
11 views

Is it possible to extend the Telerik MVC Grid toolbar to include custom commands? I'm looking to add my own functionality to the toolbar, and I'm wondering if there's a way to create a method within the toolbar command factory to generate buttons with specific functionality that I want to apply across all grids in my application.

For example, I have these three methods I have added using the toolbar template.


instead of using the template every time I would like to add custom command like save or excel.

Anton Mironov
Telerik team
 answered on 11 Mar 2024
0 answers
9 views

I'm trying to export a grid to Excel, and I have followed the Telerik example:

https://demos.telerik.com/aspnet-mvc/grid/excel-export?autoRun=true&theme=default-main

But what I cannot manage to do is to prevent a call to excel_export_read when clicking the Export to Excel button. In Chrome Devtools I can see that also the official Telerik example calls this method a second time when clicking, but I was under the impression that the component would try to create the excel file client side. Is this not possible?

Here is my code:

 

@(Html.Kendo().Grid<CampaignSimulationResult>()
    .Name("SimulateResult")
    .ToolBar(tools => tools.Excel())
    .DefaultSettings()
    .Columns(column =>
        {
            column.Bound(m => m.Region).HeaderHtmlAttributes(new { style = "text-align:center" })
                .HtmlAttributes(new { style = "text-align: center" });
            column.Bound(m => m.ParameterID).Format("{0:##,#}").HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align:center" });
            column.Bound(m => m.Parameter).HtmlAttributes(new { style = "white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center" });
        }
    ).Excel(excel => excel
        .FileName("Kendo UI Grid Export.xlsx")
        .Filterable(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ExcelExportRead", "Campaign", new RouteValueDictionary { { "area", "Admin" } }))
    )
)


Snorre Garmann
Top achievements
Rank 1
 asked on 05 Mar 2024
0 answers
22 views

I am using a Kendo.Filter object like the following to filter results in a Kendo Grid:

@(Html.Kendo().Filter<CustomPersonClass>() .Name("personFilter") .DataSource("peopleDS") .ApplyButton(false) .Fields(f => {

f.Add(p => p.LastName).Label("Last Name");
         f.Add(p => p.FirstName).Label("First Name");
         f.Add(p => p.MiddleName).Label("Middle Name");

f.Add(p => p.StartDate).Label("Start Date").Operators(o => o.Date(d => d.Eq("Is equal to").Gte("Greater than equal").Lte("Less than equal"))); }) )

 I have helper code to handle the toolbar in my Kendo Grid like the following, :

@helper ToolbarTemplate()
{
    <button class="k-button k-button-solid k-button-solid-base" id="applyFilter"><span class="k-icon k-i-filter"></span>Apply Filter</button>
    <button class="k-button k-button-solid k-button-solid-base" id="clearFilter">Reset</button>
    <button class="k-button k-grid-excel k-button-solid k-button-solid-base"><span class="k-icon k-i-excel"></span>Export to Excel</button>
}

I also have some JavaScript in a function to apply the filter when the Apply Filter button is clicked, as seen here:

$("#applyFilter").click(function (e) {
    //e.preventDefault();
    var myFilter = $("#personFilter").getKendoFilter();
    localStorage["kendo-person-filter-options"] = kendo.stringify(myFilter.getOptions().expression);
    myFilter.applyFilter();
});

 

The problem I am having is if I enter an invalid Leap Year date (e.g. 2/29/2003, since 2023 didn't have a February 29th), I get no data back; however, if I enter a valid Leap Year (e.g. 2/29/2004), my Kendo Grid will show data.  Is there a way to validate the date that is being entered manually into a DatePicker field used for filtering?  That is, if I use the DatePicker, it will not show me 2/29/2003 as an option, but if I type in 2/29/2003 and click Apply Filter, it doesn't throw any kind of error about 2/29/2003 being invalid.

1 answer
17 views

Using

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.2/fluent/fluent-main.css" />

With a Kendo Grid, the handle is oddly positioned, how can I fix this

Ivan Danchev
Telerik team
 answered on 13 Feb 2024
3 answers
620 views

I have a Telerik MVC Grid in a Razor view. I have added the ColumnMenu option which gives the user the ability to show/hide columns in the grid. By default it places this in the context menu of the header of the columns. I want to change this so that it is available in the ToolBar header as a custom control.

     @(Html.Kendo().Grid<StockReport>()
               .Name("grid")
               .Columns(columns =>
                  columns.Bound(p => p.SohQty).Title("Quantity");
                 columns.Bound(p => p.StockName).Title("Item Name");

                  ...

                  .ToolBar(tools => tools.Excel())
                  .ToolBar(tools => tools.Custom()
                      .Text("Customise")

                      .WhatToPutHere?????
                      )

                .ColumnMenu() //I want to reuse this but in the custom toolbar

I think it sits better in the toolbar header since it is about all the columns whereas the rest of the items in the context header of a column relate to just that column (filtering, sorting).
The only thing I don't know is what I can put on the custom toolbar in order to make use of the existing ColumnMenu control

Abraham
Top achievements
Rank 1
Iron
 answered on 07 Feb 2024
0 answers
18 views

Hi Team,

 

I am facing issue in ClientDetailTemplateId Grid when using checkbox, data coming from database is true checkbox selected but if we checkbox checked or uncheck then checkbox values not sending proper values in jquery bellow sending code for grid.

  @(
      Html.Kendo().Grid<PNWorklistSupplierGridViewModel>()
                          .Name("pnwlGrid_#=Id#") // template expression, to be evaluated in the master context
                              .Columns(columns =>
                               {
                                   columns.Command(command =>
                                    {
                                        command.Custom("editPn1").Text(" ").IconClass("k-icon k-i-pencil").Click("OpenSupplierEditWindowPN");
                                    }).Width(40).HtmlAttributes(new { @style = "text-align: center;" });

                                        columns.Bound(e => e.Check).Title("test").Width(150)
                                   .ClientTemplate("<input type='checkbox' \\#=Check? checked='checked' : '' \\# />")
                                   .HeaderHtmlAttributes(new { @class = "headerText" }).Sortable(false).Filterable(false).HtmlAttributes(new { @style = "text-align: center;" }); 

If Check checkbox checked then js file getting Check values false

please check and let me know any thing else required.

 

Thank you!

Ramesh
Top achievements
Rank 1
 asked on 07 Feb 2024
0 answers
22 views

Hi, im currently creating a Grid with dynamic columns and came across with this post and current following the structure.

Dynamic Data in the Kendo UI Grid (telerik.com)

 

My problem is that during Update, I cant seem to access the Property Values of those edited columns. 

Can I get the actual code for the "Update" of this demo API?

https://demos.telerik.com/kendo-ui/service/products/Update

 

Heres my update code btw:

            

[HttpPost]
        public JsonResult Update_Employee([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<dynamic> models)
        {
            foreach(var obj in models)
            {
                string a = GetProperty(obj, "EmployeeName");

            }

            return Json(ModelState.ToDataSourceResult());
        }

        private object GetProperty(dynamic obj, string propertyName)
        {
            var objDict = obj as IDictionary<string, object>;
            if (objDict.ContainsKey(propertyName))
            {
                var value = objDict[propertyName];

                if (value != null)
                    return value;
            }

            return null;
        }

 

 

 

 

 

 

DPA
Top achievements
Rank 1
 asked on 29 Jan 2024
1 answer
54 views

I have a model class given below in MVC. I am trying to set MinDate and MaxDate for the DatePicker

public class YourModel
{
    public DateTime Deadline { get; set; }
    public DateTime MinDate { get; set; }
    public DateTime MaxDate { get; set; }
}
Now I have the code as given, I am trying to replace the existing Mindate and MaxDate with the Model class properties. I am looking for the correct code .

@(Html.Kendo().DatePickerFor(x => x.Deadline)
    .Name("datepicker") // Set the name attribute
    .Format("MM/dd/yyyy")
    .Min(DateTime.Today) // Set the minimum date
    .Max(DateTime.Today.AddMonths(3)) // Set the maximum date (in this example, 3 months from today)
    .HtmlAttributes(new { id = "datepicker" }) // Set the ID attribute
)

Anton Mironov
Telerik team
 answered on 24 Jan 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?