In my current grid definition (below) below the <script type="text/javascript"> line, I go through and define some variables in the JavaScript that are populated from Properties in my Model.  This works for me but I would like to refactor the code to be more simple.  

Refactor 1:

I would like to pull the values directly from my model so it is just a single call.  What kind of object do I return from my @Model.GetDataValues() method that would satisfy the Grid.DataSource.Data call?

            function getData() {
                return @Model.GetDataValues();
            }

Refactor 2:

What would even be cleaner is to not call the JavaScript function at all.  What kind of object do I return from my @Model.GetDataValues() method that would satisfy the Grid.DataSource.Data parameter directly?

                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data(@Model.GetDataValues()))

My Grid Definition:

        @(Html.Kendo().Grid<Person>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Command(command => command
                          .Custom("Detail")
                          .Click("goDetail"))
                          .Width(Glossary.Portal.ButtonWidth);
                        columns.Bound(p => p.FirstName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.LastName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                    .HtmlAttributes(new { style = "height:550px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data("getData"))
              ))

        <script type="text/javascript">

            var customerId = Number(@Model.GetValue(Glossary.Models.Customer.Keys.Id));
            var customerUniqueId = '@Model.CustomerUniqueId';
            var groupId = Number(@Model.GetValue(Glossary.Models.Group.Keys.Id));
            var sessionId = Number(@Model.GetValue(Glossary.Models.Session.Keys.Id));
            var personId = Number(@Model.GetValue(Glossary.Models.Person.Keys.Id));

            function getData() {
                return {
                    customerId: customerId,
                    customerUniqueId: customerUniqueId,
                    groupId: groupId,
                    sessionId: sessionId,
                    personId: personId
                };
            }

...

Hi,

we have an issue with KendoMultiSelect get unusable after an modal KendoWindow was opened on top of the page that contains multi select control. All the data are there, values are still selected, but control is unusable - you cannot open the dropdown to select new values.

We are using 2017.3.913 version.

Kind regards
Paul

     Hi I have the following problem I have a keno grid bringing up a popup but its not firing my update command for some reason. The main difference to my site and the demos is that I am using language as part of my url.

      app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{culture=en-gb}/{controller=Home}/{action=Index}/{id?}");
                endpoints.MapRazorPages();


            });

    @(Html.Kendo().Grid<Stock>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Description).Width(180);
            columns.Bound(p => p.Name).Width(180);
            columns.Command(command => command.Edit()).Width(160);
            columns.Command(command => command.Destroy()).Width(160);
        })

    .ToolBar(toolbar =>
     {
         toolbar.Create();
         toolbar.Save();
     })
    .Pageable()
    .Navigatable()
    .Sortable()
    .Groupable()
    .Filterable()
    .Scrollable()
    .HtmlAttributes(new { style = "height: 500px" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error"))

          .Model(model =>
          {
              model.Field(p => p.ID).Editable(true);
              model.Field(p => p.Name);
          })

        .Read("ReadStock", "Stock")
        .Update("Stock_Update", "Stock"))
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("StockEditorTemplate"))


       )
    )

        [AcceptVerbs("Post")]
        public async Task<ActionResult> Stock_Update([DataSourceRequest] DataSourceRequest request, Stock stockItem)
        {
            if (stockItem != null && ModelState.IsValid)
            {
                int x = await apiClient.PostUpdateStock(stockItem);
            }

            return Json(new[] {stockItem}.ToDataSourceResult(request, ModelState));
        }

Hi All,

How to add an Icon marker on my previously selected item. Let say I have default Settings to show 20 rows per page. When I navigate on the menu, it should have an icon in front of the item. If I select 50, the next time I navigate on the menu, 50 has now the icon.

Please see attached.

Thanks,

Ryan

Hi All,

I want to add a clear filter button on my grid toolbar. How can I achieve this? 

Is it possible to get each filter changes in array?

Like for instance my I set my 1st filter to column status to show only Active  

My 2nd filter is user type admin on user type column

and my 3rd filter to First Name column is Ryan

So if I click the button Clear filter, it will only clear my 3rd filter for First name

and when I click the 2nd time, it will clear my filter for User type Admin

and when I click again the 3rd status active will be cleared.

Actually my main goal here is to put this array in to bread crumb. although I cant seem to make breadcrumb work in my grid toolbar. so button would suffice for now.

Hello all, I hope you can point me in the right direction.

My requirement is to show validation messages (whether from Data Annotation [Required] attributes, etc., or from the server-side via ModelState Errors) in an error message block at the top of the editor, not next to the fields which the errors are related to. I am showing errors in a Kendo Notification that is present on my _Layout.cshtml page (I declared it there in hopes that I could have some of my CRUD error handling done in one place instead of each and every view...)

Problem

The problem that I am having is that if you try to submit my form without entering required data, you're shown the errors at the top, correctly. Then, if you correct the errors that were from the model's data annotations and don't cause any server-side errors, the popup permanently stays in "loading" mode and never closes. If you then F5 to refresh, the record does save to the database.

I've been tinkering with my code all day to try and magically get it to work, but this generally should show what I'm trying to do.

