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', ''); } });});I'm trying to sort a grid but it simply will not work no matter what I try. I'm using MVC but the JS version of Kendo UI. I've tried server sorting both on and off and several of the sorting options from the API, but it doesn't work. I use Chrome but I tried in IE, same problem, so I don't think it's a problem with stable sorting. Attempting to sort changes the order (not sorted, but it changes), then changing the sort direction after that has no effect at all. I'm using a row template, then applying the sort capability to it inside the grid initializer script.
What does my server need to return to fix sorting, or what am I doing wrong?
This is the row template:
01.<script id="rowTemplate" type="text/x-kendo-tmpl">02. <tr>03. <td class="tdalign">04. <a href="/Controller/Info/#:data.Id#">#:PONumber#</a>05. </td>06. <td class="tdalign">07. #:Col1#08. </td>09. <td class="tdalign">10. #:Col2#11. </td>12. <td class="tdalign">13. #:Col3#14. </td>15. <td>16. <span class="descUppercase">#:Col4#</span>17. </td>18. <td class="tdalign">19. #:Col5#20. </td>21. <td class="tdalign">22. #:Col6#23. </td>24. <td class="tdalign">25. #:kendo.toString(kendo.parseDate(Col7), "MM/dd/yyyy")#26. </td>27. <td class="tdalign">28. #:kendo.toString(kendo.parseDate(Col8), "MM/dd/yyyy")#29. </td>30. <td class="tdalign">31. <table>32. <tr>33. <td class="tdalign col8TD">34. <button type="button" id="Col8#:Id#" class="buttonInit Col8Button #:Col8Class1#" #:Col8Class2#>#:Col8#</button>35. </td>36. <td class="tdalign Col9TD">37. <button type="button" id="Col9button#:Id#" class="buttonInit Col9nButton #:Col9Class1#" #:Col9Class2#>#:Col9#</button>38. </td>39. <td class="tdalign Col10TD">40. <button type="button" id="Col10#:Id#" class="buttonInit Col10Button #:Col10Class1#" #:Col10Class2#>#:Col10#</button>41. </td>42. </tr>43. </table>44. </td>45. </tr>46.</script>This is the initialization script:
01.$(document).ready(function () {02. $("#grid").kendoGrid({03. dataSource: {04. type: "json",05. transport: {06. read: {07. url: "@Html.Raw(Url.Action("List", "Controller"))",08. type: "POST",09. dataType: "json"10. }11. },12. schema: {13. data: "Data",14. total: "Total",15. errors: "Errors"16. },17. error: function(e) {18. display_kendoui_grid_error(e);19. },20. pageSize: @(defaultGridPageSize),21. serverPaging: true,22. serverSorting: true23. },24. pageable: {25. pageSizes: [@(gridPageSizes)],26. info: false27. },28. editable: false,29. scrollable: false,30. mobile: true,31. noRecords: true,32. resizable: true,33. sortable: true,34. excel: {35. allPages: true,36. fileName: "Grid.xlsx",37. },38. rowTemplate: kendo.template($("#rowTemplate").html()),39. dataBound: function(e) {40. $(".buttonInit").kendoButton();41. }42. });43.});