Telerik Forums
Kendo UI for jQuery Forum
6 answers
300 views

Hello

I'm collecting user actions on day level and would like to display those in a StockChart (column mode). This works all fine in StockChart but I struggle with these questions:

  • With the scroll wheel the chart can go down to daytime that I won't display. Is it possible to restrict/block daytime display so that 'day' is the lowest possible date level? (baseUnit on "days" doesn't block daytime)
  • Is it possible to not display (hide) days in the time axis on which the user hasn't done any actions?
  • Is it possible to dynamically sum up values moving to next higher time period? Example: User has these actions amount by date (yyyymmdd):
    20190103 : 12
    20190115 : 24
    20190123 : 7
    On day view the user would see in StockChart the values 12, 24, 7. When the user scrolls into month view he should see the amount of actions in January 2019: 43

I was trying to find these options in the API documentation of StockChart but couldn't find these options. Maybe possible in combination(?).

Regards

Nikolay
Telerik team
 answered on 08 Oct 2019
4 answers
1.9K+ views
Hi,

recently I needed a kendo window with an okay and a cancel button at the bottom of the window.
The buttons should stay sticked at the bottom of the window and the content should take all of the available remaining space.
And the content should be scrollable (in case it's bigger then the window).

Here is a solution, in case someone else has the same requirement:

<div>
    <div id="window">
        <div style="height: 100%;">
            <div style="overflow: auto; height: calc(100% - 70px); padding: 10px">
                Content
            </div>
            <div style="width: 100%; height: 60px; background-color: #e3e3e3; border-top: solid #C5C5C5 1px">
                <div style="float: right; margin: 10px">
                    <button id="okayButton" style="background-color: green">Okay</button
                    <button id="cancelButton" style="background-color: red">Cancel</button>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $(document).ready(function() {
            var window = $("#window");
 
            $("#okayButton").kendoButton({
                click: function(e) {
                    window.data("kendoWindow").close();
                }
            });
 
            $("#cancelButton").kendoButton();
 
            window.kendoWindow({
                title: "Title",
                actions: [],
                modal: true,
                width: "90%",
                height: "90%"
            });
 
            window.data("kendoWindow").center();
        });
    </script>
 
    <style scoped>
        #window {
            padding: 0px;
            overflow: hidden;
        }
    </style>
</div>


A running example can be found at http://dojo.telerik.com/IjoNe.
Petar
Telerik team
 answered on 08 Oct 2019
1 answer
179 views

The PDFViewer pager is working correctly with jquery 1.12.4 and 2.2.4.  However, with jquery 3.4.1, the pager is not working.

If the scroller's top is 0 (top of the first page), you'll be able to scroll to the page #2 normallly.  Unfortunately, any page change after the first one will bring you to an incorrect offset (returning to page #1 will remain on page #2, while moving to page #3 will bring you after the end of the page #3)

Dimitar
Telerik team
 answered on 08 Oct 2019
2 answers
507 views

The PDF Viewer is freezing for a couple of seconds when you try to scroll before the beginning of the document, or after the end of the document.

Even worst, the more you try to scroll (in any direction), the longer the PDF Viewer will freezes.

Is this a bug and is there any workaround to fix this?

P.S. This is something that can be reproduced directly in telerik's demo page (version 2019.3.917).

Dimitar
Telerik team
 answered on 08 Oct 2019
3 answers
638 views

Hi, I' trying to change the format of the filter of a decimal column to Int. The column is Btch_num (it's a decimal column), when I click on the filter, it shows me decimals (when I write 33, it transforms it to 33,000). I tried to configure it with Filterable(), but It doesn't work. This is my code :

 

