Good afternoon,

I am using the latest version of Telerik ASP.NET Core (2022.1.119).

I am using the classic opal theme on my site. I have a responsive menu which collapses to the hamburger.

If I reference the common css file first the menus don't wrap correctly when the page width is reduced.

    <link rel="stylesheet" href="~/lib/kendo/css/kendo.common.min.css" />
    <link rel="stylesheet" href="~/lib/kendo/css/kendo.classic-opal.min.css" />

However, having the common css second breaks the tabstrips - the outer borders of the tab no longer display, only the header tabs:

If I'm using kendo.classic-opal.min.css do I also need to use kendo.common.min.css, and if I do, why does this break the tabstrip? Apart from site.css, is there another css I need to reference?

Kind regards,

Richard

Hi,

Just updated from 2021.3.1207 to 2022.1.119 (VS2022 and .NET6) and all my checkboxes used in templates on all pages are not working any more.

This code:

<script id="toolbar" type="text/x-kendo-template">
        
            <div id="blockSyncArea">
                 @(Html.Kendo().CheckBox().Name("blockSync").Enable(ViewBag.BlockSyncStatus.AllowUnblock).Checked(!ViewBag.BlockSyncStatus.BlockSync).Label("Sync Enabled").HtmlAttributes(new
             {
                 onchange = "onBlockSyncChanged();",
                 title = "Toogle to enable or disabled syncing with clients while editing."
             }))
            </div>
}
</script>

Renders like this in 2021.3.1207 (seems to be plain HTML5) and works correctly without any problems:

 <script id="toolbar" type="text/x-kendo-template">
            <div id="blockSyncArea">
                 <input checked="checked" class="k-checkbox" id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><label class="k-checkbox-label" for="blockSync">Sync Enabled</label><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" />
            </div>
</script>

But renders like this in 2022.1.119 and does not work and mess up my pages:

