in the HtmlAttributes , of a TextBox, or DrowDownList etc it seems there is no way to put readonly to false, at least, there is any effect: the field remains always readonly, once the readonly attribute is present, even if is readonly = false;

@(Html.Kendo().TextBoxFor(m=>m.ToitTN).HtmlAttributes(new { @readonly = false })) 

DropDownList readonly property keeps control readonly when readonly=false

Html.Kendo().DropDownList()
.Name("LayerId")
.HtmlAttributes(new { style = "width:100%;background:#:data.Color#;", @readonly = false })

More than that, if this code is in an EditorTemplate of a Model edited in a grid, there is no way to put readonly property using Model in the view.

Model is always null... @readonly = (Model.SomethingId > 0) throws an error, because Model is null when initialising the Grid

Hi,

I'm stuck trying to return a DataSourceResult from an API and deserialize it using JSONConvert.DeserializeObject<DataSourceResult>(json)

This is what I am doing on the ASP.NET Core API side using a DataSourceRequest as input.

                DataSourceResult result = await _repo.Internments.ToDataSourceResultAsync(dsRequest);

                return new ContentResult() {
                        StatusCode = StatusCodes.Status200OK,
                        ContentType = "application/json",
                        Content = JsonConvert.SerializeObject(result, new JsonSerializerSettings() { TypeNameHandling = TypeNameHandling.All })
                    };

Then I am trying to deserialize it on the receiving end (HttpResponseMessage) in an ASP.NET Core MVC controller for use in a grid:

                string funcJSON = getResponse.Content.ReadAsStringAsync().Result;
                result = JsonConvert.DeserializeObject<DataSourceResult>(funcJSON, new JsonSerializerSettings() { TypeNameHandling = TypeNameHandling.All } );

An exception is generated when I try to deserialize it. The assembly is there. Not sure what I am doing wrong.

"Error resolving type specified in JSON 'Telerik.DataSource.DataSourceResult, Telerik.DataSource'. Path '$type', line 1, position 66."

Any help is appreciated.  Thanks!

html-helper work correct, but tag-helper does not work, 2021R1

my code as follow:

@{
    ViewData["Title"] = "UserManager";
    Layout = "~/Pages/_Layout.cshtml";
    IEnumerable<ComboBoxItemBase> listDept = Model.ds.Osdept.OrderBy(q => q.Deptname).Select(q=> new ComboBoxItemBase() { Id=q.Id, Text=q.Deptname }).ToList().AsEnumerable();
}

<kendo-grid name="DgUser" resizable="true"
                selectable="true" style="height:calc(100vh - 270px)"
                navigatable="true" on-edit="DgUserEdit">
        <filterable enabled="false" />
        <sortable enabled="true" />
        <editable enabled="true" />
        <columns>

            <foreign-key-column title="department" field="DeptId" values='@listDept' value-field="Id" text-field="Text" width="150" >
            </foreign-key-column>
    </columns>
    </kendo-grid>

        [HttpPost]
        public JsonResult Create([DataSourceRequest] DataSourceRequest request, License license)
        {

            var x= LicenseRepository.produect.ID==license.productId && LicenseRepository.vendorID==license.VendorId.any();

           if(x==true){

           return error message in cascade dropdown list editor template

            }

 
        }

@model KendoUIMVC5.Models.License

<script type="text/javascript">
    function filterVendors() {
        return {
            customerId: $("#CustomerId").data("kendoDropDownList").value()
        };
    }

    function filterProducts() {
        return {
            vendorId: $("#VendorId").data("kendoDropDownList").value()
        };
    }
</script>

