I've got two different date pickers in my app, in different parts of the same page, and when I construct them, I am using the same options, but one of them has the "k-input" class added and style set to width:100%, while the second has neither of those - this is on the span containing the following classes: k-widget k-datepicker k-header.
In what situations is the k-input class added and the width: 100% added to this span surrounding the input element - and how do I prevent these from being added?
<input id="postingStartDate" placeholder="@Common.PostingStartDate" value="@Model.StartDate"/><input id="transactionStartDate" placeholder="@Common.StartDate" value="" />and the javascript is:
$("#transactionStartDate").kendoDatePicker();$("#postingStartDate").kendoDatePicker();resulting in:
<span class="k-widget k-datepicker k-header k-input" style="width: 100%;"><span class="k-picker-wrap k-state-default"><input id="postingStartDate" placeholder="Posting Start Date" value="11/17/2010 9:02:41 PM" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="postingStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="postingStartDateLabel" aria-describedby="postingStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="postingStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
<span class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default k-state-hover"><input id="transactionStartDate" placeholder="Start Date" value="" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="transactionStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="transactionStartDateLabel" aria-describedby="transactionStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="transactionStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
Thanks,
--Ed

Hi,
I am using Kendo List view with k-template. I want to use Bootstrap grid system inside template. I could not get it working. The content in template doesn't align properly.
I want content to stay within the listview template and behave the grid col-md-* layout. Even I tried changing css.
I attached the document. Please use the code in Kendo UI Dojo(i.e http://dojo.telerik.com/IyIYe).
Appreciate if you can provide solution.
Hi Team,
Am trying to implement the tree view structure as per the attached image. As you can see, i have parent and child in the same line. When i expand the children it should show it's children under it. Is this structure achievable? Or should i always have children only under a parent and not in the same line?
Thanks!
HI,
I have a kendo gird which is shown in a popup on click of link button in another grid(parent grid)
$(".styleColorsLink").on('click', function () {
var grid = gridMAPScreen.data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
var selectedSeason = dataItem["Season"];
console.log(dataItem);
selectedStyle = dataItem["StyleNumber"];
var selectedStyleDesc = dataItem["StyleDescription"];
var selectedMAPPrice = dataItem["MAPPrice"];
var selectedMAPDiscPercent = dataItem["MAPDiscPercent"];
var selectedExceptionWeekParticipant = dataItem["ExceptionWeekParticipant"];
var selectedExceptionWeekMAPPrice = dataItem["ExceptionWeekMAPPrice"];
var selectedMAPLTMSRP = dataItem["MAPLessThanMSRP"];
var selectedHide = dataItem["Hide"];
var selectedConfidential = dataItem["Confidential"];
var selectedCarryForward = dataItem["CarryForward"];
var initialize = false;
var selectedDS = '@viewType';
var isItemDirty = dataItem.dirty;
var dirtyFields = dataItem.dirtyFields;
$("#gdMAPColors").kendoGrid({
toolbar:hasUpdatePermission ? [
{ name: "save", text: "Save Changes" },
{ name: "cancel", text: "Cancel Changes" }]: "",
editable: "incell",
autoBind: true, // load data during grid initialization
scrollable: true,
//resizable: true,
//reorderable: true,
navigatable: true,
columns: hasUpdatePermission ? ColorColumnOptions : ColorNonEditColumnOptions,
height: 420
}
});
// Column i need to lock in pop up kendo grid
var CarryForwardSeaColorCol = {
title: "Carryforward Season",
field: "CarryforwardSeason",
width: 130,
//Vipul Chnage
locked: true,
lockable: false,
filterable: filterableContain
};
var ColorLevelCodeCol = {
title: "Product Code",
field: "ProductCode",
width: 130,
filterable: filterableContain,
//template: "<span>#=StyleNumber#-#=ColorCode#</span>"
};
//defination of all columns
var ColorColumnOptions = [CarryForwardSeaColorCol, ColorLevelCodeCol, ColorLevelDescCol, ColorLevelLongDescCol,
MSRPLastChangeCol, MSRPPriorCol, MSRPCurrentCol, ConfirmMSRPCol, MAPLastChangeCol, MAPPriceCol, MAPDiscountCol, ExceptionParCol, ExceptionWeekPriceCol,
ExceptionWeekDiscountCol, MAPLTMSRPCol, HideCol, AddCol, ConfidentialCol, CarryforwardCol, NotesCol, ConfirmMMXAddCol];
When i do this CarryForwardSeaColorCol and ColorLevelCodeCol header show in same column.
Appreicate any help. Thanks
Hello. I'm trying to implement virtual scrolling in my ComboBox. I'm using OData for datasource.
I've tried to use this example (https://demos.telerik.com/kendo-ui/combobox/virtualization) however i'm stuck. I don't know how to implement a Value Mapper in my Web API.
In this example it's easy to do, because tere are no any filters/ordering in the DataSource request. But in my canse i'm using the same OData method for different DataSources, but with differend Filters and Ordering. So, how can i get the index if some value which is not existing in the initial DataSource data, if i don't know which filter/ordering was used for a datasource? Because for different filters/ordering the index of this value will be different.
Hi,
I am using Kendo UI for MVC. I have a string column containing string numbers. I also have a hidden int column containing the integer version of these numbers. I would like for the user to sort the string number column, but have the sorting actually take place using the hidden number column. How would I go about this with Kendo UI for MVC?
Thanks.
Hi, I am creating a dropdownlist as follows:
Create Widget:
html.Kendo().DropDownList().Name(widgetName).DataSource(source => { source.Custom().Transport(new { read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" } }); }).HtmlAttributes(new { id = widgetName, selectId = RegexHelper.GetIndex(parameter) })GetPromptData:
function GetPromptData(options) { $.ajax({ url: "FileSubmit/GetPromptData", datatype: "jsonp", data: { "selectId": $('#widgetName').attr("selectid"), "key": window.dataKey }, contentType: 'application/json', success: function (data) { alert("Data is received"); options.success(data); } });}And finally my controller:
public JsonResult GetPromptData(string selectId, string key){ List<string> items = new List<string>(); items.Add("item1"); items.Add("item2"); return Json(items, JsonRequestBehavior.AllowGet);}The ajax call receives a response but from there nothing happens?
I have two date pickers and want to set the min of the second equal to the value of the first however it is not applying the restriction. Here are my two pickers:
<input id="fromDate" name="toDate" kendo-date-picker k-ng-model="vm.fromDate" placeholder="From Date" />
<input id="toDate" name="toDate" kendo-date-picker k-ng-model="vm.toDate" k-min="vm.fromDate" placeholder="To Date" />
Is it possible to use Kendo's Grid to do virtual/infinite scrolling with an unknown number of entities? My data is stored in a NoSQL Datastore which I query using cursors, so in general it is possible to determine where or not the data has tapped out on a particular page fetch, but not the total number of items. Unfortunately, the schema.total documentation included below seems to indicate that schema.total is required for server side paging.
schema.total Function |String
The field from the server response which contains the total number of data items. Can be set to a function which is called to return the total number of data items for the response.
The schema.total setting may be omitted when the Grid is bound to a plain Array (i.e. the data items' collection is not a value of a field in the server response). In this case, the length of the response Array will be used.
schema.total must be set if the serverPaging option is set to true.
So, is there any way to do virtual/infinite scrolling with an unknown total?
Thanks
$("#grid").kendoGrid({ dataSource: { data: testData, pageSize: 10 }, groupable: false, sortable: false, pageable: { refresh: true, pageSizes: true }, columns: [ { width: 35, title: "<input id='checkAll', type='checkbox', class='check-box' />", template: "<input type=\"checkbox\" />" }, { field: "FileName", title: "File Name", template: "<input id='f', type='file' />" }, { field: "Description", title: "Description" }, { field: "InLibrary", title: "In Library", template: "<input type=\"checkbox\" />" }, { field: "Location", title: "Location", editor: locationDropDownEditor, template: "<input type=\"DropDownList\" />" }, ]});$(document).ready(function () { $('#checkAll').click(function () { if ($(this).attr('checked')) { $('.check-box').attr('checked', 'checked'); } else { $('.check-box').removeAttr('checked'); } }); $('#Grid input[type=checkbox][id!=checkAll]').click(function () { var numChkBoxes = $('#Grid input[type=checkbox][id!=checkAll]').length; var numChkBoxesChecked = $('#Grid input[type=checkbox][checked][id!=checkAll]').length; if (numChkBoxes == numChkBoxesChecked && numChkBoxes > 0) { $('#checkAll').attr('checked', 'checked'); } else { $('#checkAll').attr('checked', ''); } });});