Telerik Forums
Kendo UI for jQuery Forum
2 answers
245 views

Hi, when I add a textbox to a Kendo Window, the default browser styling of the border (and possibly other things) is no longer present.  See example below I copied from Kendo UI Dojo and run in IE11.  I'm trying to dig through styles to override, but having no luck so far.

 

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
 
        <div id="example">
          <input type="text" placeholder="test"></input>
            <div id="window">
              <input type="text" placeholder="test"></input>
                <div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
                <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
 
                <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
 
                <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
 
                <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
            </div>
 
            <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
 
            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });
 
                    var onClose = function() {
                        undo.show();
                    }
 
                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "600px",
                            title: "About Alvar Aalto",
                            actions: [
                                "Pin",
                                "Minimize",
                                "Maximize",
                                "Close"
                            ],
                            close: onClose
                        });
                    }
                });
            </script>
 
            <style>
 
                #example
                {
                    min-height:500px;
                }
 
                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }
                .armchair {
                    float: left;
                    margin: 30px 30px 120px 30px;
                    text-align: center;
                }
                .armchair img {
                    display: block;
                    margin-bottom: 10px;
                }
            </style>
        </div>
 
 
</body>
</html>

Bob
Top achievements
Rank 1
 answered on 08 May 2015
1 answer
153 views

I'm trying to use the grid with this xml. The idea on the XML is that you have a resource, which has multiple resources. Each resource has an ID and name attribute. I'd like to be able to group them and sort them. All I'm getting is a loading icon. Thanks in advance.

C

Iliana Dyankova
Telerik team
 answered on 08 May 2015
6 answers
279 views

Hi,

I'm using the slot template to show recommended events for each resource groups. My problem I am having is when I switch from one group to another the slot template just adds on to the slot template instead of replacing the existing one. Is there a way to reset the slot template each time you change the group view?

I attached images below to show the what happens when I go from Rooms to Providers, and then how Providers should look.

Thanks,

Michael
Top achievements
Rank 1
 answered on 08 May 2015
2 answers
81 views

I'm trying to access the custom download page and I'm getting a 500 error: "Oh, no! Something's not right,but we're sorting it out."

http://www.telerik.com/download/custom-download

Niki
Telerik team
 answered on 08 May 2015
3 answers
94 views

Hi,

Is it possible to highlight specific bars within a series based on a specific search condition?

