i'm trying to figure out how to use tag helpers with grid to achieve the same functionalities as basic razor syntax. Some thing i have noticed that behave differently :  data annotations are not being used, neither for Display names nor display format, i also do not have the option to autogenerate column with tag helpers.

Here is the code in my .cshtml page

Here is my viewmodel: 

And attached are the grid that are rendered . i would love to have both render with same way as the first so that i can use taghelpers instead of razor syntax

I have a requirement where the user has to enter 3 letter and for each group of letters I have to display a different list. For instance if the user writes A I have to display AA, AB,... and if the user write AC I have to display ACA, ACB,...

I have configured the autocomplete with server filtering and if the user selects an item I need for the autocomplete to display a different list.

The autocomplete i like this

and the script looks like this

The select method does not open the dropdownlist even though the server method is called with the correct selection. Sometimes it opens but with the old values.

I have a grid where i have popup edit enabled. For this popup editing i have a template and in the template i have a multiselectfor which looks like this:

 @(Html.Kendo().MultiSelectFor(x => x.SelectedConsultantIds)
                                              .AutoClose(false)
                                              .Placeholder("Select consultants")
                                              .DataTextField("DisplayName")
                                              .DataValueField("Id")
                                              .IgnoreCase(true)
                                              .Filter("contains")
                                              .DataSource(source =>
                                              {
                                                  source.Read(read =>
                                                  {
                                                      read.Action("GetAvailableConsultants", "Project");
                                                  });
                                              })
                      )

When i load the grid the SelectedConsultantIds (List<string>) is populated for each item. I then click Edit for a row and the multiselectfor loads with all the DisplayNames preselected. However when i add new items to the multiselect from the selection they do not get added to the SelectedConsultantIds list when i click update and watch the viewmodel in the controller. The list stays the same if i only add. It does seem to update when i remove items from the list and click update.

So i can only remove items and not add items in this multiselect. The items get added and removed in the box itself, but not when i pass the viewmodel with the list to the controller.

hi, 

I am following the example and the documentation, but I can't solve thi issue

Uncaught TypeError: Cannot read property 'slice' of undefined
    at init.success (kendo.all.js:7083)
    at success (kendo.all.js:7010)
    at Object.n.success (kendo.all.js:5934)
    at fire (jquery.js:3182)
    at Object.fireWith [as resolveWith] (jquery.js:3312)
    at done (jquery.js:8754)
    at XMLHttpRequest.<anonymous> (jquery.js:9120)

my view:

<div class="row">

    <form asp-controller="Home" asp-action="SetLanguage" role="search" method="post">
        <div class="form-group">
            @*<input type="text" placeholder="Search for something..." />*@


            @(Html.Kendo().MultiColumnComboBox()

                       .Name("products")
                       .DataTextField("Name")
                       .DataValueField("Id")
                       .Columns(columns =>
                       {
                       //columns.Add().Field("Name").Template("<a href= '" + "Instrument/Quotes/#: Id #" + "'>Q</a>").Title("Name");
                       //columns.Add().Field("Id").Title("ID");
                       columns.Add().Field("Id").Template("<a href= '" + "/Analisys/AnalisysShort/#: Id #" + "'>#: Name#</a>").Title("ID");

                       })
                       .Placeholder("Search...")
                      .DataSource(source =>
        {
            source.Custom()
                .ServerFiltering(true)
                .ServerPaging(true)
                .PageSize(80)
                .Type("aspnetmvc-ajax")
                .Transport(transport =>
                {
                    transport.Read("SearchInstruments_Read", "Home");
                })
                .Schema(schema =>
                {
                    schema.Data("Data")
                            .Total("Total");
                });
        })
        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper")))




            <button type="submit" class="btn btn-success">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </div>
    </form>
</div>

<script>
        function valueMapper(options) {
            $.ajax({
                url: "@Url.Action("SearchInstruments_ValueMapper", "Home")",
                data: convertValues(options.value),
                success: function (data) {
                    options.success(data);
                }
            });
        }

        function convertValues(value) {
            var data = {};

            value = $.isArray(value) ? value : [value];

            for (var idx = 0; idx < value.length; idx++) {
                data["values[" + idx + "]"] = value[idx];
            }

            return data;
        }
</script>

my controller

public async Task<ActionResult> SearchInstruments_Read([DataSourceRequest] DataSourceRequest request)
        {
            var model = await _repo.GetAllAsync<Instrument>();
            var vmodel = Mapper.Map<IEnumerable<InstrumentViewModel>>(model);

            return Json(vmodel);
        }

        public async Task<IActionResult> SearchInstruments_ValueMapper(int[] values)
        {
            var indices = new List<int>();

            if (values != null && values.Any())
            {
                var index = 0;

                foreach (var model in await _repo.GetAllAsync<Instrument>())
                {
                    if (values.Contains(model.Id))
                    {
                        indices.Add(index);
                    }

                    index += 1;
                }
            }

            return Json(indices);
        }

thank you for help

Hi,

I'm using a custom template for popup editing in my Grid, eg

In "ClinicalGapEditor.cshtml" i'm binding to a view model and have some date field

I want the date to be entered in dd/MM/yyyy format but when I enter the date and tab out of the field it is automatically change to a long date, such as "Tue Dec 12 2000 00:00:00 GMT+0000 (Greenwich Mean Time)".

How do I fix this?

How can we disable the sorting that is applied to groups in kendo grid.

Please reply asap.

Hi,

I have a problem with DateTimePicker component on Update action on GridView. 

In my model I've annotated the property with the following attributes:

        [Required]
        [DataType(DataType.Date)]
        [Display(Name = nameof(MessageResources.DateSent), ResourceType = typeof(MessageResources))]
        public DateTime DateSent { get; set; }

In the columns section of a gridview component custom formating is set up as following:

    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(100);
        columns.Bound(x => x.DateSent)
        .Format("{0: dd.MM.yyyy HH:mm:ss}")
        .Title("Date Sent");
        columns.Command(command => { command.Destroy(); }).Width(100);
    })

