Telerik Forums
Kendo UI for jQuery Forum
1 answer
150 views

Hi there, sorry to bother.  The demo for the Editor featuring All Tools is missing two tools: insertHtml, and pdf

https://demos.telerik.com/kendo-ui/editor/all-tools

Also, minor nitpick, the order of the tools in that demo are a little wacky in my opinion. They are not the same order as in the API documentation which are categorized and ordered with a bit more thought.

https://docs.telerik.com/kendo-ui/api/javascript/ui/editor#configuration-tools

 

Cheers.

(I also have a pull request in to add the 'tableWizard' tool to the API documentation: https://github.com/telerik/kendo-ui-core/pull/3711)

 

 

Dimitar
Telerik team
 answered on 25 Oct 2017
0 answers
150 views

Hi, 

I'm trying to add some custom functionality to the awesome tabstrip component. 

More exactly, when the user rightclicks a tab button, the tabstrip should be divided by a splitter in 2 sides (left and right) 

When the user rightclicks again a tab button, the 2 sides should merge back under a single tabstrip.  

This is what I have so far: 

http://dojo.telerik.com/ERuLAb/2

This seems to work fine in one scenario:

If I right click Tab5, then click Tab6, Tab7, Tab8 everything is perfect. 

But if I right click Tab5, then click Tab1, the right side looses its active tab content. 

So it seems that the left tabstrip is somehow referencing  the right tabstrip children unless those children were already activated. . 

Any ideas to make me understand what's going on ? 

Adrian
Top achievements
Rank 1
 asked on 25 Oct 2017
3 answers
912 views
Hi there,

My goal for this grid is support fast bulk editing of a table.  My assumption is that the users will be all keyboard oriented and looking to enter in alot of data at once.  I want to be able to edit a field and tab to the next field for editing.  It looks like when you have navigatable ,incell editing, and autosync when you leave the column with changes instead of tabing to the next column, tab doesn't go anywhere.  This pretty much kills the reason for the grid (fast keyboard editing).  

I can find one similar question but i can't figure out a solution that really works.  This approach below does sort of work in that it does refocus to the next cell.  However, there's a visible jump of focus to the first cell and the whole thing takes way too long.  Is there a way I can do this in a single event handler?  Ideally I wouldn't wait for the autosync to happen, but would immediately goto the next cell so the user can start typing there as well.

thanks,
andy

  var gridOptions = {
    edit: function(e) {
      nextCell = {
        cellIndex: e.container[0].cellIndex,
        uid: e.model.uid,
      };
      console.log("saving", nextCell);
    },
    dataBound: function(e) {
      var grid = e.sender;
      console.log("set focus to next cell", nextCell);
      var nextCellIndex = nextCell.cellIndex + 1;
      var row = grid.items().filter("tr[data-uid=" + nextCell.uid + "]");
      var cell = row.find("td:eq(" + nextCellIndex + ")");
      console.warn("setting cell: ", cell);
      //        grid.current(cell);
      grid.editCell(cell);
    }
  };

Stefan
Telerik team
 answered on 25 Oct 2017
5 answers
299 views
If i have multiple items on my calendar that have the allDayFlag set to true it only displays the last one?  Is there something I need to set to see more than one?
Nencho
Telerik team
 answered on 25 Oct 2017
1 answer
119 views

So I'm following the examples I've seen which allow me to persist the state of my grid between sessions.  i.e. if the user adds a filter, adds or removes a column from being visible, etc...  What I'd like to do is give the user a visual cue to let them know they are looking at an "altered" grid.  I.e. if they apply a filter to the grid,  leave the application, come back at a later date and don't realize the filter is still active or they are missing a column, or whatever, I would like to put a thin red border around the div containing the grid.  The problem is, I don't see a simple way to see if the grid is in "normal" (as the developer created it) or "altered" (the user has made front end modifications).  Is there something I could check to determine this?

 

Thanks,

Mike

Stefan
Telerik team
 answered on 25 Oct 2017
3 answers
809 views
If I understand numerictextbox correctly, the decimals property allows me to set how many decimal places are shown; if I understand data-attribute initialization correctly, I can set the decimals property use data-decimals="num"

I have the following numerictextbox:

               <input data-role="numerictextbox" value="15.284123" data-decimals="6" data-step="0.01"/>

I only see the value "15.28" displayed.  How can I get all 6 decimal places to be displayed
http://jsfiddle.net/raltman/W48Em/5/

Thanks.
Stefan
Telerik team
 answered on 25 Oct 2017
2 answers
159 views

Hello, i have a following kendo combobox with angular 1.5 integration. I want to open and close the combobox in my contoller.js. Can you please help me with that.

 

<select id="cmbCostCenter"
                        name="cmbCostCenter"
                        kendo-combo-box
                        class="form-control"
                        k-placeholder="'Cost Center'"
                        k-filter="'contains'"
                        k-min-length="4"
                        k-data-text-field="'costCenterDisplayName'"
                        k-data-value-field="'sapCostCenterID'"
                        k-data-source="costCenters"
                        k-on-change="costCenterOnChange(costCenterForm)"
                        k-ng-model="data.costcenters.selectedCostCenter"
                        ng-disabled="!data.appUser.pluginPermissions.isPluginAdmin"
                        ng-show="showCB"
                        style="width: 100%; background: white;"
                        required></select>

Ranjeeth
Top achievements
Rank 1
 answered on 24 Oct 2017
1 answer
823 views

Hi,

 

When I export the excel using the ooxml, I try to set the column width of all the columns. The following the the loop i used to set the width:

 

 for (var i = 0; i < sheet.columns.length; i++) {
                    if (i < 3) {
                        sheet.columns[i].width = 100;
                    } else if (i == 3) {
                        sheet.columns[i].width = 50;
                    } else {
                        sheet.columns[i].width = 25;
                    }
                }

It works perfectly for the first 2 conditions, I get 100 pixel for columns A-C and 50 pixels for column D. However, weird thing happens to the third condition. 25 indeed get set to cell but its in the excel default width unit (character) rather than in pixel. So it would be converted to 180 pixels on output excel and its way too wide for my purpose. I used the same code for another grid and that one works out perfectly. In ooxml doc, I don't see anything that allows me to change the width unit for the excel. It doesn't make any sense to me. Can anyone please tell me why? 

Tsvetina
Telerik team
 answered on 24 Oct 2017
2 answers
1.3K+ views
I am using the popup feature of kendoui grid to add/edit a record. The kendoui version that I am using is 2013.2.823. I find that whenever I click the "update" button to create/edit a record the create event is fired twice (see attached image). Any help would be much appreciated.

Soure Code:

@(Html.Kendo().Grid<GroupModel>()
           .Name("grid")
               //.HtmlAttributes(new{style="display:block"})
           .ToolBar(toolbar => toolbar.Create())
           .EnableCustomBinding(false)
           .PrefixUrlParameters(false)
           .AutoBind(true)
               //.Events(e => e.DataBound("grid_DataBound"))
           .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(true).CreateAt(GridInsertRowPosition.Top))
               //.Events(e=>e.Edit("grid_onEdit"))
           .Pageable(p => p.Enabled(true).PageSizes(new[] { 10, 20, 30 }).Refresh(true).PreviousNext(true).ButtonCount(4).Info(true).Numeric(true))
           .Navigatable(n => n.Enabled(true))
           .Resizable(r => r.Columns(true))
           .Scrollable(s => s.Height("auto"))
           .Selectable(s => s.Enabled(false).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
           //.ClientDetailTemplateId("template")
           //.RowAction(row => { })
           .Sortable(sorting =>
           {
               sorting.SortMode(GridSortMode.SingleColumn);
               sorting.Enabled(true);
           })
           .Filterable(filterable => filterable
                           .Extra(true)
                           .Operators(operators => operators
                                           .ForString(str => str.Clear()
                                                                   .StartsWith("Starts with")
                                                                   .EndsWith("Ends with")
                                                                   .Contains("Contains")
                                                                   .IsEqualTo("Is equal to"))
                                           .ForNumber(num => num.Clear()
                                                                   .IsEqualTo("Is equal to")
                                                                   .IsGreaterThan("Is greater than")
                                                                   .IsGreaterThanOrEqualTo("Is greater than or equal to")
                                                                   .IsLessThan("Is less than")
                                                                   .IsLessThanOrEqualTo("Is lesss than or equal  to"))
                                           .ForDate(date => date.Clear()
                                                                   .IsEqualTo("Is equal to")
                                                                   .IsGreaterThan("Is after")
                                                                   .IsGreaterThanOrEqualTo("Is after or equal to")
                                                                   .IsLessThan("Is before")
                                                                   .IsLessThanOrEqualTo("Is before or equal to"))
                                           ))
 
           .Columns(columns =>
               {
                   //columns.Bound(p => p.PROV_GRP_ID).Visible(false).Width(100);
                   columns.Command(command => { command.Edit(); }).Width(75);
                   columns.Bound(p => p.PROV_GRP_KEY).Visible(true).Width(50);
                   columns.Bound(p => p.GroupName).Width(150);
                   columns.Bound(p => p.ContactFirstName).Width(120);
                   columns.Bound(p => p.ContactLastName).Width(120);
                   columns.Bound(p => p.ContactTitle).Width(100);
                   columns.Bound(p => p.PhoneNumber).Width(100);
                   columns.Bound(p => p.StreetAddress1).Width(150);
                   columns.Bound(p => p.StreetAddress2).Width(100);
                   columns.Bound(p => p.City).Width(150);
                   columns.Bound(p => p.State).Width(50);
                   columns.Bound(p => p.Zip).Width(50);
                   columns.Bound(p => p.Email).Width(150);
                   columns.Bound(p => p.IsDeleted).Width(50);
                   //columns.Bound(p => p.IsDeleted).ClientTemplate("#kendo.template($('#tmplActionMenu').html())#").HeaderTemplate(p => "Action").Width(100);
               })
                  .DataSource(dataSource => dataSource
                       .Ajax()
                       .ServerOperation(true)
                       .PageSize(20)
                       .Batch(false)
                       .AutoSync(false)
                       .Events(events => events.Error("grid_dataSource_OnError"))
                       .Model(m =>
                       {
                           m.Id(p => p.PROV_GRP_KEY);
                           //m.Field(f => f.PROV_GRP_KEY).Editable(false);
                           //m.Field(f => f.IsDeleted).Editable(false);
                       })
                       .Read(read =>
                           {
                               read.Action("GetGroups", "Roster");
                               read.Type(HttpVerbs.Post);
                           })
                       .Create(create =>
                           {
                               create.Action("CreateGroup", "Roster");
                               create.Type(HttpVerbs.Post);
                           })
                       .Update(update =>
                           {
                               update.Action("UpdateGroup", "Roster");
                               update.Type(HttpVerbs.Post);
                           })
                       .Destroy(destroy =>
                           {
                               destroy.Action("DeleteGroup", "Roster");
                               destroy.Type(HttpVerbs.Post);
                           }))
             )
Stefan
Telerik team
 answered on 24 Oct 2017
9 answers
580 views
I've got a bit of a scenario, I'm loving the fact you can bind a full DataSource to a grid now, but the data-columns section of it is what's troubling me.

Currently, I have
data-columns='[{"field": "ID"}]'

in which works fine, but I'm wanting a *lot* of more intense functionality than that, in which has to be done on one line in HTML otherwise the templates break in Kendo. An example of this is just one row (I have 10):

{ field: "id", title: "Actions", template: "<span class='k-icon k-arrow-next'></span> <span class='k-icon k-delete deleteLink'></span>", width: 60, filterable: false, sortable: false },

What I was looking for was something like data-columns="source: dataColumns" but this doesn't seem to work. I'd settle for being able to do the data-columns="" code on multiple lines on my HTML document. Right now, on one line, it's completely unreadable.

I'm surprised more people aren't asking how to do this, unless I'm missing something?
Alex Hajigeorgieva
Telerik team
 answered on 24 Oct 2017
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?