For my app I ideally would like to achieve the following layout :

• Fixed / static header with links to most commonly used areas of the app, each with expandable sub links to more specific locations
  
• Left hand slide menu - ideally with some icons down the left for quick access to a section, or able to be expanded via an icon which is in the header - each section would also need to have expandable links ideally
  
• Ideally a fixed / static footer, although this is less important

So am I right in thinking this is the way to go about it?

Header - this would be an app bar component,

Expandable links within the header - a menu component embedded within the app bar for the expandable links

Left bar - this would be a drawer component so it can show the icons and be expanded on demand - would this also need an embedded menu component so each section can expand?

Thanks

So have a question as I may just not understand the difference to what I think something controls to what it actually controls. When I select the add new record it triggers the following line control:

If e.CommandName = RadGrid.UpdateCommandName Then

Additionally, the edit button also triggers the same line. Is there a way to make that button on the grid trigger one or the other, specifically the performinsertcommand or are both supposed to trigger the same command?

(see picture below)

<telerik:RadGrid ID="RadGrid" runat="server" AllowPaging="True" Width="800px" OnItemDataBound="RadGrid_ItemDataBound" OnNeedDataSource="RadGrid_NeedDataSource" OnItemCommand="RadGrid_ItemCommand" 
    OnItemCreated="RadGrid_ItemCreated" OnDeleteCommand="RadGrid_ItemDeleted" Skin="MetroTouch">

I am currently trialing the products to see if I can get them to do what I need for an app under development.

In my app I have a grid that lists all of a customers active products.

I want to be able to click on an item in the grid (link or button) to launch a modal dialog where I can display in depth info regarding that item - the popup itself would need to have tabstrip and perhaps one or two grids on itself.

So I obviously need to design a view to display all this info which is fine, and I assume the Window component is the most suitable to effect the popup?

I can't seem to find a concrete example of how to call the window from the initial grid, pass the parameter of the selected item, and then load the view within the window.

As I say I am new to all this so feeling my way a little and so any guidance is greatly appreciated.

Thanks

I have a grid in which I am using the columns.Select (see code below) and want a title to display next to the check box in the header where the user clicks the check box to select all rows. There is Title property but when I give it a value it does not display in the header as the other titles do.

This is what I have

 .Columns(columns =>
            {                
                columns.Bound(i => i.lotNumber).Title("Lot Number").Width(100);
                columns.Bound(i => i.lotLocation).Title("Lot Location").Width(100);
                columns.Bound(i => i.lotQuantity).Title("Lot Quantity").Width(100).ClientFooterTemplate("Total: #=sum#"); 
                columns.Bound(i => i.plannedStartDate).Title("Planned Start Date").Width(100).Format("{0:MM/dd/yyyy}");
                columns.Bound(i => i.batchDueDate).Title("Batch Due Date").Width(100).Format("{0:MM/dd/yyyy}");                  
                columns.Select().Title("Pulled").Width(100);                   
               })

Below is a screenshot of the results. I want the text Pulled next to the check box in the header.

Do we need to have individual license for each developers to work on the Telerik UI for ASP NET Core. 

Note:

When other developer try to clone the code from repository which has the dependency on Telerik UI for ASP NET Core, the package was not getting restored when build/rebuild the Appliation and error was thrown instead 

Severity Code Description Project File Line Suppression State
Error NU1102 Unable to find package Telerik.UI.for.AspNet.Core with version (>= 2024.2.514)
- Found 1 version(s) in nuget.org [ Nearest version: 2016.3.914 ]
- Found 0 version(s) in Microsoft Visual Studio Offline Packages

Any assistance on this would be appreciated.

I have a form split into sections, and within one of the sections I have a TextArea, which I want to render as the full width of the form - even when I suppress the label text, the container and spacing is still rendered and so I lose a chunk of space to the left of the text area (horizantal form layout)

