Keep in mind that I am new to .Net Core 6.0, ASP.Net and the newest Telerik tools!  I have very little experience with js and Razor but am learning quickly!

With that said:  I would like to create an input form for collecting search information.  I have created a slide out window from the right side...  I just can't find a good example of how to add input objects to the form!  Any suggestions of research documents would be greatly appreciated!

Current Html & js defining form:

 <div id="dialog"></div>

 $("#dialog").kendoWindow({ title: "IVM - Search Engine", 
                                   width: "40%", 
                                   height: "85%", 
                                   actions: [ "close" ], 
                                   draggable: false, 
                                   resizable: false, 
                                   modal: true, 
                                   position:{ top: 75, left: "50%" }, 
                                   //content: { url: "Address/getTypes",
                                   //           dataType: "json",
                                   //           iframe: false }
                                   //item:{ kendoComboBox:{name:"cmbaddressTypes", dataSource:@AddressTypes.addressTypes }}
                                   animation: { open: { effects: "slideIn:left", duration: 500 }, 
                                                close: { effects: "slideIn:left", reverse: true, duration: 500 } }, 
                                   visible: false })

The AppBar declaration placing the search button on the bar.

 @(Html.Kendo().AppBar()
        .Position(AppBarPosition.Top)
        .PositionMode(AppBarPositionMode.Fixed)
        .Name("appbar")
        .Items(items=> {
            items.Add().Template("<a class='k-button k-toggle-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
            items.Add().Type(AppBarItemType.Spacer).Width("16px");
            items.Add().Template("<h3>International Vending Machines</h3>").Type(AppBarItemType.ContentItem);
            items.Add().Type(AppBarItemType.Spacer).Width("800px");
            items.Add().Template("<a class='k-button k-search-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' href='\\#' id='openWindow'><span class='k-icon k-i-search'></span></a>").Type(AppBarItemType.ContentItem);
        })
        .Deferred()
    )

and finally, the delegate and event:

        $("#appbar").on("click", ".k-search-button", function (e) { IVMSearch(e); })

    <script>
        function IVMSearch(e)
        { var dialog = $("#dialog").getKendoWindow();
          dialog.open(); }

    </script>

The behavior is:  when the search button is clicked, this kendoWindow slides out from the right side and this is where I want the user to enter their search criteria.  I need kendoCombobox, kendoText, kendoButton and kendoLabel objects on this slide out....  

Using the Multiselect works great but the delete icon for the items overlay the text. In trouble shooting this, if I remove the "k-multiselect" class from the div wrapping the the Multiselect, it looks fine. I don't think I am missing a stylesheet but is the a way to exclude/remove this class by a configuration or am I doing something wrong? 

I have attached a screenshot of the displayed Multiselect and the html wrapping the Multiselect when it is generated.

Hi,

May I know, Is there any way to group scheduler by using a property that declared in the ViewModel without using and declaring resources as below?

I am trying to disable my edit and delete commands conditionally. I have found a couple of resources on these forums but none of them work in me scenario. I attempted to use the .Visible() function of the command cell; however, this approach is throwing an error in the browser console. So, I went a different direction and used the .Template() for my command. This is also not working because I am not getting the data item for the row in my template handler. Here is where I am at.

@(Html.Kendo().Grid<DocumentVM>()
        .Name("Documents")
        .Columns(columns =>
        {
            columns.Bound(f => f.Title)
                .ClientTemplate("<a href='" +
                    Url.Action("DisplayFile", "Documents") + "/#=Id#' target='_blank'><i class='k-icon #:FileIcon#'></i> #=Title#</a>"
                );
            columns.ForeignKey(f => f.DocumentTypesId, (System.Collections.IEnumerable)ViewData["DocTypes"], "Id", "Description");
            columns.Bound(f => f.CreatedDate).Title("Date Uploaded");
            columns.Bound(f => f.CreatedBy).Title("Uploaded By");
            columns.Command(command => {
                command.Edit().Template("#= EditableTemplate(data) #");
                command.Destroy().Template("#= DeleteTemplate(data) #");
            });
...
)

function EditableTemplate(data) {
    if (data.Editable) {
        return "<a role='button' class='k-button k-button-icontext k-grid-edit' href='#'><span class='k-icon k-i-edit'></span>Edit</a>"
    }
    else {
        return "<a role='button' class='k-button k-button-icontext k-grid-edit k-state-disabled' href='#'><span style='color: green;' class='k-icon k-i-check'></span>Edit</a>"
    }
}

function DeleteTemplate(data) {
    var currentUser = $("#CurrentUser").val();
    var userIsAdmin = $("#UserIsAdmin").val();

    if (data.Editable === true && currentUser === data.CreatedBy) {
        return "<a role='button' class='k-button k-button-icontext k-grid-delete' href='#'><span class='k-icon k-i-close'></span>Delete</a>"
    }
    else {
        return "<a role='button' class='k-button k-button-icontext k-grid-delete k-state-disabled' href='#'><span class='k-icon k-i-close'></span>Delete</a>"
    }
}

I have just updated some of my code to 2022 R2 and believe I have found a bug. It is not control specific as it is related to the DataSource and the way it generates urls.

In my code I have controllers and views within a MVC Area (Areas in ASP.NET Core | Microsoft Docs )

Up to now it worked fine and the below sample would end up generating a url that used the ambient area when generating the url

.Read(read => read.Action("Transactions_Read", "Transactions").Data("transreaddata"))

This would produce: /Admin/Transactions/Transactions_Read

Now since R2 2022 it will not use the ambient Area. Thus it will produce: /Transactions/Transactions_Read

Current workaround would be to add an area route value in for each url.  If one has lots of datasources where that would be necessary that could be a bit time consuming. May be classified as a breaking change

Doing some debugging on it with the actual telerik source code I have found the problem

In file NavigatableExtensions.cs with the function GenerateUrl (line 160)

The below was added between R1 2022 and R2 2022

object area;
            if (navigatable.HasValue() && navigatable.RouteValues != null && !navigatable.RouteValues.TryGetValue("area", out area))
            {
                navigatable.RouteValues.Add("area", "");
            }

Effectively, if you rely on using ambient values, you do not create a route value called "area". Thus the TryGetValue fails and causes the code to adda blank area route value which will override the ambient value

Hey,

Let's say that I have a ListView with comments:

@(Html.Kendo().ListView<Adelante_ERP_GSBK.Models.ProjectComment>()
                    .Name("listView")
                    .TagName("div")
                    .ClientTemplateId("template")
                    .HtmlAttributes(new {style = "border: none;"})
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("GetComments", "ProjectComment", new {projectId = Model.Id}))
                    ))

Template

<script type="text/x-kendo-tmpl" id="template">
<div class="post">
    <div class="user-block" style="margin-bottom: 0;">
        <span class="username" style="display: inline; margin-left: 10px;">
            #:User.Name#
        </span>
        <span class="description" style="display: inline; margin-left: 5px">
            #:kendo.toString(CommentDate, "d")#
        </span>
        <a onclick="showInPopup('@Url.Action("AddOrEdit", "ProjectComment", null, Context.Request.Scheme)/#:Id#', 'Edit')" style="cursor: pointer;" title="Dodaj">
            <i class="fa-solid fa-pen-to-square"></i>
        </a>
        <a onclick="showInPopup('@Url.Action("Delete", "ProjectComment", null, Context.Request.Scheme)/#:Id#', 'Delete?')" style="cursor: pointer;" title="Usuń">
             <i class="fa-solid fa-xmark"></i>
        </a>
    </div>
    <div style="margin-left: 10px;">
        #:CommentContent#
    </div>
</div>
</script>

Everything works fine, but I don't want that all users always see edit/delete buttons.

Edit button should be visible only for author and administrator, delete only for administrator.

Does anyone have an idea how can I do this?

In my scheduler app i made my own editor for events, with contains most of the default inputs and some of my own. However i am having issues getting the RecurrenceEditor working. The RecurrenceEditor does showup and functions as expected in the ui, however when i submit the form after filling in an recurrence, the value in my model remains null and also doesnt throw any errors. All other inputs such as title, time, etc. does show up in my model and works as expected.

My code for the RecurrenceEditor that always submits null:

<div class="form-group">
     <div class="k-edit-label">
             @(Html.LabelFor(model => model.RecurrenceRule))
     </div>
     <div data-container-for="recurrenceRule" class="k-edit-field">
             @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
                 .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
     </div>
</div>

An example of a input that i use and does work:

<div class="form-group">
     <div class="k-edit-label">
         @(Html.LabelFor(model => model.Description))
     </div>
     <div data-container-for="description" class="k-edit-field">
         @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
     </div>
</div>

Package version: 2020.1.406

We have a grid taking advantage of a client template and the onChange event to automatically save changes.

Everything works correctly if the user presses "Enter" or clicks out of the cell.

If the user uses the "Tab" key to navigate to the next cell, the onChange event fires before the value actually updates in the input.

In the onChange event, if it fires after using the tab key the value is the previous value, but hen using "enter" or clicking out of cell the values are the correct updated value.

Here is the code.

@(Html.Kendo().Grid<StubAmountsViewModel>
            ()
            .Name("stubAmountsGrid")
            .Columns(columns =>
            {
            //columns.Bound(c => c.AccrualHeaderId).Visible(false);
            columns.Bound(c => c.CustomerNumber);
            columns.Bound(c => c.BusinessUnit).Visible(false);
            //columns.Bound(c => c.CustomerDescription);
            columns.Bound(c => c.DataDate).Format("{0:MMM-yyyy}");
            columns.Bound(c => c.JobDescription);
            columns.Bound(c => c.StubAccrualValue).HtmlAttributes(new {onChange = "stubAccrualValueChange(this)"})
            .ClientTemplate("<input type='text' class='numeric k-textbox k-grid-StubAccrualValue stubAccrualValueInput' min='0' step='0.01' value='#=StubAccrualValue#' style='width: 100% !important;'  />");
            })
            .DataSource(source => source
            .Ajax()
            .PageSize(20)
            .Model(m => m.Id(r => r.AccrualHeaderId))
            .Read(read => read.Action("ReadStubAmounts", "Admin").Data("getClosedMonthData")))
            .Groupable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .Sortable()
            .Events(events => events.DataBound("stubAmountsDataBound"))
            )