@(Html.Kendo().Grid<PRR405.ViewModels.BatchViewModel>(Model.LotsOuverts)
                .Name("LotsOuvert")
                .Columns(columns =>
                {
                columns.Bound(p => p.Post_date).Title(PRR405.Resources.OpenLot.OpenLot.DateDOuverture).Format("{0: yyyy/MM/dd}").Width(150).Filterable(f => f.UI("DatePickerFormated"));
                //columns.Bound(p => p.Btch_num).Title(PRR405.Resources.OpenLot.OpenLot.NumLotPRR).ClientTemplate(@"<a href='/ResumeLot/ResumeLot?btchNum=#: Btch_num #'>#: Btch_num #</a>").Width(170);
                columns.Bound(p => p.Btch_num).Title(PRR405.Resources.OpenLot.OpenLot.NumLotPRR).Format("n0").Filterable(filter => filter.Cell(c => c.Template("IntegerFilter"))).Template(o => Html.ActionLink(o.Btch_num.ToString(), "ResumeLot", "ResumeLot", new { btchNum = o.Btch_num}, null)).Width(170);
                columns.Bound(p => p.Comp_num).Title(PRR405.Resources.OpenLot.OpenLot.Assureur).Width(110);
                columns.Bound(p => p.Br_cd).Title(PRR405.Resources.OpenLot.OpenLot.SuccursaleLabel).Width(120);
                columns.Bound(p => p.Batch_cd).Title(PRR405.Resources.OpenLot.OpenLot.CodeDeLot).Width(120);
                columns.Bound(p => p.Entry_Date_Formated).Title(PRR405.Resources.OpenLot.OpenLot.DateInscription).Width(160);
                columns.Bound(p => p.Batch_type_Name).Title(PRR405.Resources.OpenLot.OpenLot.TypeDeLot).Width(140);
                columns.Bound("").Title(PRR405.Resources.OpenLot.OpenLot.ImprimerResume).Template(o => Html.ActionLink(PRR405.Resources.OpenLot.OpenLot.Imprimer, "PrintLot", "OpenLot",  new { btchNum = o.Btch_num }, null)).Filterable(false);

            //columns.Bound("").Title(PRR405.Resources.OpenLot.OpenLot.ImprimerResume).ClientTemplate(string.Format(@"<a href='/OpenLot/PrintLot?btchNum=#: Btch_num #'>{0}</a>", PRR405.Resources.OpenLot.OpenLot.Imprimer)).Filterable(false);
        })
                .Scrollable(s => s.Height("100%"))              
                .HtmlAttributes(new { style = "max-height: 333px; margin-bottom:20px;" })
                .Sortable()
                .Scrollable()
                .Filterable(f => f.Extra(false).Operators(o => o.ForString(str => str.Clear().IsEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_EstEgaleA).IsNotEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_NestPasEgaleA))))
                .Resizable(resize => resize.Columns(true))

 

 <script type="text/javascript">

        function IntegerFilter(args) {
            args.element.kendoNumericTextBox({ format: "#", decimals: 0});
        }


    </script>

 

Thank you

Tsvetomir
Telerik team
 answered on 08 Oct 2019
2 answers
145 views

I was wondering if there was a way to stop the grid from graying out on a call to a very slow API?  I noticed that if you click on the header of said grid it gets re-enabled but every call to any slow API disables the grid thus a user is not able to click on the links in the columns until the API responds.

 

Thanks,

Adam

Adam
Top achievements
Rank 1
 answered on 07 Oct 2019
1 answer
1.2K+ views

Just venturing into Kendo Spreadsheet and already hit upon a problem and I can't seem to find a solution anywhere in the documentation. I am using this demo https://demos.telerik.com/kendo-ui/spreadsheet/datasource. Simple enough to get going and hook into my own data. I can add a totals row, but I want it at the top just below the headings. I can add a new row easy enough but when the data loads it overwrites that (new) row.
How can I tell the spreadsheet to load the data at a specific row (say from row 4 onwards)?

Thanks for any help. I'll keep digging in the meantime

Petar
Telerik team
 answered on 07 Oct 2019
3 answers
936 views
Hi,

               We implemented the Kendo Ui Grid with great success in our project but faced 2 issues in the end when we implemented the export to Excel feature.

               We made 2 modification using CSS to the grid and when we export it to PDF, the changes done with CSS ( Adding conditional background color to specific row AND hiding the second Group Footer when we use aggregate function and add 2 different Group.) show up correctly BUT when we export the grid using Excel, the changes done in CSS doesn’t show up.

Here's a screenshot of our grid with the CSS applied to it :
(attached file)

Here’s a screenshot of the PDF generated with the CSS change showing :
(attached file)