@(
Html.Kendo().Form<Customer>()
        .Name("detailForm")
        .HtmlAttributes(new { action = @Url.Action("EditCustomer", "Customer"), method = "POST" })
        .Orientation("horizontal")
        .Items(items =>
        {
            items.AddGroup()
            .Label("Information")
            .Layout("grid")
            .Grid(g => g.Cols(2).Gutter(10))
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.CompanyName)
                        .Label(l => l.Text("Company Name:").Optional(false));
                    i.Add()
                        .Field(f => f.CustomerStatusId)
                        .Label(l => l.Text("Status:").Optional(false))
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .HtmlAttributes(new { })
                                .DataTextField("KeyDescription")
                                .DataValueField("KeyValue")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Size(ComponentSize.Small)
                                .FillMode(FillMode.Outline)
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("LookupValues", "Lookup", new { type = "CustomerStatus" });
                                    })
                                    .ServerFiltering(true);
                                });
                        });
                });
            items.AddGroup()
            .Label("Description")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.Description)                        
                        .Label(l => l.Text(" "))
                        .Editor(e =>
                        {
                            e.TextArea()
                                .Size(ComponentSize.Small)
                                .Overflow(TextAreaOverflow.Scroll)
                                .Rows(8);
                        });
                });

        })
        )

I have tried using the EditorTemplateHandler but that still seems to render the label section?

Thanks

I have set up a form component and specified an action - however when debugging I can see that the form seems not to be posting to the action I have specified.

This is the form code :

@(
Html.Kendo().Form<Customer>()
        .Name("portalForm")
        .HtmlAttributes(new { action = "EditPortal", method = "POST" })
        .Items(items =>
        {
            items.Add()
                .Field(f => f.CustomerId)
                .Editor(editor => editor.Hidden());
            items.Add()
                .Field(f => f.Customer_Guid)
                .Editor(editor => editor.Hidden());
            items.Add()
                .Field(f => f.AppId)
                .Editor(editor => editor.Hidden());
            items.AddGroup()
            .Label("Settings")
            .Layout("grid")
            .Grid(g => g.Cols(4).Gutter(20))
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.CostCentresActive)
                        .Label(l => l.Text("CostCentresActive:").Optional(true))
                        .Editor(e =>
                        {
                            e.Switch()
                                .Messages(c => c.Checked("YES").Unchecked("NO"));
                        });
                    i.Add()
                        .Field(f => f.CostCentreHide)
                        .Label(l => l.Text("CostCentreHide:").Optional(true)).Editor(e =>
                        {
                            e.Switch()
                                .Messages(c => c.Checked("YES").Unchecked("NO"));
                        });
                    i.Add()
                        .Field(f => f.CustomTextActive)
                        .Label(l => l.Text("CustomTextActive:").Optional(true)).Editor(e =>
                        {
                            e.Switch()
                                .Messages(c => c.Checked("YES").Unchecked("NO"));
                        });
                    i.Add()
                        .Field(f => f.DepartmentsActive)
                        .Label(l => l.Text("DepartmentsActive:").Optional(true)).Editor(e =>
                        {
                            e.CheckBox();
                           });
                });
        })
        )

The rendered html seems to suggest it will post to the EditPortal action, but when I click submit it posts to the Edit action which is what rendered the page with the form on in the first place. 

It is a little complicated by the fact that my form component is inside a partial view, which in turn is in a tabstrip on the main Edit view. 

I am probably overlooking something very simple here!

Thanks

If I place a simple Kendo Button in the partial page it shows fine, but the button group does not show at all.  The developer tools and debugging shows everything to be correct and the partial view is being returned via return PartialView(partialViewName); from the controller.

This is driving me crazy.  Is this a known issue?  There are no errors in the console/developer tools.  It is specific to the Kendo Button GROUP.

Please help...thanks!

The view that contains the partial view:

@using Kendo.Mvc.UI

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="max-width:45rem;">
    <div>Administrative Areas</div>
    <div id="buttonGroup">
        @(Html.Kendo().ButtonGroup()
            .Name("adminButtonGroup")
            .Items(t =>
            {
                t.Add().Text("Personal").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
                t.Add().Text("Predefined").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
                t.Add().Text("Regions").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
                t.Add().Text("Flags").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
            })
            )
    </div>
</div>

<div id="adminPartial" class="mt-2">

</div>

<script>

    $(function () {
        // Set the first button as active by default
        $("#adminButtonGroup").data("kendoButtonGroup").select(0);

    });

    function loadPartial(partialViewName) { //clickedElement
        var targetDiv = document.getElementById("adminPartial");

        console.log(targetDiv.innerHTML);

        fetch('/Home/LoadPartialView?partialViewName=' + partialViewName)
            .then(response => response.text())
            .then(html => {
                targetDiv.innerHTML = html;
                console.log("partial view html:" + html);
            })
            .catch(error => {
                console.log('Error:', error);
            });
    }