<fieldset>
    <legend>Cascading DropDownLists:</legend>
    <dl>
        <dt>
            @Html.LabelFor(m => m.CustomerId): 
        </dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.CustomerId)
                  .ValuePrimitive(true)
                  .OptionLabel("Select Customer...")
                  .DataTextField("CustomerName")
                  .DataValueField("CustomerId")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetCustomers", "Home"))
                                .ServerFiltering(true);
                  })
            )
            @Html.ValidationMessageFor(m => m.CustomerId)
        </dd>
    </dl>
    <dl>
        <dt>
            @Html.LabelFor(m => m.VendorId):
        </dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.VendorId)
                  .AutoBind(false)
                  .ValuePrimitive(true)
                  .OptionLabel("Select Vendor...")
                  .DataTextField("VendorName")
                  .DataValueField("VendorId")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetVendors", "Home").Data("filterVendors"))
                                .ServerFiltering(true);
                  })
                  .CascadeFrom("CustomerId")
            )
            @Html.ValidationMessageFor(m => m.VendorId)
        </dd>
    </dl>
    <dl>
        <dt>
            @Html.LabelFor(m => m.ProductId): 
        </dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.ProductId)
                  .AutoBind(false)
                  .ValuePrimitive(true)
                  .OptionLabel("Select Product...")
                  .DataTextField("ProductName")
                  .DataValueField("ProductId")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetProducts", "Home").Data("filterProducts"))
                                .ServerFiltering(true);
                  })
                  .CascadeFrom("VendorId")
            )
            @Html.ValidationMessageFor(m => m.ProductId)
        </dd>
    </dl>
</fieldset>

I have a Kendo professional license. I have install @progress/kendo-ui via NPM. WebPack is bundling it as expected and everything compiles fine. When the page loads it can't find kendo to initialize  any of the controls.

in my index.cshtml I have:

...

<head>
 <script src="~/js/vendors-node_modules_jquery_dist_jquery_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_jquery-validation-unobtrusive_dist_jquery_validate_unobtrusive_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_popperjs_core_lib_index_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_progress_kendo-ui_js_kendo_all_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_progress_kendo-ui_js_kendo_all_js-node_modules_kendo-ui-core_js_kendo_ui-55088d.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_toastr_toastr_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
</head>

...

<div class="results">
		@(Html.Kendo().ListView<UserProfile>()
   .Name("userProfileSearchResults")
   .TagName("div")
   .Bordered(false)
   .DataSource(dataSource => dataSource
    .Ajax()
    .Model(m => m.Id(p => p.Id))
    .PageSize(25)
    .Read("UserProfiles_Search", "Home")
    .ServerOperation(false)
    .Sort(sorter =>
    {
     sorter.Add(c => c.ProfileName).Ascending();
     sorter.Add(c => c.EmailAddress).Ascending();
     sorter.Add(c => c.AccountNumber).Ascending();
     sorter.Add(c => c.Id).Ascending();
    })

   )
   .AutoBind(false)
   .Pageable(pager => pager
    .ButtonCount(10)
    .Numeric(true)
    .Enabled(true)
   )
   .ClientTemplateId("userProfileSearchResultItem")
   )
	</div>
	

which generates a chunk of script into the page to initialize that control. But for the inline kendo script....kendo is not defined. It is expecting a global kendo reference which no longer happens with webpack.

package.json:

{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
	"scripts": {
		"build-Debug": "webpack --mode development --no-color --stats-error-details",
		"build-Release": "webpack --mode production --no-color"
	},
	"dependencies": {
		"@popperjs/core": "^2.9.2",
		"@progress/kendo-ui": "^2021.2.511",
		"jquery": "3.5.1",
		"jquery-validation": "^1.19.3",
		"jquery-validation-unobtrusive": "^3.2.12",
		"kendo-ui-core": "^2021.2.511",
		"toastr": "^2.1.4"
	},
	"devDependencies": {
		"@types/glob": "^7.1.3",
		"@types/jquery": "3.5.1",
		"@types/node": "^15.0.2",
		"@types/toastr": "^2.1.38",
		"@types/webpack": "^5.28.0",
		"glob": "^7.1.7",
		"ts-loader": "^9.1.2",
		"ts-node": "^9.1.1",
		"typescript": "^4.2.4",
		"webpack": "^5.37.0",
		"webpack-cli": "^4.7.0"
	}
}

webpack.config.ts

import * as path from 'path';
import * as glob from 'glob';
import * as webpack from 'webpack';

