I have the following in side an HTML page:
<!-- Template for simple search row --><script id="simple-search-row" type="text/x-kendo-template"> <div class="simple-search-row"> <input name="fieldName" data-role="dropdownlist" data-text-field="columnDisplayName" data-value-field="columnName" data-bind=" value: field, source: columnsDataSource"></input> <span data-for="fieldName" class="k-invalid-msg"></span> <input name="filter" data-role="dropdownlist" data-text-field="displayName" data-value-field="name" data-bind=" value: type, source: filterTypesDataSource, events: { change : criteriaChanged, dataBound : simpleSearchDDLDataBound }" style="width: 15em;"></input> <span data-for="filter" class="k-invalid-msg"></span> <input id="value-1" name="value-1" type="text" data-bind=" value: values[0]"></input> <span data-for="value-1" class="k-invalid-msg"></span> <span id="value-and" style="display: none;">#: translate('between_and') #</span> <input id="value-2" name="value-2" type="text" style="display: none;" data-bind=" value: values[1]"></input> <span data-for="value-2" class="k-invalid-msg"></span> <a href="\\\\#" data-bind="events: { click : removeSimpleSearchRow }"> <span class="k-icon k-i-cancel"></span> </a> <a href="\\\\#" data-bind="events: { click : addSimpleSearchRow }"> <span class="k-icon k-i-plus"></span> </a> </div></script><div id="simple-search-rows" class="ui relaxed grid" data-template="simple-search-row" data-bind="source: searchFilter.criteria"></div>
"searchFilter.criteria" is a JS array object. And then I have a custom validator:
var simpleSearchValidator = $('#simple-search').kendoValidator({ messages : { fieldname : '', filter : '', valueone : '', valuetwo : '' }, rules: { fieldname : function (input) { if (input.is('[name|=fieldName]')) { if(input.val() === ''){ return false; } } return true; }, filter : function (input) { if (input.is('[name|=filter]')) { if(input.val() === ''){ return false; } } return true; }, valueone : function (input) { if (input.is('[name|=value-1]')) { let filter = input.parent().find('[name|=filter]'), criteria = (filter ? filter.val() : ''); switch(criteria){ case 'EQUAL_TO': case 'NOT_EQUAL_TO': return true; } if(input.get(0).style.display === 'none') { return true; } if(input.val() === ''){ return false; } } return true; }, valuetwo : function (input) { if (input.is('[name|=value-2]') && input.is('')) { if(input.val() === ''){ return false; } } return true; } } }).data('kendoValidator');
The issue is that the validator's .validate() is called, it correctly identifies incorrect data based on the custom rule, however if say the fieldName input field is invalid, it displays the k-invalid-msg for EVERY row, not just the single row with the invalid data. I am guessing this is because the name attributes for each row are not unique. I tried creating a unique id in the template:
<!-- Template for simple search row --><script id="simple-search-row" type="text/x-kendo-template"> <div class="simple-search-row"> # var uid = windows.util.genUniqueId(); # <input name="fieldName#= uid #" data-role="dropdownlist" data-text-field="columnDisplayName" data-value-field="columnName" data-bind=" value: field, source: columnsDataSource"></input> .... </div></script><div id="simple-search-rows" class="ui relaxed grid" data-template="simple-search-row" data-bind="source: searchFilter.criteria"></div>
Unfortunately, that did not work as the uid was only created once, at the time the template was loaded, not for each row.
Is there an easy way to generate a unique form name for the input elements in each row?
A NumericTextBox used in Angularjs (v1.5.8) seems to swallow the click events.
The box is included like this:
<input kendo-numeric-text-box="numericTextBox" fc-numeric-box-placeholder k-spinners="false"
k-decimals="{{ ::decimals }}" k-options="numericBoxOptions" ng-model="value"/>
The options set the min and max values. The box itself works fine, updating values as expected.
If you have a dropdown opened (bootstrap) though, clicking inside the NumericTextBox will not close the dropdown. Clicking anywhere else closes it.
Is there a way to configure NumericTextBox to facilitate this behavior?

