Telerik Forums
Kendo UI for jQuery Forum
1 answer
509 views
Hi,

I am declaratively creating a kendo grid like so:

<div data-role="grid" data-columns="..." data-toolbar="[{"template": "<div id=\"gridToolbar\" class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" value=\"My Button\"/></div>" }]" data-source="..." ...></div>

After the grid is created I am making some changes to the toolbar (or maybe the datasource).  

$(kgrid.element).find("#gridToolbar").find("input").attr("value", "My Button 2");

This all works fine. But if kendo.bind is called again (lets say to bind a new observable to the UI), then the changes to the toolbar are lost because it is rebuild from the data attribute. My understanding is that kendo.bind initializes kendo controls and binds data for MVVM.  I had assumed that bind would only declaratively initialize the control ONCE, then subsequently just bind the observable to the already initialized controls.  Clearly this is wrong.  

In order to avoid this problem, I have found that if I remove the data-role attribute after the first call to kendo.bind (or kendo.init), then kendo.bind will not find the grid which prevents re-initialization. This is hacky and there are some downsides I can think of.

Is there some other way to handle this problem?  I really like the declarative initialization.  We render our kendo controls server side with declarative attributes, send to the browser, then just call kendo.init.  Works great, no messy inline JavaScript creating kendo controls.  But if we use MVVM and call kendo.bind, then control customization can get lost if those options were initially defined in attributes.  Am I missing something obvious here to avoid this problem?

Here is a dojo example:

http://dojo.telerik.com/itaqa

Thanks for any feedback.
Georgi Krustev
Telerik team
 answered on 21 Jan 2015
1 answer
146 views
I'm working with dynamic columns, so I need to keep track of an ID for every column. 
So I'm using the field property for my ID and the name property for my column name. (The icons in the header are done with the headerTemplate property)

But when I start grouping, the grid uses the name property to show the grouped column (Here it is FN1).
Normally it shows also the field property in the group template, but I was able to use the groupTemplate property to show the the name I want (here it is the columnName).

But is it possible to change the text of the field in the drop zone? Now there is 'FN1' but can I change it so it shows 'abc'? 
Daniel
Telerik team
 answered on 21 Jan 2015
1 answer
335 views
I have a grid where one of my fields is an attribute type with and id and text that needs to be edited with a dropdownlist in the popup editor. When a specific value in that dropdownlist is selected I need to be able to show a grid in the editor as well to set additional values. These values are not part of the original grid. I've tried creating a custom editor template but ran into problems binding the data for the dropdownlist. The attribute type in the original grid kept getting set to undefined, but the correct value was getting back to the database. I tried using the built in editor and just setting the editor for the dropdownlist and adding a grid to the popup editor in the change event, but that wasn't working at all (the grid showed up but with the header at the bottom and covered everything else in the popup). Is there a way to do this and still have all of the values data bound to the original grid?

Thanks,
Andrea
Petur Subev
Telerik team
 answered on 21 Jan 2015
1 answer
124 views
I have created a grid with MVC wrapper and have turned on the scrollable option. I have also defined a width for every column. In a wide desktop view no scrollbars show in Chrome as the width is wide enough to accomodate all columns, which is the behavior I want, however the horizontal scrollbar always show in firefox. Turning scrollable off is not an option as I want the grid to be scrollable at smaller screen size.

Using
Kendo 2014.3.1119
Firefox 35.0
Thien
Top achievements
Rank 1
 answered on 21 Jan 2015
6 answers
873 views
Is it possible to put your template in an external. js file and then pull it into the page?

<script src="/Scripts/template.js" type="text/x-kendo-template" id="details-n-actions-template">

I tried this, but it didn't work and I didn't see any errors come through.
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
 answered on 20 Jan 2015
5 answers
220 views
I'm trying to use cascade ComboBoxes.
In the parent ComboBox, I registered a change event like
change: function(e) {
    e.preventDefault();
    var child = $('#child').data('kendoComboBox');
    var childDataSourceUrl = "/data/source?param=" + this.value();
    child.dataSource = new kendo.data.DataSource({
        type: "json",
        serverFiltering: false,
        transport: { read: { url : childDataSourceUrl } }
    });
    child.dataSource.read();
}
When child.dataSource.read(); is called, it fires a ajax call correctly, and the response is also correct. But the data doesn't bind with child ComboBox, leaving it blank. Any idea why? And how to solve it?
Thanks!



Yuan
Top achievements
Rank 1
 answered on 20 Jan 2015
5 answers
324 views
I think I found a flaw in the logic to get the first editable column when adding a new row to a grid.  I have a grid where the visibility of the first column is toggled on and off based on another control on the page.  When the first column is hidden and the button is clicked to add a new row the first cell is not given focus.  I traced this through the code and came to this function:

_firstEditableColumnIndex: function(container) {
    var that = this,
        column,
        columns = that.columns,
        idx,
        length,
        model = that._modelForContainer(container);
 
    for (idx = 0, length = columns.length; idx < length; idx++) {
        column = columns[idx];
 
        if (model && (!model.editable || model.editable(column.field)) && !column.command && column.field) {
            return idx;
        }
    }
    return -1;
},

It looks like there should be a check for !column.hidden as part of the if condition so that we don't try to set the focus to a cell in a hidden column.  Let me know if that seems correct or if there's a different way I should be handling this situation.  Thanks!

Regards,
Brian
Brian Roth
Top achievements
Rank 1
 answered on 20 Jan 2015
2 answers
144 views
Is it possible to open a PopOver programmatically from a regular link without the data-role='button' attribute?  I have an icon wrapped in a link and don't want all the bulky chrome of the standard button.
RES
Top achievements
Rank 1
 answered on 20 Jan 2015
1 answer
283 views
Hi,

I am using the javascript telerik scheduler and I have driver names as resources and using the vertical grouping. I want to change the the text color of the driver names in the resources. I am adding the html tags to the text in the resources array but in the scheduler the tags are showing directly as shown in attached image. Can you please let me know how to fix this.

Thanks in advance.
Iliana Dyankova
Telerik team
 answered on 20 Jan 2015
1 answer
248 views
i am trying to use a pivot grid for binding data from service which returns OData. What are the functionality among the following will be supported for the pivot grid?

a)Sorting
b)Paging
c)Filtering

Please tell If the functionality is supported and if they are supported, please provide me with a suitable example.

I am following link for achieving binding data  from OData service

http://demos.telerik.com/kendo-ui/pivotgrid/remote-flat-data-binding


Thanks

Georgi Krustev
Telerik team
 answered on 20 Jan 2015
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?