Telerik Forums
Kendo UI for jQuery Forum
2 answers
867 views
I looked through the demos and documentation and found no indication that what I'm doing is supported, but I'd like to try anyway:

I like the Inline Editing feature demonstrated here, but I do not like how an entire column is wasted providing space for Edit, Delete, Update, and Cancel buttons for each individual row. I want our users to be able to select a row (or several):
selectable: "multiple row"

...then click the Edit button in the Toolbar (I'm using Twitter's Bootstrap and its included Glyphicons, hence the templates):
toolbar = [
    { name: "create", template: "<a class='k-button add'><i class='icon-plus'></i></a>" },
    { name: "edit", template: "<a class='k-button edit'><i class='icon-pencil'></i></a>" },
    { name: "destroy", template: "<a class='k-button delete'><i class='icon-remove'></i></a>" },
    { name: "save", template: "<a class='k-button save'><i class='icon-ok'></i></a>" },
    { name: "cancel", template: "<a class='k-button cancel'><i class='icon-ban-circle'></i></a>" },
]

and finally, the selected row(s) would become editable:
editable: {
    mode: "popup",
    template: kendo.template($("#teamPopupEditor").html()),
    update: false,
    destroy: false,
    confirmation: "Are you sure you want to remove this item?"
},

It would be great if the editor could not be a popup, but instead look and feel just like the inline editor; the only difference is, instead of the buttons being in the same row, they would be in the Toolbar.

I know it should be possible to get the uid of a highlighted row and use it to target the editor, I'm just having trouble putting it together in my head, and I'm having difficulty figuring out how to make it look and act like inline editing rather than a popup dialog.

We want to be able to grant or revoke editing privileges based on the user's permissions based on the permissions of the logged-in user (changing the editable option to false, and removing the toolbar, and similarly disabling editing on the back-end to prevent clever workarounds), as well as ensure that editing still functions within the limitations of mobile devices (multitouch screens are bad for advanced or complicated UI design and don't work well with mouse-oriented features). Furthermore, clicking once on a cell to make it editable seems like a great way to have an accident (even/especially on a desktop computer -- perhaps one could use double-click instead?), and editing a row inline with that whole column dedicated to the buttons seems like a waste of space, especially on a mobile device with limited screen real-estate. I can just barely fit four columns sized to 25% each on a 320px-wide screen (original iPhone in portrait mode), and I need all four of them for displaying data in most cases.

Please reference my other thread here for details about my specific Grid setup if needed.

Thank you for your help so far. I have been enjoying learning and working with Kendo, even if its new-ness necessitated bugs, missing features, and unfinished documentation. It's definitely one of the more robust JavaScript frameworks I've worked with.

Best Regards,

Adrian
Adrian
Top achievements
Rank 1
 answered on 15 Aug 2012
1 answer
479 views
I'm using a kendo grid with paging.

When there are no records it shows a zero for the page #, and the empty message appears. How can I not show the zero page #?
Petur Subev
Telerik team
 answered on 15 Aug 2012
1 answer
120 views
Hi, testing datasource seem not to recognise json dates in /Date(..) format. Any examples on ways to solve this?
tony
Top achievements
Rank 1
 answered on 15 Aug 2012
0 answers
126 views
I'm pasting some html into an editor using the .paste() method. The html is too long to fit in the editor so a scrollbar is created as I'd expect. However, this scrollbar scrolls to the bottom of the editor and I would like to scroll it back to the top programatically. I have tried .scrollTop(0) but this doesn't work even with the editor set to 'scrollable: true'. Has this feature been implemented or is there a workaround for it at all?
Paul
Top achievements
Rank 1
 asked on 15 Aug 2012
0 answers
198 views
How do I check if the value is null tDtAlteracao within the DataBound? Would you like to do this without setting the field name.

#= kendo.toString(tDtAlteracao,'d') #
  
 $("#" + sNmId).kendoGrid({
        dataBound: function (e) {
            if (this.dataSource.group().length == 0) {
                setTimeout(function () {
                    $(".k-grouping-header").html(jsonResource[0]);
                });
            }
        }
    });

Thanks
Fabricio
Top achievements
Rank 1
 asked on 15 Aug 2012
1 answer
168 views
How can I handle errors, which for example occur on the server side.
I have defined this HierarchicalDataSource:

    var childrenDataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: function (options) {
                    return kendo.format("../api/hierarchytree/{0}", options.id);
                }
            }
        },
        schema: {
            model: {
                hasChildren: "hasChildren",
                id: "id"
            }
        }
    })
Alex Gyoshev
Telerik team
 answered on 15 Aug 2012
3 answers
118 views
Essentially I want to have an "Empty Data Template" so after my custom binder runs for every row in my table I want to then check the visible count, and perform an action.

So is there an event that fires, or....?

Steve
Petur Subev
Telerik team
 answered on 15 Aug 2012
0 answers
146 views
Hello,

I am using Kendo UI Grid to display a long list of data (10000+). As one of your demos shows, I used virtualization of local data in the grid. But after i changed my datasource later, the grid would not load the rest data automatically while scrolling down. I have tried both ObservableArray and a new DataSource object, but neither works. Please help!!! 

          var newData = createRandomData(10);
            for (var i = 0; i < 10; i++) {
                source.pop();
                source.unshift(newData[i]);
            }
            var newSource = new kendo.data.DataSource({
                data: source,
                pageSize: 10
            });
            var grid = $("#grid").getKendoGrid();
            grid.dataSource = newSource;
            newSource.read();
            grid.refresh();
Wenhao
Top achievements
Rank 1
 asked on 15 Aug 2012
7 answers
235 views
Hi,

Is the validator functionality available for the mobile version too? All the examples are subject to web development and I can't get it working inside my mobile application. 

I keep getting the error 'Object has no method kendoValidator' when executing the following code on a div called login that contains the fields that I want to validate.

<div data-role="view" id="login">
        <h2>Log in</h2>
        <ul data-role="listview" data-style="inset">
            <li>
                <input type="text" style="width:60%" id="emailinput" required/>
                E-mail
            </li>
            <li>
                <input type="password" style="width:60%" id="passwordinput" required />
                Password
            </li>
        </ul>
         <a class="button" data-role="button" data-click="logIn" style="float: right; margin: 1em 1em 0 0 ">Log in</a>
    </div>

$("#login").kendoValidator({
                 messages: {
                   // defines message for the 'custom' validation rule
                   custom: "Please enter valid value for my custom rule",
                   // overrides the built-in message for required rule
                   required: "My custom required message"
                }
             });
Iliana Dyankova
Telerik team
 answered on 15 Aug 2012
1 answer
152 views
I am using combobox and need at a time to redo the ajax call that returned the results to populate the combobox. But with different parameters.

Is there any method to run again this request to update the combobox?
David A.
Top achievements
Rank 1
 answered on 15 Aug 2012
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?