I have a Bar chart  that display a number of series. This chart is loaded based on specific prompts. But, once the chart is displayed, the user may want to highlight some of the  bars which contain a specific VIN which is entered by the user within the page. There is a search VIN (Vehicle Identification #) button, which when is clicked, a request is sent to the data service which returns the matching bars indexes that we need to highlight.

The way I want ot highlight the bars that meet the search condition is not by changinging the bars colors. Instead, I want to make the borders of the highlighted bars switch from solid to dashed and in Red color.

 Is this possible to do in KendoChart?

 

Thanks.

Daniel
Telerik team
 answered on 08 May 2015
2 answers
182 views

 am using KendoTreeView control for hierarchical data. Also I need to provide ClearAll feature where all other fields in form including selections made in KendoTreeView should be cleared. So I have written something like this :

public ClearAll(): void {
        $('#myTreeView').find('input:checkbox').each(function (index,element) {
            $(element).prop('checked', false);
        });
    }

Though this clears all selected checkboxes from treeview, however after this if I check parent node again - child checkboxes does not get checked.Also this behavior (child nodes not getting checked) happens for first time only, so if I uncheck and check parent node again - child nodes will be checked.I simulated sample example for this issue :

http://dojo.telerik.com/@rahul_ec27/ALihu

 

Thanks!! Rahul

Rahul
Top achievements
Rank 1
 answered on 08 May 2015
7 answers
290 views
I asked a question on stackoverflow about binding a xml data file to a Kendo UI Menu. 

http://stackoverflow.com/questions/23998479/binding-xml-data-to-kendo-ui-menu-dynamically

I was wondering if Kendo supports binding to a xml file dynamically. If so, could you also create multiple menus with hierarchy structures?


Kiril Nikolov
Telerik team
 answered on 08 May 2015
1 answer
500 views

Hi!

in my AngularJS app I don't need all the filter features that the Kendo grid offers.

I just want a single, clean TextBox in each column header, with no buttons, dropdowns and so on.. purpose: I want to catch the KeyUp Event of the TextBoxes and trigger some server side filtering after that.

the following approach seems not to work with the latest version of Kendo UI:

http://stackoverflow.com/questions/13995365/in-kendo-ui-custom-column-filter-only-with-a-single-textbox-on-each-column-witho

any ideas?

 

thank you very much!

 

Kiril Nikolov
Telerik team
 answered on 08 May 2015
1 answer
167 views

Does anyone have a step by step example of how to use server aggregates with the kendoTreeList?  The documentation is skimpy and the examples don't work.  In my case, I'm doing lazy loads from the server with each expand.  The totals in the grid keep changing and the only way to prevent that is to have the totals come from the server or the data source before it binds.  Below is a sample.  Any help would be much appreciated.  

 

 return new kendo.data.TreeListDataSource({
        transport: {
            read: function (options) {
                var dataUrl;
                var level; // assumes that level will be hte name of the display column, and level + "ID" will be the name of the id column
                var parentId = options.data.id || null;
                        if (options.data.id == null) {
                            level = "P";
                            dataUrl = GLOBAL_WEBAPIBASEURL + "/api/Trading/GetTradeMVByGrouping?GroupBy=PositionType&StartDate=" + from + "&EndDate=" + to + "&FundId=" + GLOBAL_FUNDID + "&BUId=" + GLOBAL_BUID + "&SBUId=" + GLOBAL_SBUID;
                        } else if (options.data.id.indexOf('P') == 0) {
                            level = "D";
                            var p = options.data.id.replace('P-', '');
                            dataUrl = GLOBAL_WEBAPIBASEURL + "/api/Trading/GetTradeMVDetail?StartDate=" + from + "&EndDate=" + to + "&FundId=" + GLOBAL_FUNDID + "&BUId=" + GLOBAL_BUID + "&SBUId=" + GLOBAL_SBUID + "&PositionType=" + p;
                        }

                        //console.log('Exposure By Class ' + level);
                        //console.log(newquery);
                        $.ajax({
                            url: dataUrl,
                            dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                            success: function (result) {
                                var data = [];
                                var results;
                                var agg = [];
                                var totalBuy = 0, totalSell = 0, totalNet = 0;
                                for (var i in result) {
                                    switch (level) {
                                        case "P"://Parent
                                            data.push({ label: result[i].PositionType, entity: result[i].PositionType, id: level + "-" + result[i].PositionType, display: result[i].PositionType, parentId: parentId, hasChildren: true, level: 0 });
                                            break;
                                        case "D"://Detail
                                            data.push({ label: result[i].Inst, entity: result[i].Inst, entityId: result[i].InstId, id: level + "-" + result[i].InstId, display: result[i].Inst, parentId: parentId, hasChildren: false, level: 1 });
                                            break;
                                    }
                                    totalBuy        += parseFloat(result[i].Buy);
                                    totalSell       += parseFloat(result[i].Sell);
                                    totalNet        += parseFloat(result[i].Buy) - parseFloat(result[i].Sell);

                                    data[i].BuyGMV  = result[i].Buy;
                                    data[i].SellGMV = result[i].Sell;
                                    data[i].Net     = result[i].Buy - result[i].Sell;

                                }
                                agg = "{\"TotalBuyGMV\":{\"sum\":" + totalBuy + "}, \"TotalSellGMV\":{\"sum\":" + totalSell + "}, \"TotalNet\":{\"sum\":" + totalNet + "}}";
                                results= "{\"data\": " + JSON.stringify(data) + ", \"aggregates\": " + agg + "}";
                                // notify the data source that the request succeeded
                                options.success(JSON.parse(results));
                            },
                            error: function (result) {
                                // notify the data source that the request failed
                                options.error(result);
                            }
                        });

    },
        },
        schema: {
            data: "data",
            //aggregates: "aggregates",
            model: {
                id: "id",
            }
        },
        serverAggregates:true,
        aggregate: [
           { field: "TotalBuyGMV", aggregate: "sum" },
           { field: "TotalSellGMV", aggregate: "sum" },
           { field: "TotalNet", aggregate: "sum" }
        ],

        sort: { field: "Net", dir: "desc" }
    });

Alex Gyoshev
Telerik team
 answered on 08 May 2015
2 answers
245 views

We're using the grid with remote data and inline editing.  When we read/update data on the transports we have a complete function which then goes through and highlights specifics cells.  An example of what we send back: https://gist.github.com/anonymous/b1e52666df38a47d0650

 

We then go through the grid highlighting the specific cells based on the previouslyChangedFields like this: https://gist.github.com/anonymous/49b471c9638766e2a448

 

The problem is that when the user sorts or filters the grid, our "success" class disappears as it is redrawn.   Is there any way to listen for a sorting/filtering event?  The dataSource change event is fired before the grid is redrawn so we can't use that.  

 

Thanks,

Matt

Boyan Dimitrov
Telerik team
 answered on 07 May 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
Drag and Drop
Map
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?