Hi.
I'm in a situation where I am dynamically creating a kendoUI dropdown list from javascript. it does not adopt all the values to function with angular JS properly. Please see the following Dojo example. http://dojo.telerik.com/eyOdU/2
The control created declaratively with an angular directive hooks up properly but the one created from javascript does not. What am I missing? how do I dynamically create this control from Javascript and still have the lovely control over data Angular brings?
Thanks
Hello, I'm using a single DropDownList which is bound to remote data. It all works fine except from when the filter string doesn't match with any records in the database. How to reporoduce a bug, step by step:
1. Click on the data bound DropDownList component.
2. Write a filter string that returns no records
3. Click outside of the component to DropDownList close it
4. (issue) Click again to "open" the DropDownList component and change the filter --> after a loading gif stops spinning, the component isn't shown nor the filter input field
How to fix the issue?
A workaround came to my mind where I could modify the results when server would return 0 rows to insert a single row with some rubbish data but that is not acceptable.
Component setup:
01.$("#input-customer-id").kendoDropDownList({02. filter: "startswith",03. dataTextField: "customer_name",04. dataValueField: "id",05. dataSource: {06. type: "json",07. serverFiltering: true,08. transport: {09. read: function(options) {10. $.ajax({11. url: "api/serviceXY.php",12. dataType: "json", 13. type: 'post',14. data: 'filter=' + customerFilter,15. success: function(result) {16. options.success(result);17. },18. error: function(result) {19. options.error(result);20. }21. });22. }23. }24. },25. filtering: function(e) {26. if (typeof e.filter !== 'undefined') {27. console.log(e.filter);28. customerFilter = e.filter.value;29. }30. }31. });
I'm trying to figure out how to access parent level data using template syntax (#: parentId #) as opposed to data-bind="text: parentId" syntax. The data-bind syntax finds the parent data, but the template syntax does not. I'm trying to create a path so I cannot use data-bind syntax. I've created an example to demonstrate the problem here:
http://jsfiddle.net/MadCodeMonkey/uwf5w83x/
If you remove #: parentId # from the template, it will work again.
I assume that it is supposed to automatically retrieve parent data the way data-bind works, but perhaps it just doesn't work the same way.
Hi,
Is there any way to add a carriage return in a cell when the data is exported to Excel ? I tried a few things but without any result.
Thanks in advance.
I am using the mvvm template system to build a page in my application. My main template uses a template inside of it. The data is bound by referencing an array of data that exists inside a object that the main template references as its source. It "mostly" works. However, I noticed that some of the data for the "template in the template" is not printing to the view port. Also, there are random empty list objects being printed to the dom. I have create a dojo to show you my issue: http://dojo.telerik.com/EVefA
Pleas advise.
Hello all,
My newest adventure in Kendo Grid usage has led me down the path of using a custom ToolBar template. Within this ToolBar I have a DropDownList and a CustomCommandToolBarButton (among other things, but those are the only 2 things that matter in this context).
The grid is populated with a bunch of rows with a column on the left hand side that has a checkbox. The intent is for a user to check the rows they want to be affected, set the DropDownList to the status they want to set all the selected rows too, push the button and have the records update.
The problem I'm having is I do not know how to pass the value of the DropDownList to the CustomCommandToolBarButton. I know...I know...it should be really easy, but I haven't found an example of anything like this anywhere. :( I'll include the source files in question...please look them over and let me know if there's an easy way to accomplish what I'm looking to do.
View:
@using PhynetReporting@{ ViewBag.Title = "Gold List - 3rd Party Optics"; Layout = null;}<script> function grid_error(e) { if (e.errors) { var message = "There are some errors:\n"; // Create a message containing all errors. $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); // Display the message alert(message); // Cancel the changes var grid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid"); grid.cancelChanges(); } } function GetTransceiverBreakoutModeFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverBreakoutModesForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } function GetTransceiverCableLengthFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverCableLengthsForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } function GetTransceiverCompatibilityFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverCompatibilitiesForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } function GetTransceiverFormFactorFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverFormFactorsForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } function GetTransceiverLifecycleStatusFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverLifecycleStatusForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } function GetTransceiverRevisionFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverRevisionsForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } function GetTransceiverSupplierFilter(element) { element.kendoAutoComplete( { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: '@Url.Action("GetTransceiverSuppliersForFiltering", "ThirdPartyOpticsGoldList")' }, type: "aspnetmvc-ajax" } }); } $(function () { $('#ThirdPartyOpticsGoldListGrid').on('click', '.chkbx', function () { var checked = $(this).is(':checked'); var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid; var dataItem = grid.dataItem($(this).closest('tr')); dataItem.set('Selected', checked); }) }) function checkAll(e) { var state = $(e).is(':checked'); var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid; $.each(grid.dataSource.view(), function () { if (this['Selected'] != state) this.dirty = true; this['Selected'] = state; }); grid.refresh(); } function TransceiverLifecycleStatusDropDownListChange(e) { tlsValue = this.value(); }</script><div> <h2>3rd Party Optics Gold List</h2> <hr size="3" /></div><div> @{ var columnWidth = 170; } @{ var tlsValue = ""; } @(Html.Kendo().Grid<ThirdPartyOpticsGoldListModel>() .Columns(c => { c.Template(@<text></text>) .ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='chkbx' />") .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>") .Width(80); c.Bound(tpogl => tpogl.TransceiverDisplayName) .Filterable(false) .Title("Title") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverCompatibilityName) .Filterable(f => f.UI("GetTransceiverCompatibilityFilter")) .Title("Compatibility Type") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverFormFactorName) .Filterable(f => f.UI("GetTransceiverFormFactorFilter")) .Title("Form Factor") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverSupplierName) .Filterable(f => f.UI("GetTransceiverSupplierFilter")) .Title("Vendor") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverRevision) .Filterable(f => f.UI("GetTransceiverRevisionFilter")) .Title("Firmware Revision") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverBreakoutMode) .ClientTemplate("#:TransceiverBreakoutMode#") .Filterable(f => f.UI("GetTransceiverBreakoutModeFilter")) .Title("Breakout Mode") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverCableLength) .Filterable(f => f.UI("GetTransceiverCableLengthFilter")) .Title("Cable Length") .Width(columnWidth); c.Bound(tpogl => tpogl.TransceiverLifecycleStatusName) .EditorTemplateName("TransceiverLifecycleStatusDropDownListTemplate") .Filterable(f => f.UI("GetTransceiverLifecycleStatusFilter")) .Title("Status") .Width(columnWidth); c.Bound(tpogl => tpogl.Comments) .Filterable(false) .Title("Comments") .Width(columnWidth); }) .DataSource(ds => ds .Ajax() .Batch(true) .Events(e => e.Error("grid_error")) .Model(m => { m.Id(tpogl => tpogl.TransceiverID); m.Field(tpogl => tpogl.Selected).Editable(true); m.Field(tpogl => tpogl.TransceiverID).Editable(false); m.Field(tpogl => tpogl.TransceiverDisplayName).Editable(false); m.Field(tpogl => tpogl.TransceiverCompatibilityName).Editable(false); m.Field(tpogl => tpogl.TransceiverFormFactorName).Editable(false); m.Field(tpogl => tpogl.TransceiverSupplierName).Editable(false); m.Field(tpogl => tpogl.TransceiverRevision).Editable(false); m.Field(tpogl => tpogl.TransceiverBreakoutMode).Editable(false); m.Field(tpogl => tpogl.TransceiverCableLength).Editable(false); }) .Read(r => r.Action("GetThirdPartyOpticsGoldListItems", "ThirdPartyOpticsGoldList")) .Update(u => u.Action("UpdateThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldList"))) .Editable(e => e.Mode(GridEditMode.InCell)) .Excel(e => e .AllPages(true) .FileName("ThirdPartyOpticsGoldListReport.xlsx") .Filterable(true) .ProxyURL(Url.Action("ExcelExportSave", "DataMaintenance"))) .Filterable(f => f .Extra(false) .Operators(o => o .ForString(s => s .Clear() .StartsWith("Starts With") .IsEqualTo("==") .IsNotEqualTo("!=")))) .HtmlAttributes(new { @class = "KendoGrid" }) .Name("ThirdPartyOpticsGoldListGrid") .Navigatable() .Resizable(r => r.Columns(true)) .Scrollable() .Selectable(s => { s.Type(GridSelectionType.Row); s.Mode(GridSelectionMode.Multiple); }) .Sortable() .ToolBar(t => { t.Template( @<text> <table> <tr> <td width="200px;" style="border: none"> @item.SaveButton() </td> <td width="170px;" style="border: none"> <label>Bulk set status to all selected rows:</label> </td> <td style="border: none"> @(Html.Kendo().DropDownList() .AutoBind(false) .DataSource(ds => { ds.Custom() .Type("aspnetmvc-ajax") .Transport(tr => { tr.Read("GetTransceiverLifeCycleStatus", "TransceiverLifeCycleStatus"); }) .Schema(s => { s.Data("Data") .Total("Total"); }); }) .DataTextField("Name") .DataValueField("Name") .Events(e => e.Change("TransceiverLifecycleStatusDropDownListChange")) .HtmlAttributes(new { style = "width: 150px" }) .Name("TransceiverLifecycleStatusDropDownList") .OptionLabel("Select Transceiver Lifecycle Status...")) </td> <td style="border: none"> @item.CustomCommandToolBarButton("BulkUpdate", "Bulk Updated Selected", "UpdateSelectedThirdPartyOpticsGoldListItems", "ThirdPartyOpticsGoldList", new { transceiverLifecycleStatusName = $("#TransceiverLifecycleStatusDropDownList").val() }) </td> <td style="border: none"> <a class="k-button k-button-icontext k-grid-excel" href="#" style="float: right;"><span class="k-icon k-i-excel"></span>Export To Excel</a> </td> </tr> </table> </text>); }))</div>Controller:
namespace TPOReports.Controllers{ using System.Collections.Generic; using System.Linq; using System.Web.Configuration; using System.Web.Mvc; using Kendo.Mvc.Extensions; using Kendo.Mvc.UI; using PhynetReporting; using Kendo.Mvc.UI.Fluent; using System.Linq.Expressions; public class ThirdPartyOpticsGoldListController : Controller { public ActionResult ThirdPartyOpticsGoldListView() { return View(); } [HttpPost] public ActionResult GetThirdPartyOpticsGoldListItems([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverGoldListItems", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.ToDataSourceResult(request); return Json(result); } [HttpPost] public ActionResult GetTransceiverBreakoutModesForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverBreakoutModesForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverBreakoutMode).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult GetTransceiverCableLengthsForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverCableLengthsForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverCableLength).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult GetTransceiverCompatibilitiesForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverCompatibilitiesForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverCompatibilityName).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult GetTransceiverFormFactorsForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverFormFactorsForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverFormFactorName).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult GetTransceiverLifecycleStatusForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverLifecycleStatusForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverLifecycleStatusName).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult GetTransceiverRevisionsForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverRevisionsForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverRevision).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult GetTransceiverSuppliersForFiltering([DataSourceRequest] DataSourceRequest request) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList(); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("GetTransceiverSuppliersForFiltering", thirdPartyOpticsGoldListResult.Message); } DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverSupplierName).Distinct().ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult UpdateSelectedThirdPartyOpticsGoldListItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ThirdPartyOpticsGoldListModel> thirdPartyOpticsGoldListItems, string transceiverLifecycleStatusName) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.UpdateSelectedThirdPartyOpticsGoldListItems(thirdPartyOpticsGoldListItems, transceiverLifecycleStatusName); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("UpdateSelectedThirdPartyOpticsGoldListItems", thirdPartyOpticsGoldListResult.Message); } return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState)); } [HttpPost] public ActionResult UpdateThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, [Bind(Prefix ="models")]IEnumerable<ThirdPartyOpticsGoldListModel> thirdPartyOpticsGoldListItems) { TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.UpdateThirdPartyOpticsGoldList(thirdPartyOpticsGoldListItems); if (!thirdPartyOpticsGoldListResult.Result) { ModelState.AddModelError("UpdateThirdPartyOpticsGoldListItem", thirdPartyOpticsGoldListResult.Message); } return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState)); } }}
Thanks in advance. :)
Hi, we have a radarchart which is rendering fine in Chrome, FireFox and Safari, but not in IE11. In IE11 it generated a red point on the screen with a tooltip. But no chart. See both attached files.
We use: Kendo UI v2015.3.930
What could be the cause of this?
I've got an existing page that's created using a Kendo template. I need to add one or more upload widgets to this page (dynamic, based on page contents). I see that it's possible to template the upload widget (http://demos.telerik.com/kendo-ui/upload/templates), but I'm not sure how or if that will work inside my existing template. Can you point me towards documentation, or even better, an example of how to implement nested templates (if possible), specifically upload templates?