First, I added logic to the .Edit event of my Grid:

    function onEdit(e) {
        e.sender.editable.validatable.bind("validate", function (e) {
            SendErrorsToNotification(this.errors()); // SendErrorsToNotificationis the js function to take incoming errors and show them in the Kendo Notification
        });
    };

My hope here is that I will "intercept" the kendo validation for data annotations, get the errors, and then show them in my Kendo Notification. Errors are currently being displayed using this logic - whether my problem is stemming from here is another question.

Next, server-side validation. Inside my Create/Update actions I simply have a Validate function defined to do business logic validation, i.e. this:

                var validationErrors = Validate("Create", brand);
                foreach (string error in validationErrors.Distinct())
                {
                    ModelState.AddModelError("BasicValidation", error);
                }
                ...

                return Json(new[] { viewmodel}.ToDataSourceResult(request, ModelState));

 I capture these errors by handling the .Error event of my grid, and call the same SendErrorsToNotification function again:

 function error(e) {
         SendErrorsToNotification(e.errors);
     }

This is SendErrorsToNotification. Basically, create an error collection based on the incoming parameter, clear the notification of its existing data, then add the new errors and show the Notification again.

function SendErrorsToNotification(e) {
    var staticNotification = $("#statusNotification").data("kendoNotification");

    if (e.length > 0 || (e.BasicValidation !== undefined && e.BasicValidation.errors.length > 0)) {

        if (e.errorThrown === "custom error") {
            // custom rtc errors from server side, gather the errors up and place them into e.errors so the rest of this function can run smoothly
            e.errors = e.errors.BasicValidation.errors;
        }

        var grid = $(".grid-with-notifications").data("kendoGrid");
        grid.one("dataBinding", function (g) {
            g.preventDefault();
        });

        // Clear existing messages from the notification.
        var existingNotifications = staticNotification.getNotifications();
        existingNotifications.each(function () { 
            $(this).remove();
        });

        var errorMessage = "";
        $.each(e, function (key, value) {
            errorMessage += "&bull;&nbsp;&nbsp;" + this + "<br/>";
        });

        staticNotification.show(errorMessage, "error");

        var container = $(staticNotification.options.appendTo);
        container.scrollTop(container[0].scrollHeight);
    }
    else {
        staticNotification.hide();
    }

I really apologize for not being able to format any of this code as code, for some reason my browser isn't "showing advanced formatting options" while creating this post. Sorry for the wall of text, hopefully someone can read my mind (and scattered code) and help me understand some of my short comings here. I have been fairly stumped by this for a few days now and getting quite sad :(

Below is from a sample app I generated, from the _Layout.cshtml file.  If you look at the kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js file, its using a really old version of jQuery.  How can we use a more current version?

    <link href="htt    <link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.aspnetmvc.min.js"></script>

Hi Dear

I use Telerik components in our web.

in one of a web form the cursor inside a textbox causes flickering all around.

what can the reason for this?

Thanks 

Haim

The main codes are as follows. When the treelist loaded, Always show alert once. Then click the custom toolbar button, Nothing do!

@(Html.Kendo().TreeList<Liwb.Entities.RulesAndRegulation>
    ()
    .Name("Treelist")
    .Toolbar(toolbar =>
    {
        toolbar.Custom().Name("cust").Text("Upload").Click("uploadfile()");
    })
    .Columns(columns =>
    {
        columns.Add().Field(f => f.Name);
        columns.Add().Field(e => e.ReleaseUnit);
        columns.Add().Field(e => e.ReleaseNumber);
        columns.Add().Field(e => e.EffectiveDate).Format("{0:yyyy/M/d}");
        columns.Add().Field(e => e.Type).Template("#: displayEnum(data)#");
        columns.Add().Width(400).Command(c =>
        {
            c.CreateChild().Text("附件");
            c.Edit();
            c.Destroy();
        }).HtmlAttributes(new
        {
            style = "text-align: center;"
        });
    })
    .Editable()
    .Scrollable(false)
    .Filterable()
    .DataSource(dataSource => dataSource
        .ServerOperation(false)
        .Model(m =>
            {
                m.Id(f => f.ID);
                m.ParentId(f => f.PID);
                m.Field(f => f.Name);
                m.Field(f => f.Pos).DefaultValue(1);
                m.Field(f => f.Type).DefaultValue(Liwb.Utility.RulesAndRegulationType.dc3);
            })
        .Create(create => create.Action("Create", "RulesAndRegulation"))
        .Read(read => read.Action("Read", "RulesAndRegulation"))
        .Update(update => update.Action("Update", "RulesAndRegulation"))
        .Destroy(delete => delete.Action("Destroy", "RulesAndRegulation"))
        )
        .Height(540)
        .Pageable(p => p.PageSize(15)
        .PageSizes(true)
        )
    )
    <script type="text/javascript">
        function uploadfile() {
            alert("My upload!");
        }
    </script>

how to bind this column to TextArea in asp.net core project in edit template 

this my steps but it's not working 

column.Bound(c => c.Note).EditorViewData("TextArea");

[UIHint("TextArea")]
public string Note
{
    get;
    set;
}

Views/Shared/EditorTemplates/TextArea.cshtml
@model string

@Html.TextAreaFor(m=>m, new { rows = 5})