And I have a custom pop-up form with the following  syntax and format:  

                @(Html.Kendo().DateTimePickerFor(p => p.DateSent)
                                            .Format("dd.MM.yyyy HH:mm")
                                            .HtmlAttributes(new { @readonly = "readonly", @class = "form-control" }))

On put or post operations default value (01/01/0001 00:00:00) is sent to the controller. In case I made model property nullable and without required then this value is always null.

Hello,

I am upgrading my project to use the latest enhancements to the Grid control, and replacing some custom code that I had to write to accomplish something that the columns.Select() seems to do out of the box.  The issue that I am having is that I need to get the selected rows from outside of the grid.  My view page looks like this:  

<div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<OASISBlueSyncCore.Common.Models.CourseInformation>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Select().Width(50);
                columns.Bound(p => p.Department).Width(140);
                columns.Bound(p => p.CourseID).Width(120);
                columns.Bound(p => p.BlockNumber).Width(100).Title("Block #");
                columns.Bound(p => p.CourseName);
                columns.Bound(p => p.EventStartDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EventEndDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EvalStartDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EvalEndDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
            })
            .ToolBar(toolbar => { toolbar.Custom().Text("Set Selected Evaluation Dates").HtmlAttributes(new { id = "setEvalDates", style = "float: right" }); })
            .Events(ev => ev.DataBound("db"))
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:500px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
                .Model(model => model.Id(p => p.Department + "-" + p.CourseID))
                .Read(read => read.Action("Courses_Read", "CourseConfiguration"))
                .Update(update => update.Action("Courses_Update", "CourseConfiguration"))
                )
            )
        </div>
    </div>
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @Html.Kendo().Button().Name("GenerateBlueFiles").HtmlAttributes(new { id = "generateBlueFiles", @class = "btn btn-default" }).Content("Generate Blue Files")
        </div>
    </div>

And then the javascript that gets called by the GenerateBlueFiles button is:

$("#generateBlueFiles").click(function (e) {
            e.preventDefault();

                var grid = $('#grid').data('kendoGrid');
                var gridContents = grid._data;
                var sel = grid.selectedKeyNames();
                console.log(sel.join(", "));  //This writes out a blank line, even if I have one or more rows selected.
                for (var x = 0; x < gridContents.length; x++) {
                    if (gridContents[x].Selected) {
                        var record = {
                            "Year": gridContents[x].Year,
                            "Selected": gridContents[x].Selected,
                            "Department": gridContents[x].Department,
                            "CourseID": gridContents[x].CourseID,
                            "BlockNumber": gridContents[x].BlockNumber,
                            "CourseName": gridContents[x].CourseName,
                            "EventStartDate": gridContents[x].EventStartDate,
                            "EventEndDate": gridContents[x].EventEndDate,
                            "EvalStartDate": gridContents[x].EvalStartDate,
                            "EvalEndDate": gridContents[x].EvalEndDate
                        }
                        selectedCourseInformation.push(record);
                    }
                }

The example in the docs only shows getting the rows using the onChange method of the grid control.  How do I accomplish something similar from outside of the grid control.  Previously, I grabbed a handle on the grid control and interrogated the contents to see if my custom Selected column was set to true, but that doesn't work, and the selectedKeyNames() doesn't seem to work when I grab the handle to the grid from outside of the grid itself.  If someone could point me in the right direction on getting the selected rows, I would appreciate it.

Thanks,

Mike

I have a Kendo UI MVC grid that I am trying to filter based on value of the drop down lists selected. The filtering can be on any combination of the 3 dropdownlists. I have created a javascript function to do the filtering on a change event, and I see the 3 different filters while looking in the console. However when it gets to the controller only the first filter value is used.

According to telerik the resize and expand of grid should works like in the link

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized

But this can not be used with the asp.net core wrapper.

I am using Scrollable(s => s.Height("auto")) that generates the configuration scrollable: { height: "auto"  }, and what I need is not to be generated or scrollable: true

The unexpected behaviour can be viewed here: https://dojo.telerik.com/OTuTEQOf where every other refresh the grid has the expected size or its auto.

What is the alternative for asp.net core and of course for asp.net framework to have this functionality?