I have been trying to implement a simple grid that is editable and sortable in javascript. After trying various ways (inline/popup editing as well as batch set to true/false) I can't find a solution that provides a reasonable end-user experience. Either I can have complete editing functionalities implemented and be unable to sort the grid, or vice-versa.
I reference your example:
http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/batch-editable-grid
However I found when running the example in the telerik dojo the correct functionality is not implemented. The drag and drop is not working. I'm hoping there is an easy fix to my problem.
Thanks,
Kyle
I am working on using the declarative widget configuration so I can dynamically add stuff to the dom and wire it up with a simple kendo.bind('selector call') however I am having some issues with scoping. I am using an IIFE, creating a datasource in it, and calling bind in document ready.. if I do this...
(function () { var dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: baseUrl + "Lookup/CustomerKendo" } }, serverFiltering: true, schema: { data: "Data" } }); // Document Ready $(function () { kendo.bind("#content"); });}());I get an error that dataSource does not exist. I was able to get it to work by doing this...
var billingEdit = billingEdit || {};(function () { // Document Ready $(function () { billingEdit.dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: baseAreaUrl + "Lookup/CustomerKendo" } }, serverFiltering: true, schema: { data: "Data" } }); kendo.bind("#content"); });}());
and specifying billingEdit.dataSource in the data-source attribute. However, I want to avoid creating global variables. Is this possible? I also expect that if I put functions in the IIFE they will be invisible as well and I'll get more errors.
how can I have the controls be bound withing the scope of the IIFE?
I realize that Telerik has posted a roadmap to releasing an Angular 2 version for Kendo UI. That's awesome, however; our company has already begun developing using Angular 2 and our release map is not inline with Telerik's. One strategy we are considering is to use KendoUI Angular 1 directives and the Angular 2 UpgradeAdapter. This will enable us to use Angular 1 directives inside of a Angular 2 implementation.
Has anyone used the UpgradeAdapter to leverage Kendo UI Angular 1 directives inside of Angular 2 using upgradeNg1Component?
Thanks!
Hi Telerik team,
I have a grid with some columns have empty values. When i click sort on the empty values column, the grid still do the sort. It just happen only in Chrome.
you can see the example here
http://dojo.telerik.com/oYaTa/16
Thank you
Hello:
We have been struggling for a few days with inline editing with a nested Grid.
currently the grid is constructed as follows:
<div data-role="grid" data-source="{transport:{read:function(e){ e.success(eqCharges)}, update: function(e){ e.success(); }, destroy: function(e){ e.success();}, error:function(e){debugger;}},schema:{model:{id:'sbwrkordrchrge_rn'}}}" data-editable="{mode: 'inline'}" data-scrollable="false" data-toolbar="['create']" data-columns="[ {command:'edit', attributes: {style:'width:10%;'}}, {field: 'sbwrkordrchrge_rn', hidden:true}, {field: 'sbwrkordrchrge_qntty', title:'Quantity', type:'number'}, {field: 'sbwrkordrchrge_dscrptn', title: 'Description'}, {field: 'sbwrkordrchrge_unt_cst', title: 'Unit Price', format: '{0:c}'}, {field: '', title: 'Price', format: '{0:c}'}, {field: '', title: 'Status'}, {command: 'destroy', attributes: {style:'width:10%;'}} ]"></div>
the Grid displays as expected. the Edit command enables editing as it should. the problem arises when "update" or "cancel" are pressed while editing: neither has any function.
digging into the kendo.all.js file shows that upon cancel or update the data-uid's become mismatched- this appears to happen in the 'pristine data' function.
Any assistance at all is appreciated.
I'm looking at using the Pivot grid to allow some simple data analysis, attaching to an OLAP data source using msmdpump. One of the dimensions of the cube I am working with has rather a lot of rows (~15000) which is giving me a performance problem. Typically users would only want to compare 3 or 4 of these rows - but the dimension filter doesn't seem to handle such long lists of options. Similarly, expanding the whole grid with that dimension selected isn't really an option, as no one could sensibly use 15000 rows of data, even if they could be rendered in a timely manner.
Is there some way to just request a subset of a particular dimension from the cube, so that users could preselect the information for that particular dimension, allowing the Pivot Grid itself to deal with more sensible data sizes?
Is there a way to prevent default in the autocomplete change handler?
I don't want them to exit unless they type in a valid value from the data source. I tried e.preventDefault() but it doesn't seem to work.
Hi
I am trying to center align a TextBox in a diagram.
I tried using http://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/layout#configuration-alignContent, however there is very little information available on how to use it and I couldn't get it to work.
I also tried creating an html template and applying css styles (vertical-align: center / margin:0 auto) to it to center the text and it messes up the diagram completely.
I can't seem to create a dojo snippet at this time. Please edit the Diagram example (http://demos.telerik.com/kendo-ui/diagram/index) and center the text.
I am wondering if its possible to use Nunjucks to iterate through local data that populates into a Kendo UI grid. This is my first time using both Kendo and JS template engines so I am very new to this. Basically, I want to have Nunjucks iterate through my data (in script) and then have it populate into the Kendo grid. I am building this for demo purposes so there is no need to get remote data, now. I am not sure how to accomplish this. Can someone point me to the right direction. Thanks! Here is my code:
<table id="grid"> <colgroup> <col style="width: 150px" /> <col style="width: 300px" /> <col style="width: 120px" /> <col style="width: 120px" /> <col style="width: 120px" /> <col style="width: 120px" /> </colgroup> <thead> <tr> <th data-field="clientLogo" data-template="<img src='#= clientLogo #' />">Client Logo</th> <th data-field="companyName" data-template="<a href='\\#'>#= companyName#</a>">Company Name</th> <th data-field="clientID">Client ID</th> <th data-field="lastEdited">Last Edited</th> <th data-field="lastEditedBy">Last Edited By</th> <th data-field="status">Status</th> </tr> </thead></table><script> //nunjucks to iterate through data below var clients = [ { clientLogo: "/images/lowes.png", companyName: "Lowe's Home Improvement", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/verizon.png", companyName: "Verizon Wireless", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/mcdonalds.png", companyName: "McDonald's Corporation", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/att.png", companyName: "AT&T Wireless & Network Information", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/stjoseph.png", companyName: "St Joseph Healthcare System", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/proteinbar.png", companyName: "Protein Bar", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/invision.png", companyName: "InVisionApp", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"} ];// end iteration
$("#grid").kendoGrid({ dataSource: clients //inline data - to change to remote data });</script>