We have a requirement where, we are generating controls dynamically.
If I directly put this in html, then it’s working without any problem.
<textarea id="665" tabindex="1" class="rTFStyle" kendo-editor k-ng-model="richTextEditor_665" k-tools="['bold','italic','underline','strikethrough','justifyLeft','justifyCenter','justifyRight','justifyFull','insertUnorderedList','insertOrderedList','indent','outdent']"></textarea>
but if I use it with $compile then it is not working as expected
var html = “<textarea id="665" tabindex="1" class="rTFStyle" kendo-editor k-ng-model="richTextEditor_665" k-tools="['bold','italic','underline','strikethrough','justifyLeft','justifyCenter','justifyRight','justifyFull','insertUnorderedList','insertOrderedList','indent','outdent']"></textarea>”<br>$('#myTabContent2').html($compile(html)($scope))in previous versions it was working fine.
I have latest version of kendo now Kendo UI v2017.1.223(kendo ui 2017 Q1 sp1).
I got the following errors.
Hello, I have a grid that does not show the caret (up or down) but it does sort asc only. It is firing the sort event when I click the heading of columns with a "field" but it only does a sort descriptor of "asc" and never shows the caret in the grid header? What am I doing wrong?
<kendo-grid [data]="gridView" [height]="400" [sortable]="{mode: 'single'}" [sort]="sort" (sortChange)="sort($event)">
<kendo-grid-column title="#" [width]="30">
<template kendoGridCellTemplate let-rowIndex="rowIndex">{{rowIndex + 1}}</template>
</kendo-grid-column>
<kendo-grid-column title="Edit" [width]="60">
<template kendoGridCellTemplate let-dataItem>
<a class="btn btn-primary" (click)="edit(dataItem.Id)" title="Edit {{dataItem.Id}}">
<i class="fa fa-edit white"></i>
</a>
</template>
</kendo-grid-column>
<kendo-grid-column field="Location" title="Location">
<template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.Location}} - {{locName[rowIndex]}}
</template>
</kendo-grid-column>
<kendo-grid-column field="Sdate" title="Date and Time Created">
<template kendoGridCellTemplate let-dataItem>
{{dataItem.Sdate | date: 'MM/dd/yyyy'}} - {{'01/01/01 ' + dataItem.Stime | date: 'HH:mm:ss'}}
</template>
</kendo-grid-column>
<kendo-grid-column field="DownCount" title="Count"></kendo-grid-column>
<kendo-grid-column field="ScanBy" title="Scanned By"></kendo-grid-column>
<kendo-grid-column [width]="60" title="Del">
<template kendoGridCellTemplate let-dataItem>
<a class="btn btn-danger" (click)="delete(dataItem.Id)" title="Delete Scan Entry">
<i class="fa fa-close white"></i>
</a>
</template>
</kendo-grid-column>
</kendo-grid>
Hi,
Does the Kendo MVC grid handle HTTP 500 errors that thrown during the CRUD operations? The 'error_handler' is fired but no errors are displayed?
Do I have to catch the exceptions and manually add them to the "ModelState' dictionary for them to be displayed to the user using 'error_handler' javascript funtion? See my html markup below.
@(Html.Kendo().Grid<Province>() .Name("ProvinceGrid") .Columns(columns => { columns.Bound(l => l.Name).Title("Name"); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable() .Scrollable() .HtmlAttributes(new {style = "height:450px;"}) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.Id)) .Create(update => update.Action("Create", "Province").Data("getCountryId")) .Read(read => read.Action("Read", "Province", new {countryId = Model})) .Update(update => update.Action("Update", "Province")) .Destroy(update => update.Action("Delete", "Province")) ) )
I appreciate your help.
I am using html.Encode when saving the data in the db. So in the db I have <> but when I show the data in the grid to the users I want them to see <>. How can I accomplish decoding the string?
function loadActivity2Grid() {
intCompanyValue = $('#hdnCompanyID').val();
if (intCompanyValue != "0" && blnActivityLoaded == false) {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "WebService.asmx/loadActivity",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "GET",
data: { intCompanyID: intCompanyValue }
}
},
pageSize: 10,
schema: {
//data: function (data) {
// return data.d;
//},
data: "d",
total: "d.length",
model: {
fields: {
intNoteID: { type: "number" },
ActType: { type: "string" },
Employee_Name: { type: "string" },
appt_date: { type: "date" },
activity_completed_date: { type: "date" },
OutcomeNotes: { type: "string" },
ContactName: { type: "string" }
}
}
}
, sort: ({ field: "appt_date", dir: "desc" })
});
$("#grdActivity2").kendoGrid({
dataSource: ds,
width: 870,
filterable: true,
sortable: {
mode: "multiple"
},
pageable: {
refresh: true,
pageSizes: true,
previousNext: true
},
scrollable: false,
columns: [
{
template: '<input type="button" class="btn_small" value="View" onclick="viewActivity(\'#=intNoteID#\');" />', width: 50,
width: 50
},
{
field: "ActType",
title: "Type",
width: 75
},
{
field: "Employee_Name",
title: "Assigned To",
width: 125
},
{
field: "appt_date",
title: "Scheduled<br>Date",
format: "{0:MM/dd/yyyy}",
width: 75
},
{
field: "activity_completed_date",
title: "Date<br>Completed",
format: "{0:MM/dd/yyyy}",
width: 75
},
{
field: "OutcomeNotes",
title: "Outcome/Notes",
width: 345
},
{
field: "ContactName",
title: "Contact",
width: 125
}
]
});
}
}
Hi, When I click on a cell, which has multi line text, the k-spreadsheet-formula-bar area expands to show the content, however, this forces the spreadsheet to render incorrectly. Please see screenshot.
Thanks
Marc
I am trying to get a MultiSelect to submit but it just refuse.
I am trying to debug the incoming request from the page and it contains no selectlist value in any way, shape or form.
<div class="demo-section k-content">
@(Html.Kendo().MultiSelectFor(x => x.CMC)
.ValuePrimitive(true)
.BindTo(ViewBag.CMC)
.DataTextField("Name")
.DataValueField("UnitId")
.Filter(FilterType.Contains)
.Placeholder("Välj ett eller flera CMC...")
)
</div>
This is inside a using block that looks like this:
@using (Html.BeginForm("Search", "Search"))
{
}
The model (SearchABR) is fetched from the viewbag as you can see above, and looks like this:
public class SearchABR
{
public string Abonnentnummer { get; set; }
public string Firstname { get; set; }
public string Lastname { get; set; }
public List<CMCEntity> CMC { get; set; }
}
And in this function in the controller:
[Authorize(Roles = "ABR_LOGIN")]
[HttpPost]
public ActionResult Search(SearchABR search)
{
RetreiveInformation ri = new RetreiveInformation();
if (ModelState.IsValid)
{
// Everything is valid. Return the search parameters.
// Fix CMC information.
}
ViewBag.CMC = FetchCMC();
return View(search);
}
And I put a breakpoint at "Fix CMC Information" and cannot find CMC in the Request at all. It's not there. The other fields are there, but not CMC.
Help!
Hi all,
I have a kendo UI grid, then I set it as edit. In Grid row, when I click the "Edit", it will have a . In this popup editor, I have the dropDownList to select the value.
Now my problem is, my value and dropDownList is separate, which is supposed to together.
I attach my code for view.
<div style="margin-left:20px; margin-bottom: 20px">
<div>
@Html.LabelFor(model => model.Name)
</div>
<div>
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
@(Html.Kendo().DropDownList()
.Name("Name2")
.DataTextField("Name")
.DataValueField("ComputerID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SelectAll", "Computer"); //Set the Action and Controller names.
})
.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
})
)
</div>
</div>
