Telerik Forums
Kendo UI for jQuery Forum
2 answers
377 views

Hi,

My case is the following :

- At the top of my page I have a header

- On the rest, I have a splitter with orientation Horizontal, inside a div with width: 100%, weight: 100% )

When I move the splitter, header disappears;  but only with Chrome (It works correctly with FF & IE11 ...)

After investigations, the height calculated by the splitter is incorrect

I found a correlation with the fact that the offsetTop returned by Chrome is also incorrect

In fact, my page is not so simple as described previously : there is a lot a  nested div. And at one point, the offsetTop returns to 0

Here is the code that I have to add so that it works (sorry for the quality of the code, i'm a beginner javascript developer) :

 

var contInit = document.getElementById("Container-" + splitterId);
 var cont = contInit;
 var top = cont.offsetTop;
 var zero = false;
 while (cont.parentElement !== document.body) {
     cont = cont.parentElement;
     if (cont.offsetTop === 0) zero = true;
     else if (cont.offsetTop !== 0 && zero) {
            zero = false;
            top = top + cont.offsetTop;
     }
}
contInit.style.height = "calc( 100vh - " + top + "px )";
 var outerSplitter = $("#" + splitterId).data("kendoSplitter");
 if (outerSplitter != null)        outerSplitter.resize(true);

 

If you have a better solution, I'll take it 

 

Regards

Dimitar
Telerik team
 answered on 22 Aug 2017
1 answer
423 views

Below find my code. I am using MVVM to initate a range-slider. It appears that when the page loads, both knobs are to the left most side, instead of one at the min and one at the max. 

Please note: sometimes when the page loads, the knobs are positioned correctly. 

Please advise.

<script type="text/x-kendo-template" id="filterAgeTemplate">
        <div class="item--agerange">
            <div class="agerange-wrap">
                <div
                    data-role="rangeslider"
                    data-small-step="1"
                    data-large-step="10"
                    data-min="1"
                    data-max="100"
                    data-bind="value: ageRange, events: { change: vm_onAgeSelectorChange }" id="panel-filter__agerange" style="width:160px">
                    <input  />
                    <input />
                </div>
 
                <div class="agerange-title">Age Range</div>
            </div>
 
            <div class="agerange-btns ">
                <button class="button button__gray-outline"><span>Reset</span></button>
            </div>
        </div>
    </script>

 

Preslav
Telerik team
 answered on 22 Aug 2017
8 answers
1.4K+ views
Hi
I have a certain requirement to work with Kendo Panelbar.
I have a panelbar with around 7 items in it and the default behavior of panelbar is to click on panel to open the section. I want to block this functionality and would like to open panels with the click of my own PREV/NEXT buttons inside each panel. It is like a wizard and user should follow NEXT button clicks to keep on going to next panels instead of clicking on any panel to open it. SO I would like to restrict user to just get to the next panel following a wizard sequence.
Any idea how to do it because I dont find any way to block the user from opening up a panel by clicking on it.
I'd appreciate your help
Thanks
Rizwan
Ivan Danchev
Telerik team
 answered on 22 Aug 2017
3 answers
449 views
Hello, 
I have the same issue like THIS. Edsel Garcia helped me last time. This time I have to implement it in Kendo UI for Angular.
I saw a question in stackoverflow, but there is no activity.
The idea is that a have a grid with some data from dataService1. It has a column "Contract_id". There is a second dataService2 where the "Name" of this "Contract_id" is and I want to preview the Name in the browser. The only way to attach another [data] to the kendo-grid I found was with kendo-dropdownlist, but currently I dont need a dropdownlins.


Can you show me some example or give me some documents to read.
Dimiter Topalov
Telerik team
 answered on 22 Aug 2017
2 answers
597 views

How do I, for example, programatically call the method addRow listed here? 

http://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-methods

I can't find it explained anywhere for any of the components...

Tobias
Top achievements
Rank 1
 answered on 22 Aug 2017
1 answer
176 views

I need to have a mask in the following format: 0000.00.00 where the dot(.) should not act like a decimal placeholder, even with the clearPromptChar

setted to true and promptChar with " " value, after the field lose his focus the decimal placeholder is shown.

 

What I need:

If user types: 1234 - Expected: 1234 - Actual: 1234.  .  

If user types: 12345 - Expected: 1234.5 - Actual: 1234.5  .  

Is this feature available in mask option? it exposes any function where i should format by myself?

 

 

Stefan
Telerik team
 answered on 22 Aug 2017
2 answers
336 views

I have custom event templates in my kendo scheduler, and noticed that in the template, the data variable gives you access to the event and all its fields, and one of them is inverseColor, which lets you know if the color was inversed because the background color of the event was too light/dark. 

My issue is, when users base colors on a multi-select, where they can have multiple options selected, I manually change the event background color to the first selected option, otherwise the scheduler doesn't know what to do with multiple colors for one event. 

When I manually change the background-color, it breaks whatever is determining inverseColor in the template... So really light colors will have white font (because default color if the scheduler can't find anything to color it is gray, which I set up).

 

Is there a way to trigger inverse color on event templates so that even if I manually change the background color, it will recalculate that and change the font color accordingly?

Tyler
Top achievements
Rank 1
 answered on 21 Aug 2017
7 answers
3.2K+ views
I am attempting to use the code below to call a javascript function for each grid element, but i am having trouble rendering the required quotes to deal with the function parameters:

This code:
columns.Bound(p => p.OrderName).ClientTemplate(
    "<a onclick='showOrderDetail('#= OrderName #')' href='\\#'>#= OrderName #</a>"
).Title("Order Name").Width(150);
                                                


renders incorrectly as shown below with a mix of a double quote and single quote on the parameter

<a onclick="showOrderDetail(" OrderXYZ')'="" href="#">OrderXYZ</a>


Any ideas on how to get the proper single quotes around this variable?
Viktor Tachev
Telerik team
 answered on 21 Aug 2017
3 answers
2.2K+ views

Spreadsheet is a nice addition to the Kendo UI framework.

After running the samples and reading the documentation, I could not find a way to lock cells and prevent user changes especially to protect formulas. Frozen rows and columns do not seem to achieve the same. Take the demos and consider the invoice, would you implement it as a spreadsheet if you could not lock the ​tax rate and total?

If there is a way to lock cells, please advise, otherwise please implement before RTM. 

 

Ivan Danchev
Telerik team
 answered on 21 Aug 2017
3 answers
2.4K+ views

Hi,

I have a grid and it has filter with different filterable operators. Now when I click the filter and apply a condition, there is a server side filtering happening and results are shown.

Now when I do a second level filter on a column , I need to restrict the operator of that filterable column. To achieve this ,I need to have a event that is listening the moment I click filter,Since I am on Kendo UI v2016.1.412 , I am unable to use the callback function "filter" or "filterMenuOpen". Can someone help me as how can I register the click event of filter so that i can then add my custom filter operators.

$scope.xx = {
editable : false,
sortable : true,
pageable : {
pageSizes : 1

},
filterable : {
extra : false,
operators : {
string : {
eq : 'Equals to'
}
}
},
scrollable : false,
selectable : true,
columnMenu: true,
columns : [{
field : "xx",
title : translate("xx"),
filterable : true
filterMenuOpen:function(e){
console.log("not triggered");
},
filterMenuInit:function(e){
console.log("not triggered");
},
filter:function(e){
console.log("not triggered ");
}
}, {
field : "xx",
title : 'xx'
filterable : <My custom filter>
}

}

Karthik
Top achievements
Rank 1
 answered on 21 Aug 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?