</script>

Contents of the _Admin partial View: (does not display):

Home Controller Action:

 public IActionResult LoadPartialView(string partialViewName)
 {
     if (string.IsNullOrEmpty(partialViewName))
     {
         return BadRequest();
     }

     return PartialView(partialViewName);
 }

Hello,

We are having scrolling issues with the fairly large menu and sub menu items. Instead of scrolling child menu items on selection, it scrolls the main menu options.

Please advise.

 function onChangesideMenuSwitch(e) {
     var menuContainer = $("#menuContainer");
     var mainSection = $("#mainSection");
     if (!e.checked) {
             menuContainer.hide();
             menuContainer.css("width", "0");
             menuContainer.css("z-index", "-1");
             mainSection.css("padding-left", "0");
         }
 else {
             menuContainer.show();
             menuContainer.css("width", "250px");
             menuContainer.css("z-index", "3");
             mainSection.css("padding-left", "250px");
         }
         }

@model Models.Menu.TopMenuModel
@{
    string pathBase = (string)ViewBag.PathBase;
}
    <style>
        #menuContainer {
            width: 250px;
            overflow: visible;
            display: block;
            z-index: 3;
            height: calc(100% - 100px);
            background-color: white;
            float: left;
            flex: none;
            position: fixed;
            top: 100px;
            margin-bottom: 10px;
        }

        .menuSeperator {
            padding: 2px;
            background-color: var(--cwru-blue);
            border-style: solid;
            border-width: 1px;
        }


        .menuSeperator > .k-menu-link-text {
            font-style: italic;
            color: whitesmoke;
            white-space: normal;
        }

        .menuItem {
            font-style: italic;
            color: whitesmoke;
            background-color: var(--cwru-blue);
        }

        .menuExpandable {
            color: var(--cwru-blue);
            white-space: normal;
            min-width: 200px;
        }

        .k-menu, .k-menu-link-text {
            font-size: 16px;
            color: black;
            padding: 2px;
        }
    </style>


<script type="text/javascript">
    $(document).ready(function () {
        $("#leftMenu").height(window.innerHeight - 120)
        $(window).resize(function () {
            $("#leftMenu").height(window.innerHeight - 120)
        });
    });
</script>

<div id="menuContainer">
    @(Html.Kendo().Menu()
                .Name("leftMenu")
                .HoverDelay(200)
                .Orientation(MenuOrientation.Vertical)
                .Direction(MenuDirection.Right)
                .Scrollable(true)
                .Items(items =>
                {
                    foreach (var menuEntryGroup in Model.AllowedPages.Where(ap => ap.parent_id == null).GroupBy(ap => ap.menucategory_id))
                    {
                        //menu category
                        items.Add().Text(menuEntryGroup.First().menucategory.name)
                            .LinkHtmlAttributes(new { @class = "menuSeperator" }).HtmlAttributes(new { @class = "menuItem" });

                        foreach (var menuEntry in menuEntryGroup)
                        {
                            //top level items.
                            items.Add().Text(menuEntry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + menuEntry.controller + "/" + menuEntry.Viewer)
                                .Items(subitem =>
                                {
                                    foreach (var subentry in Model.AllowedPages.Where(ap => ap.parent_id == menuEntry.id))
                                    {
                                        //second level items
                                        subitem.Add().Text(subentry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + subentry.controller + "/" + subentry.Viewer).LinkHtmlAttributes(new { @class = "menuExpandable" })
                                            .Items(subsubitem =>
                                            {
                                                foreach (var subsubentry in Model.AllowedPages.Where(ap => ap.parent_id == subentry.id))
                                                {
                                                    //third level items
                                                    subsubitem.Add().Text(subsubentry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + subsubentry.controller + "/" + subsubentry.Viewer);
                                                }
                                            });
                                    }
                                });
                        }

                    }
                })
        )
</div>

We are looking to display total number in donut chart.

Is it possible?

Number display in the center should display total when we do not mouse hover over any section of donut.

But if hover over any section, it should show that particular number in center. Look at image below.