const config: webpack.Configuration = {
	mode: 'development',
	entry: glob.sync('{./Scripts/**/*.ts,./wwwroot/lib/**/*.js}').reduce((obj, path) => {
		const match = /Scripts\/(.*)\.ts$/.exec(path);
		const isDefinition = /(.*)\.d\.ts$/.exec(path);
		const isStandardJs = /lib\/(.*)\.js/.exec(path);
		if (match && !isDefinition) {
			const item = match[1];
			obj[item] = path;
		}
		if (isStandardJs) {
			const item = isStandardJs[1];
			obj[item] = path;
		}
		return obj;
	}, {} as webpack.EntryObject),
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/
			}
		]
	},
	resolve: {
		extensions: [
			'.tsx',
			'.ts',
			'.js'
		]
	},
	devtool: 'inline-source-map',
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'wwwroot/js')
	},	
	optimization: {
		splitChunks: {			
			chunks: 'all'
		}
	}
};

export default config;

What is the correct Tag Helper syntax for the toolbar items Toogle Selection and Zoom?  I'm guessing below because I can't find these two documented anywhere.  The link below gives you some of them but not all.  What I'm trying to do is have the toolbar show all the default items except the open command which requires me to specify all toolbar items except open.

https://demos.telerik.com/aspnet-core/pdfviewer/tag-helper

    <kendo-pdfviewer name="pdfviewer">
        <pdfjs-processing file="@(Url.Action("GetReportDownload", "Downloader"))"/>
        <toolbar enabled="true">
            <pdfviewer-toolbar-items>
                <pdfviewer-toolbar-item command="PageChangeCommand" type="pager" name="pager"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item type="spacer" name="spacer"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="ZoomCommand" type="zoom" name="zoom"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="ToggleSelectionCommand" type="toggleSelection" name="toggleSelection"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item type="spacer" name="spacer"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="OpenSearchCommand" type="button" name="search" icon="search"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="DownloadCommand" type="button" name="download" icon="download"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="PrintCommand" type="button" name="print" icon="print"></pdfviewer-toolbar-item>
            </pdfviewer-toolbar-items>
        </toolbar>
    </kendo-pdfviewer>

Hi,

is it possible to use the breadcrumb component to load partial views into a div?

Regards

Erwin

I have a dropdownlist on a partial page. As it can obviously be shared by multiple pages, code to populate is on a separate shared page. I'm loading using the code below, and that works fine

 @(Html.Kendo().DropDownList() .Name("ModeOfTransport") .DataTextField("description") .DataValueField("modeOfTransportID") .HtmlAttributes(new { style = "width:100%;" })
                       .AutoBind(true) .DataSource(source => source.Custom() .Transport(transport => transport .Read(r => r .Url("/Shared/AjaxPartial?handler=ModesOfTransport").Data("dataFunction") ))
                       .ServerFiltering(true)
                         )
                       .Events(e=>e.DataBound("ModeOfTransportDataBound"))
                       )
   

function ModeOfTransportDataBound(e) {
        var currentModeOfTransport = $('#CurrentModeOfTransport').val();
        e.sender.value(currentModeOfTransport);
    }

ModeOfTransport maps to a bindingproperty, and when the page is saved, the correct selected value is stored in that value. However, when the DropDownList loads, the current value is not selected. The only way I can see to do this is to store the current value in a hidden field, then select on the databound event. This works, but I can't help feeling I'm taking the wrong approach. Any suggestions to improve this process?

We've been working with ASPX and Telerik for over 15 years, but new to Razor, so happy to accept I maybe doing this completely wrong.

When the toolbar and sheetbar are invisible, the bottom horizontal scrolbar is not ajusted (is a little bit above it should be)

@(Html.Kendo()
    .Spreadsheet()
    .Name("spreadsheet")
    .HtmlAttributes(new {style = "width:100%"})
    .Toolbar(false)
    .Sheetsbar(false)

I mean, esthetically, if we suppose that the vertical and horizontal bars should have the same distance to the external border.

For the vertical scrolbar that distance is zero. Should be the same for the horizontal then.

picture:

detailed view:

or add a similar margin to the vertical one: