I use a ColorPicker in an EditorTemplate of an object edited via Popup of the Grid. 

When Editing, it displays the Color of the edited object, that is OK. However, when an object is created, the ColorPicker should display, by default, a random color. 

How to detect, in the EditorTemplate, that the object is created, and generate a random color?

<div class="form-group">
    <label asp-for="Couleur" class="control-label"></label>
    @(Html.Kendo()
        .ColorPicker()
        .Name("Couleur")
        .Value("#ff0000") //"# (0) ? 'yellow' : 'red'#" does not help, it displays black anyway!!!!
        .Messages(b => b
            .Apply("Appliquer")
            .Cancel("Annuler")
            .PreviewInput("Prévisualiser"))
        )
    <span asp-validation-for="Couleur" class="text-danger"></span>
</div>

In a kendo grid with popup edition, I have the EditTemplate for my DTO object.

When I click on "+Add" grid button I will have the popup with the title "Edit" and if I click on "/Edit", I will have the same popup, with same title. 

1) Is there a way to change the popup title in "Add" when I add the object, and "Edit" if I edit it?

2) More than that, I need to "readonly" the DropDown in "edit" mode, and enable it in "add" mode. How to achieve it?

Knowing that the Model in the EditorTemplate is always null, there is any way to do verifications on the server Model...

3) When I add new object, I have a logic to prepare the DTO, before displaying it to the user. However, I have only the method that

[AcceptVerbs("Post")]
public ActionResult ByOneCreate([DataSourceRequest] DataSourceRequest request, MyDTO dto)

is there a way to use a method like this, to pre-fill the initially created object:

[AcceptVerbs("Get")]
public ActionResult ByOneCreate([DataSourceRequest] DataSourceRequest request)

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