Here’s a screenshot of the Excel generated from the Grid.  You can see that the color is not showing up and we see the footer twice, once for each group :
(attached file)


Here’s the code used to hide one of the footer :

<style>
       .k-group-footer {
             display: none !important;
       }

       .k-group-footer + .k-group-footer {
             display: table-row !important;
       }
</style>

And finally, here’s the code used to implement our Grid :

             @(Html.Kendo().Grid<PRR405Data.Models.MPremiumTransaction>
                    (Model.Transactions)
                    .Name("TransactionsDossierPrime")
                    .ToolBar(tools => tools.Template("<a class='k-button k-button-icontext' onclick='exportToPDF()'>" + PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TelechargerPDF + "</a><a class='k-button k-button-icontext' onclick='exportToExcel()'>" + PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TelechargerExcel + "</a>"))
                    .Pdf(pdf => pdf
                        .AllPages()
                        .AvoidLinks()
                        .Scale(0.8)
                    )
            .Excel(excel => excel
            .AllPages(true)
            .ForceProxy(false)
            .Filterable(true)

            )
                    .Columns(columns =>
                    {
                          columns.Bound(p => p.ENTR_NUM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.NoInscriptionHeader).Width(240).ClientGroupFooterTemplate(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TotalTransactionsAcceptees);
                          columns.Bound(p => p.BR_CD).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.SuccursaleHeader).Width(90);
                          columns.Bound(p => p.AGNCY_CD).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CodeAgenceHeader).Width(80);
                          columns.Bound(p => p.OCCSN_DR).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ConducteurLabel).ClientTemplate(
                                              "# if (OCCSN_DR == 0) { #" +
                                                     @PRR405.Resources.SaisirPrime.SaisirPrime.PrincipalLabel +
                                              "# } else if (OCCSN_DR == 1) { #" +
                                                     @PRR405.Resources.SaisirPrime.SaisirPrime.OccasionnelLabel +
                                              "# } else if (OCCSN_DR == 2) { #" +
                                                     @PRR405.Resources.SaisirPrime.SaisirPrime.ConfieLabel +
                                              "# } #"
                                              ).Width(80);
                          columns.Bound(p => p.TXN_CD).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CodeTransactionHeader).Width(100);
                          columns.Bound(p => p.PLCY_TYPE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.IndicateurDeDureeHeader).Width(80);
                          columns.Bound(p => p.INSUR_NAME).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.NomHeader).Width(250);
                          columns.Bound(p => p.NIV).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.NIVHeader).Width(180);
                          columns.Bound(p => p.XFER_DATE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.DebutTransactionHeader).Width(100);
                          columns.Bound(p => p.EXPIR_DATE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.FinTransactionHeader).Width(100);
                          columns.Bound(p => p.BUS_TYPE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.GenreAffaireHeader).Width(70);
                          columns.Bound(p => p.USE_TYPE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.GenreDUtilisationHeader).Width(90);
                          columns.Bound(p => p.TERR).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ZoneStatistiqueHeader).Width(90);
                          columns.Bound(p => p.DRIV_AGE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.AgeHeader).Width(60);
                          columns.Bound(p => p.DRIVING_RC).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.DossierCondRCHeader).Width(80);
                          columns.Bound(p => p.DRIVING_CL).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.DossierCondCLTRHeader).Width(80);
                          columns.Bound(p => p.RCLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.RCLimiteHeader).Width(80);
                          columns.Bound(p => p.RCPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.RCPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.RCCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.RCAnnulHeader).Width(60);
                          columns.Bound(p => p.TRLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TRFranchHeader).Width(80);
                          columns.Bound(p => p.TRPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TRPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.TRCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TRAnnulHeader).Width(60);
                          columns.Bound(p => p.CLLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CLFranchHeader).Width(80);
                          columns.Bound(p => p.CLPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CLPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.CLCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CLAnnulHeader).Width(60);
                          columns.Bound(p => p.ADLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ADFranchHeader).Width(80);
                          columns.Bound(p => p.ADPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ADPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.ADCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ADAnnulHeader).Width(60);
                          columns.Bound(p => p.RSLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.RSFranchHeader).Width(80);
                          columns.Bound(p => p.RSPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.RSPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.RSCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.RSAnnulHeader).Width(60);
                          columns.Bound(p => p.FMLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.FMLimiteHeader).Width(80);
                          columns.Bound(p => p.FMPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.FMPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.FMCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.FMAnnulHeader).Width(60);
                          columns.Bound(p => p.ITLIMI_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ITLimiteHeader).Width(60);
                          columns.Bound(p => p.ITPREM_AM).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ITPrimeHeader).Width(70).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.ITCANCL_C).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ITAnnulHeader).Width(60);
                          columns.Bound(p => p.TOT_PRE_A).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.PrimeTotaleHeader).Width(60).ClientGroupFooterTemplate("#=sum#");
                          columns.Bound(p => p.TARIF_STD).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TarifStandardHeader).Width(80);
                          columns.Bound(p => p.BTCH_CD).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CodeLotHeader).Width(80);
                          columns.Bound(p => p.BATCH_TYPE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.TypeLotHeader).Width(80);
                          columns.Bound(p => p.POST_DATE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.DateTransmissionHeader).Format("{0: yyyy-MM-dd}").Width(100);
                          columns.Bound(p => p.CYCLE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.ReleveHeader).Width(70);
                          columns.Bound(p => p.CYCLE_DATE).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.DateReleveHeader).Format("{0: yyyy-MM-dd}").Width(100);
                          columns.Bound(p => p.REJECT).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.CodeRejetHeader).Width(140);
                          columns.Bound(p => p.WARNINGS).Title(PRR405.Resources.ConsultationHistorique.ConsultationHistorique.AvertissementHeader).Width(300);

                    })
                    .Scrollable(s => s.Height("300px"))
                    .HtmlAttributes(new { style = "margin-bottom:20px;" })
                    .Sortable()
                    .Scrollable()
                    .Events(e => e.DataBound("rejectColor"))
                    //.Filterable()
                    .Resizable(resize => resize.Columns(true))
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Aggregates(aggregates =>
                    {
                          aggregates.Add(p => p.RCPREM_AM).Sum();
                          aggregates.Add(p => p.TRPREM_AM).Sum();
                          aggregates.Add(p => p.CLPREM_AM).Sum();
                          aggregates.Add(p => p.ADPREM_AM).Sum();
                          aggregates.Add(p => p.RSPREM_AM).Sum();
                          aggregates.Add(p => p.FMPREM_AM).Sum();
                          aggregates.Add(p => p.ITPREM_AM).Sum();
                          aggregates.Add(p => p.TOT_PRE_A).Sum();
                    })
                    .Group(groups => groups.Add(p => p.NIV))
                    .Group(groups => groups.Add(p => p.OCCSN_DR))
                    ))


       function rejectColor() {

             var grid = $("#TransactionsDossierPrime").data("kendoGrid");
             var data = grid.dataSource.data();
             $.each(data, function (i, row) {
                    if (row.REJECT != '') {
                          $('tr[data-uid="' + row.uid + '"] ').css("background-color", "#d9212a");
                    }
             })

       }


. . Mathieu Bédard
Développeur Full-Stack
M +1 4383330589 | T +1 5145433855
mbedard@uzinakod.com | uzinakod.com
33 rue Prince | Bureau 310 - H3C 2M7, Montréal, QC


.
Tsvetomir
Telerik team
 answered on 04 Oct 2019
2 answers
420 views

If the data source has serverPaging enabled the TreeList control doesn't create a pager. Created a dojo thing to replicate, un-comment the serverPaging data source configuration to cause the pager to stop being created. 

https://dojo.telerik.com/oTigUDef/2

Georgi
Telerik team
 answered on 04 Oct 2019
4 answers
6.8K+ views
Hi all,

I am using a date picker along with two links - one for going one day backward and one for going one day forward. Each link calls a javascript-function which updates the value of the date picker. The internal date is set correctly but the value in the textfield next to the date picker is not updated.
The error occurs both when I am using a date object [1] and a formatted date string [2] for setting the value.

Is this a bug or am I missing something?

Many thanks in advance!

[1] http://jsfiddle.net/pwhmF/
[2] http://jsfiddle.net/UG2hc/
Georgi
Telerik team
 answered on 04 Oct 2019
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?