<script id="toolbar" type="text/x-kendo-template">
<div id="blockSyncArea">
                <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("#blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});</script>
</div>
</script>
            

Clearly there has been a change using a kendoCheckBox function instead.

I get these errors in Chrome:

Uncaught SyntaxError: Unexpected token '<'

Uncaught Error: Invalid template:'
            <div id="blockSyncArea">
                 <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("#blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n            <div id="blockSyncArea">\n                 <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("';blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (kendo.all.js:238:31)
    at Object.i [as template] (jquery.min.js:2:88736)
    at HTMLDocument.<anonymous> (Index:671:4117)
    at e (jquery.min.js:2:30005)
    at t (jquery.min.js:2:30307)

Please advise, what is the problem with my very simple code. I strongly suspect a bug in the rendering, since I use the checkboxes in kendo templates and in the error message there seems to be a invalid rendering of jQuery("';blockSync") at the end, that should be #blockSync?

Regards,

Mattias

Hey guys,

does there anywhere exist a working example for a kendo grid which has all the crud operations enabled and is fully accessable via keyboard? I know you have on your demo page a full example for keyboard navigation but there aren't existing crud operations -> https://demos.telerik.com/kendo-ui/grid/keyboard-navigation

Would be nice if there are already some informations how to implement a full keyboard support. If not, well then I have to figure everything out how to access userfriendly all the crud operations.

Thank you!
Daniel

Hi Team,

We follow your example : https://docs.telerik.com/kendo-ui/knowledge-base/retrieve-visible-grid-columns-data-with-select-odata-parameter.

We just replace with our API endpoint and columns fields. Its returns only 20 records first page of records. Rest of the records not showing.

API returns json format.

[
    {
        "workflowId": 48,
        "id": 177,
        "workflowName": "Observations",
    },
    {
        "workflowId": 64,
        "id": 178,
        "workflowName": "IncidentManagement",
    },
    {
        "workflowId": 64,
        "id": 183,
        "workflowName": "IncidentManagement",
    },
    {
        "workflowId": 64,
        "id": 185,
        "workflowName": "IncidentManagement",
    },
]

-----------------------------------------

Hello,

I have a page that is correctly populating a DropDownList with a list of customers as shown below:

 <kendo-dropdownlist for="CustomerIdValue"
                                    name="customers"
                                    filter="FilterType.Contains"
                                    placeholder="Select customer"
                                    datatextfield="Display"
                                    datavaluefield="Value"
                                    style="width: 100%;">
                    <datasource type="DataSourceTagHelperType.Custom">
                        <transport>
                            <read url="@Url.Action("CustomersInternal_GET", "User")" />
                        </transport>
                    </datasource>
                </kendo-dropdownlist>

Unfortunately the dropdownlist be default selects the first customer in its list.

I _don't_ want the dropdown to have a selected item when the page loads. In this particular form I want the user to be forced to select a customer. How do I 1) get the initial load to not select an item 2) check the user has selected a customer from the list before I enable the Submit button.

Yes, a user MUST be forced to actually choose a customer from the dropdownlist.

Thank you kindly!

Hi, I have a Grid for which I have an EditorTemplate. Everything works fine in development, but it fails in production, it seems like the editortemplate is ignored. In Index.cshtml:

.Editable(editable => { editable.Mode(GridEditMode.PopUp).TemplateName("PatentTmpl"); })

The template is located both in Patents/EditorTemplates and Shared/EditorTemplates. 

Did anyone have a problem like this before, or any ideas what to try? It just doesn't make any sense that it's not working in production.

Thanks in advance.

I have two multiselects (vendors and buyers) that are required selections to load a grid which lists POs when a user presses a "search" button. I am trying to learn about how to add validation so that you cannot load the grid unless the two multiselects have something selected. The documentation that I've found deals with forms so trying to figure out how to implement validation for my usecase. 

                    <label for="vendorslist" style="color:white; line-height:3.2; padding-right:3px; padding-top:5px">Vendors</label>
                    <div class="nav-item dropdown" style="padding-right:10px;">
                        @(Html.Kendo().MultiSelect()
                        .Name("vendorslist")
                        .Filter(FilterType.Contains)
                        .Placeholder("Select Vendor...")
                        .AutoClose(false)
                        .AutoBind(false)
                        .DataTextField("displayvalue")
                        .DataValueField("keyvalue")
                        .AutoWidth(true)
                        .HtmlAttributes(new { style = " font-size:inherit; width:250px" })
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetVendorList", "UVL").Data("GetFacilityCode");
                            }).ServerFiltering(false);
                        })
                        .Events(events => events.Open("vendorsListOpen"))
                        )
                    </div>

                    <label for="buyerslist" style="color:white; line-height:3.2; padding-right:3px; padding-top:5px">Buyers</label>
                    <div class="nav-item dropdown" style="padding-right:10px;">
                        @(Html.Kendo().MultiSelect()
                        .Name("buyerslist")
                        .AutoClose(false)
                        .AutoBind(false)
                        .Placeholder("Select Buyer...")
                        .Filter(FilterType.Contains)
                        .DataTextField("agent")
                        .AutoWidth(true)
                        .HtmlAttributes(new { style = " font-size:inherit; width:150px" })
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetBuyers", "PODashboard").Data("GetFacilityCode").Type(HttpVerbs.Get);
                            }).ServerFiltering(false);
                        })
                        )
                    </div>

Function ran when reading grid that pulls selections to use for params when calling API:

function getPOParams() {
    //grab facility
    var dataText = $("#Facility").data("kendoDropDownList").text();
    var facility = dataText.split('-');
    var _facilityCode = $.trim(facility[0]);
    var _facilityDesc = $.trim(facility[1]);

    //grab vendor
    var multiselect = $("#vendorslist").data("kendoMultiSelect");
    var _vendors = [];
    var items = multiselect.value();
    for (var i = 0; i < items.length; i++) {
        _vendors.push(items[i].trim());
    }

    //grab buyer
    var buyerMultiselect = $("#buyerslist").data("kendoMultiSelect");
    var _buyers = [];
    var buyerItems = buyerMultiselect.value();
    for (var i = 0; i < buyerItems.length; i++) {
        _buyers.push(buyerItems[i].agent.trim());
    }

    //grab PO#
    var _poText = $("#poNumTextbox").data("kendoMaskedTextBox").value().toString();

    //grab status
    var _statusText = $("#StatusDropDownList").data("kendoDropDownList").value();

    return {
        vendorCode: _vendors,
        buyer: _buyers,
        facilityCode: _facilityCode,
        facilityDesc: _facilityDesc,
        statusText: _statusText,
        poNumText: _poText
    };
}