Telerik Forums
Kendo UI for jQuery Forum
4 answers
334 views

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

Konstantin Dikov
Telerik team
 answered on 16 Mar 2016
2 answers
369 views

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?

 

 

Bob
Top achievements
Rank 1
 answered on 16 Mar 2016
0 answers
149 views

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!

Andy
Top achievements
Rank 2
 asked on 16 Mar 2016
4 answers
605 views

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

Dimiter Topalov
Telerik team
 answered on 16 Mar 2016
1 answer
332 views

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.

Nikolay Rusev
Telerik team
 answered on 16 Mar 2016
3 answers
231 views

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?

Georgi Krustev
Telerik team
 answered on 16 Mar 2016
3 answers
277 views

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.

 

 

Kiril Nikolov
Telerik team
 answered on 16 Mar 2016
2 answers
825 views

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.

Casper
Top achievements
Rank 1
 answered on 16 Mar 2016
1 answer
154 views

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>

Radoslav
Telerik team
 answered on 16 Mar 2016
6 answers
3.3K+ views
I have a grid with data in it and multiple columns (say col 1, 2, and 3). Columns 1, 2, 3 need to be able to be edited (or preventing editing) based off the values of each other. This is row specific.

For instance, if column 1 (date) is < column 2 (date) then column 3 is not allowed to be edited. 

I know it's simple enough to disable or enable an entire column but my requirements are row specific. So row 1 could have column 3 enabled and row 2 could have column 3 disabled.

Any thoughts?
Konstantin Dikov
Telerik team
 answered on 16 Mar 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?