We are updating Kendo from v2012.3.1210 to v2022.1.412, and currently using a trial version of v2022.1.412. The following code used to work, but now there is issues with the kendoGrid.dataSource.options.schema.model.fields being undefined.

This is in the .cshtml file defining the grid

<div id="deploymentsGrid" class="collapsible">
            <h2>@DeploymentResources.DeploymentGridDeployments <span class="expandhint">&nbsp;</span></h2>
            <div>
                @Html.Partial("_ButtonGroup", Model.DeploymentButtons)
                <div class="gridWrapper">
                    @(Html.Kendo().Grid<vw_PackageDeploymentGrid>()
                    .Name("DeploymentGrid")
                    .DataSource(dataSource =>
                    {
                        dataSource.Ajax()
                            .PageSize(DeploymentIndexViewModel.DeploymentPageSize)
                            .Model(model =>
                            {
                                model.Id(pdg => pdg.PackageDeploymentId);
                                model.Field(pdg => pdg.PackageDeploymentId).Editable(false);
                            })
                            .ServerOperation(true)
                            .Read(read => read.Action("SelectAjaxPackageDeployments", "Deployment").Type(HttpVerbs.Post))
                            .Sort(sort =>
                            {
                                sort.Add(pdg => pdg.IsActive).Descending();
                            })
                            .Events(events =>
                            {
                                events.Error("onError(\"DeploymentGrid\")");
                                events.RequestEnd("onRequestEnd(\"DeploymentGrid\")");
                            })
                            .Filter(filters => filters.Add(pdg => pdg.IsHidden).IsEqualTo(false));
                    })
                    .Columns(columns =>
                    {
                        columns.BindButtonColumn(pdg => pdg.PackageDeploymentId, new ButtonColumn()
                        {
                            RequestContext = ViewContext.RequestContext,
                            ButtonId = "viewStopDeployment",
                            JavaScriptFunction = "openPackageDeployment",
                            Action = "GetPackageDetailsViewStop",
                            Controller = "Deployment",
                            Value = "#= data.PackageDeploymentId #",
                            HtmlAttributes = new RouteValueDictionary(new {@class = "centeredColumn"}),
                        });
                        //if user can deploy, delete or create a deployment then they can hide
                        if(DeploymentIndexViewModel.CanDeletePackageDeployment || DeploymentIndexViewModel.CanCreatePackageDeployment)
                        {
                            columns.BindButtonColumn(pdg => pdg.PackageDeploymentId, new ButtonColumn()
                            {
                                RequestContext = ViewContext.RequestContext,
                                ButtonId = "showHideDeployment",
                                JavaScriptFunction = "showHidePackageDeployment",
                                Action = "UpdatePackageDeploymentHiddenState",
                                Controller = "Deployment",
                                Value = "#= data.PackageDeploymentId #",
                                HtmlAttributes = new RouteValueDictionary(new {@class = "centeredColumn"}),
                            });
                        }

                        columns.Bound(p => p.PackageDeploymentName).Title(DeploymentResources.DeploymentGridDeploymentsColDeploymentName);
                        columns.Bound(p => p.DeviceModelName).Title(DeploymentResources.DeploymentGridDeploymentsColDeviceType);
                        columns.Bound(p => p.DeviceGroupName).Title(DeploymentResources.DeploymentGridDeploymentsColGroup);
                        columns.Bound(p => p.PackageTypeName).Title(DeploymentResources.DeploymentGridDeploymentsColPackageType);
                        columns.Bound(p => p.IsActive).Title(DeploymentResources.DeploymentGridDeploymentsColStatus)
                            .ClientTemplate("<span class=\"hidden\" id=\"canDeleteDeployment\">" + DeploymentIndexViewModel.CanDeletePackageDeployment + "</span>#= data.IsActive ? '" + DeploymentResources.DeploymentOptActive + "' : '" + DeploymentResources.DeploymentOptStopped + "' #");
                        columns.Bound(p => p.UserName).Title(DeploymentResources.DeploymentGridDeploymentsColUsername);
                        columns.Bound(p => p.PackageDeploymentStartDate).Format(ApplicationSettings.GridDateTimeFormat).Title(DeploymentResources.DeploymentGridDeploymentsColStartDate);
                        columns.Bound(p => p.PackageDeploymentId)
                            .Title(String.Empty)
                            .ClientTemplate("&nbsp;")
                            .Width(35);
                        columns.Bound(p => p.IsHidden)
                            .Title(String.Empty)
                            .Hidden(true);
                    })
                    .Filterable()
                    .Sortable(sortable => sortable.AllowUnsort(false))
                    .Pageable(paging => paging.BasicPagerSetup()
                        .Messages(m => m.Display(Resources.Messages.Pager_Display)
                            .Empty(Resources.Messages.Pager_Empty)
                            .First(Resources.Messages.Pager_First)
                            .ItemsPerPage(Resources.Messages.Pager_ItemsPerPage)
                            .Last(Resources.Messages.Pager_Last)
                            .Next(Resources.Messages.Pager_Next)
                            .Of(Resources.Messages.Pager_Of)
                            .Page(Resources.Messages.Pager_Page)
                            .Previous(Resources.Messages.Pager_Previous)
                            .Refresh(Resources.Messages.Pager_Refresh))
                    )
                    .Events(events => events.BasicGridEvents())
                    )
                </div>
            </div>
        </div>

This is in the .js file and the line 'fields = kendoGrid.dataSource.options.schema.model.fields' is erroring with

,

This is kendo ui for asp.net mvc.  In the past I have used float:right to move menu items and gridtoolbar items to the right side, but that no longer works.  For example:

.ToolBar(toolbar =>
{
   toolbar.Search();
   toolbar.Custom()
      .Text("Clear Filters/View All")
      .Url("#")
      .HtmlAttributes(new { id = "btnClearFilters", @class="btn btn-link", onclick = "btnClearFiltersClick()" });
   toolbar.Custom()
      .Text("New Order")
      .Url("#")
      .IconClass("k-icon k-i-add")
      .HtmlAttributes(new { id = "btnNew", style = "float:right;", onclick = "btnNewClick()" });
   toolbar.Custom()
      .Text("Copy Order")
      .Url("#")
      .IconClass("k-icon k-i-copy")
      .HtmlAttributes(new { id = "btnCopy", style = "float:right;margin-right:20px;", onclick = "btnCopyClick()", disabled = "disabled" });
})

Here's the definition of the two items that are linked by the CascadeFrom:
                      items.Add().Field(f => f.Country)
                                 .ColSpan(1)
                                 .Name("cmbCountry")
                                 .Editor(e => e.ComboBox()
                                               .AutoWidth(false)
                                               .DataTextField("name")
                                               .DataValueField("id")
                                               .BindTo(@CountryModel.Countries)
                                               .Placeholder("--- Select or Type Country"));
                      items.Add().Field(f => f.StateProvince)
                                 .ColSpan(1)
                                 .Name("cmbStatesProvinces")
                                 .Editor(e => e.ComboBox()
                                               .AutoWidth(false)
                                               .AutoBind(false)
                                               .Placeholder("--- Select State/Province ---")
                                               .DataTextField("name")
                                               .DataValueField("id")
                                               .DataSource(dS => dS.Read(read => read.Action("GetStateList", "Address").Data("filterState")).ServerFiltering(true))
                                               .CascadeFrom("cmbCountry")
                                               @*.BindTo(@StatesProvinces.StateProvince)*@
                                               );

Here's the AddressController.GetStateList:

This works for the first Country that is selected...  afterwards - if the Country is changed, the GetStateList is not called again to refresh the related/CascadeFrom Combobox.

I have a dashboard page made up of several different sections.  Each section is rendered via a Html.Action call.

Is it possible to rearrange these into kendo scripts so the whole page can leverage the TileLayout wrapper? 

I tried below, but it's throwing all sorts of console errors.  The child actions do contain their own javascript scripts which may be the problem perhaps?

    <script id="views-corporatedocuments-template" type="text/x-kendo-template">
        @Html.Action("CorporateDocuments")
    </script>

    <script id="views-lowmargin-template" type="text/x-kendo-template">
        @Html.Action("LowMarginOrders")
    </script>

    <script id="views-lateshipments-template" type="text/x-kendo-template">
        @Html.Action("LateShipments")
    </script>

Hello, We are trying to use the Grid Filter & Sort in ASP.NET MVC5.

When we click on filter icon nothing happens "No drop down list to make filter choice " The sorting & paging seems to work fine. Attachments are View markup, Controller code and UI screen.

Hello, We are trying to play with MVC5 samples and in Visual Studio 2019. The web application is working but the data is not loadind and it is just spinning with "Loading Demo". FYI, We have not changed anything in the sample.

Would be able to guide me in the right direction so we can maker sure whatever is missing in our dev environment is installed.

Problem:

I have a search funtionality that loads the folder structure and a second that loads the documents for a folder. Due to dependencies on other systems is the latter a giant performance hit if i have to loop over the folder in an eager loaded system. these same dependencies & preformance impact also block me from excecuting the first webservice on every expand. Documents are only available in leaf folders, as they are a specific type, but that's not relevant to the treeview.

