Telerik Forums
Kendo UI for jQuery Forum
5 answers
142 views

How can I dynamically insert new item after/before specific item or at the beginning. The only method is add.

Menu, ContextMenu, TabStrip, PanelBar, Splitter have append, insertAfter and insertBefore methods.

Vessy
Telerik team
 answered on 19 Aug 2016
4 answers
116 views

I need to build a drawing tool which can save to a stream (possibly JSON) and load form the same stream either to display or make changes.

This scenario does not seem to be supported by the drawing API but since the Surface has a draw method, I am assuming it has an internal representation of drawing objects which can be saved and reloaded.

What would be the best approach to achieve this.

Would you have a basic dojo/fiddle available?

Jack
Top achievements
Rank 2
Iron
 answered on 18 Aug 2016
11 answers
375 views

We are trying to make our applications compliant with the Web Content Accessibility Guidelines (WCAG) (https://www.w3.org/TR/WCAG20/).  One of the requirements is that buttons have text associated with them.  

When I created a grid (markup provided below), it fails WCAG compliance because the filter buttons in the column headers do not have text associated with them.  I found a way to add the text into the span using javascript but it seems like there should be a better way.  

Then I noticed that your demo grid (http://demos.telerik.com/kendo-ui/grid/filter-menu-customization) has the text property set.  If I inspect the markup for one of the filter buttons in your demo, I see this:  

<a class="k-grid-filter" href="#" tabindex="-1"><span class="k-icon k-filter">Filter</span></a>

So my question is...how did the text property of the span get the value "Filter"?  And how can I accomplish that in my grid defined as follows:

 

 

    @(Html.Kendo().Grid<Staff.Models.Employee>()

    .Name("grdEmployees")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName).Width("9%").Title("First Name").Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
        columns.Bound(p => p.LastName).Width("9%").Title("Last Name").Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
        columns.Bound(p => p.OfficeDesc).Width("25%").Title("Office").MinScreenWidth(900).Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
        columns.Bound(p => p.WorkUnitDesc).Width("15%").Title("Work Unit").Filterable(f => f.Extra(false).Operators(o=> o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains"))).MinScreenWidth(900);
        columns.Bound(p => p.EMail).Width("18%").Title("Email").Filterable(f => f.Extra(false).Operators(o=> o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
        columns.Bound(p => p.Phone).Width("8%").Title("Phone").Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
        columns.Bound(p => p.Title).Width("16%").Title("Title").Filterable(f => f.Extra(false).Operators(o=> o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains"))).MinScreenWidth(900); 
    })
    .ClientRowTemplate(
        "<tr >" +
            "<td >#: FirstName# </td>" +
            "<td >#: LastName# </td>" +
            "<td >#: OfficeDesc #</td>" +
            "<td >#: WorkUnitDesc #</td>" +
            "<td ><a href='mailto:#: EMail #' title='Send Email' alt='Send Email' >#: EMail #</a></td>" +
            "<td style='white-space:nowrap;' >#: Phone #</td>" +
            "<td >#: Title #</td>" +
            "</tr>"
        )
    .ClientAltRowTemplate(
            @"<tr class=""alt-row"" >" +
            "<td >#: FirstName# </td>" +
            "<td >#: LastName# </td>" +
            "<td >#: OfficeDesc #</td>" +
            "<td >#: WorkUnitDesc #</td>" +
            "<td ><a href='mailto:#: EMail #'>#: EMail #</a></td>" +
            "<td style='white-space:nowrap;' >#: Phone #</td>" +
            "<td >#: Title #</td>" +
            "</tr>"
        )
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Staff_Read", "Staff"))
        .Filter(f => f.AddRange(ViewBag.filters))
    )
    )

Thanks,

 

Ray

 

Raymond
Top achievements
Rank 1
 answered on 18 Aug 2016
3 answers
548 views
I would like to let user hide columns in the grid they don't want and order columns in the grid the way they want. Right now we have the feature to hide the column in the grid(through code) but user cannot do that. Is there a way to let the user hide the column with a cancel button so that I will save that column preference data in the database to hide that column for the user when he logs in the next time and also I would like to let the user order the columns in the grid by dragging and drop. Thanks
Dimo
Telerik team
 answered on 18 Aug 2016
1 answer
262 views

Hello

I'm trying to create kendoGrid with server paging but got the folowing error:

kendo.grid.min.js:25Uncaught TypeError: Cannot read property 'deepExtend' of undefined

Code:

<div id="example">
    <div id="grid"></div>
</div>
<script type="text/javascript" language="javascript" class="init">
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "derived_roles_service.jsp"
                },
                schema: {
                    model: {
                        fields: {                                                                       
                            description: { type: "string" }
                            name: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
                   field: "name",
                   title: "name"
                },
               {
                    field: "description",
                    title: "description"
                }
            ]
        });
    });
</script>

Rosen
Telerik team
 answered on 18 Aug 2016
3 answers
131 views

I would like to turn off the scheduler's footer. I see in the documentation that you can do this through javascript init, however I would like to do it through MVVM bindings. I tried to do data-footer="false", but nothing happens. Please advise.

 

Dojo demonstrating how footer still show even with data-footer set to false: http://dojo.telerik.com/UfoXO

Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
1 answer
98 views
We would like to launch our custom event creation form from each day on the month calendar view and pass through the selected day. I have looked through the examples and been unable to find an example of how we could add a create link/image to each day to be able to launch our form. Is there any examples on how to do this?
Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
1 answer
250 views

We have created our own event creation form external to the Scheduler control. When we click save on the form we would like the event to automatically appear on the scheduler, is there a javascript function to be able to add the event or refresh the scheduler? I have read that there is an observable data option in the scheduler, would this be the mechanism?  Is there any code examples of this being used?

Finally, would this work well with the high data volume query and the OData service? 

Many thanks.

 

Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
1 answer
234 views

I'm creating a kendo-grid using grid options object like shown in the example: http://i.stack.imgur.com/EeNeb.jpg

The datasource returns all the fields including the comment (colored in orange). So each record in the table has a few constant cells (td) and another line below that starts from the second <td> until the end of the <tr>.

Is there a way to use the kendo-grid and add the additional comment line for each record ?

Thanks, 
Eddie

Rosen
Telerik team
 answered on 18 Aug 2016
8 answers
667 views
I have searched far and wide and not found anything that will help me get what I am trying to do.  I modified an example to use the grid in popup, non-batch mode and that works.  What I am missing is that I need to add a upload input to the popup dialog so that I can select a single PDF file and pass that to the MVC action.

Before I was sending the user to a create page and there I was using the usual <input type="file"> with a model object using HttpPostedFileBase to bind to the input.  That works, but I want to change all my code to use popups to create a better user experience.

The problem is that most of the examples either put the Kendo upload widget inline or the popup examples don't work with an MVC action (at least I have not been able to get it to work).

Any help would be appreciated.  A single good example is normally worth gold, enough to get one moving forward again.

Thanks.
Dimiter Madjarov
Telerik team
 answered on 18 Aug 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?