Right now, we have implemented it so that we cache the folder structure, and on every expand we load the cached version & filter out what we needed. Due to cache size limitations, we have settled on a cache time of 30 minutes. We see now that users complain about  the treeview not working anymore when they have been called away, when they had lunch & when they had to work on other things for a while (i.e. when they didn't use the app for more than 30m.

I have managed to eager load the complete folder structure, but that required it to be fully expanded, while most folders should be collapsed. The contents of collapsed folders seems to be ignored. A folder that has been extended but recollapsed however, is kept in the treeview and will not be requested again. We could make a Javascript that would collapse everything, but that would give a nasty flicker on the view.

Question:

I would like to know if there is a way to eager load the collapsed folder structure while keeping lazy loading for the documents.

hallo,

i just wanna to disable the combobox when the chekcbox is checked and vice versa.

when i cheked, it disactivated, but when i check out (isChek == false) is not enable it. so it remain disabled.

any idea?

I have a RadGridView with IsFilteringAllowed="True" and CanUserSortColumns="True" properties.  This give my column headers sort and filter functions, and shows the filter icon on each. The columns are defined as GridViewDataColumns.  

I am trying to find a way to remove, or at least hide, the filter icon from just one of my column headers.  Is there a way to do that?

Here is the relevant code:

<telerik:RadGridView Grid.Row="0" ItemsSource="{Binding StationState.DewaxStatuses}"
                                     Style="{StaticResource RadGridViewDefault}"
                                     IsFilteringAllowed="True" CanUserSortColumns="True"

<telerik:GridViewDataColumn DataMemberBinding="{Binding WorkItemsCount}" Header="Molds" 
                                                    Style="{StaticResource GridViewFooterDataColumn}" 
                                                    TextAlignment="Right" ShowFilterButton="False">

I have tried moving the IsFilteringAllowed property into the individual data columns but it isn't valid in those.  I also tried adding FilterMemberPath to the one column, which left the icon visible and the dropdown available but removed the data from the menu.  That is, you could view the menu but there is nothing to select.

I also looked at ShowFilterButton, but that only removes the button inside the menu, not the icon.

I hope this is enough information, but I can supply more if needed.

Thanks,

Todd

I'm updating an application (based on version v2021.2.511) porting bits of code to a new application based on v2022.2.510). I'm trying to get a multi-select drop-down list with checkboxes working.  The requirment is for the check boxes to be checked if an item in the list is selected, and unchecked if it is unselected.

The following styles were added:-

<style type="text/css">

    @*.EditButton {
        display:@ViewBag.EditButton;
    }*@

    .nopadding {
   padding-left: 0 !important;
    padding-right: 0 !important;

}

 .k-multiselect:after {
         content: "\25BC";
         position: absolute;
         top: 30%;
         right: 10px;
         font-size: 10px;
     }

    .k-multiselect-wrap.k-floatwrap li.k-button .k-icon.k-i-close
  {
    display: none !important;
  }

}
</style>

<style scoped>

    .k-widget.k-multiselect {
        width: 300px;
        vertical-align: middle;
        display: inline-block;
    }
</style>

The multiselect definition is:-

 @(Html.Kendo().MultiSelect()
                                .Name("msSpecialty")
                                .DataValueField("Code")
                                .DataTextField("Description")
                                    .Placeholder("All specialties...")
                                    .ItemTemplate("<input type='checkbox' /> #=data.Description#")
                                    .AutoClose(false)
                                    .ClearButton(false)
                                    .TagMode(TagMode.Multiple)
                                //.TagTemplate(" <span>#= Description #</span>")

                                .Events(e => e.Close("onSpecListChange").DataBound("specListDataBound").Change("chkFix"))
                                .DataSource(src => src.Read(rd => rd.Action("getOpenClockSpecDDL", "Validation")).ServerFiltering(false))
                                    .HtmlAttributes(new { style = "width:300px;" })
                        )

And the javascript:-

 var currentSpec = '-X-';

 function onSpecListChange() {
        var items = this.ul.find("li");
        checkInputs(items);
        //check if list has changed since last close, if so, fire change event (Avoids unnescessary requeries)

        var multiselect = $("#msSpecialty").data("kendoMultiSelect");
        var Svalue = multiselect.value().sort();

        var SpecString = "";

        if (Svalue != null & Svalue != '') {


            for (i = 0; i < Svalue.length; i++) {
                SpecString = SpecString + Svalue[i] + "|";
            }

        }
        else {
            SpecString = "-X-";
        }



        if (currentSpec != SpecString) {
            onChange();
        }




    }

    function checkInputs(elements) {
        elements.each(function () {
            var element = $(this);
            var input = element.children("input");

            input.prop("checked", element.hasClass("k-state-selected"));
        });
    }

    function specListDataBound() {

        var items = this.ul.find("li");
        setTimeout(function () {
            checkInputs(items);
        });

    }

    function chkFix() {
        var items = this.ul.find("li");
        setTimeout(function () {
            checkInputs(items);
        });
    }

 function onChange()
    {

    }

I assume the styles have changed between the versions, because this code is not working. The checkboxes aren't being checked on selection, the list doesn't close when clicked away from, and the closed multiselect isn't displaying properly.  How can I get it working as it was please?