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");
                    }
             })

       }

I am using the material theme and here is my adjusted kendo.common.css to get rid of border radius that used to be 4px but I've switched to 0px.  I'm attempting to get rid of the slanted borders in the header and footer of the card as shown in the attached image.  I just wanted a standard flush border instead of the 45 degree angle cut off.

 

What do I need to change in the CSS to get this to work right?

 

.k-card{border-radius:0px;border-width:1px;border-style:solid;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}
.k-card.k-card-flat{box-shadow:none}
.k-card-header{padding:4px 8px;border-width:0 0 1px;border-style:solid;overflow:hidden}
.k-card>.k-card-header:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-header:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-header>h1,.k-card-header>h2,.k-card-header>h3,.k-card-header>h4,.k-card-header>h5,.k-card-header>h6{margin:0}
.k-card-body{padding:8px 8px;-ms-flex:1 1 0px;flex:1 1 0}
.k-card>.k-card-body:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-body:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-body p{margin:0 0 8px}
.k-card-body>.k-last,.k-card-body>:last-child{margin-bottom:0}
.k-card-image{border:0;max-width:100%;overflow:hidden}
.k-card>.k-card-image:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-image:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-image>img{border:0;max-width:100%}
.k-card-title{margin:0 0 8px}
.k-card-subtitle{margin:0 0 8px}
.k-card-title+.k-card-subtitle{margin-top:-6px}
.k-card>.k-hr{margin:0;-ms-flex:0 0 auto;flex:0 0 auto;border-color:inherit}
.k-card-actions{padding:8px 8px;border-width:0;border-style:solid;border-color:inherit;overflow:hidden;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}
.k-card>.k-card-actions:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-actions:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card>.k-card-actions{border-top-width:1px;border-color:inherit}
.k-card-actions>.k-button.k-flat:first-child{margin-left:-8px}
.k-card-action{border-width:0;border-style:solid;border-color:inherit;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-action>.k-button{border-radius:0;padding:12px 8px;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-actions-vertical{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
.k-card-actions-vertical .k-card-action+.k-card-action{border-top-width:1px}
.k-card-actions-stretched{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}
.k-card-actions-stretched .k-card-action+.k-card-action{border-left-width:1px}
.k-card-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card+.k-card{margin-top:16px}
.k-card-deck{display:-ms-flexbox;display:flex;margin-top:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card+.k-card{margin-left:16px}
.k-card-deck-scrollwrap{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}
.k-card-deck-scrollwrap>.k-button{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto;position:absolute}
.k-card-deck-scrollwrap>.k-button:first-child{left:-1px}
.k-card-deck-scrollwrap>.k-button:last-child{right:-1px}
.k-card-deck-scrollwrap>.k-card-deck{-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-group{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card>.k-card-header{border-radius:0}
.k-card-group .k-card+.k-card{margin-left:-1px}
.k-card-group .k-card.k-first{border-bottom-left-radius:0px;border-top-left-radius:0px}
.k-card-group .k-card.k-first>.k-card-header{border-top-left-radius:0px}
.k-card-group .k-card.k-last{border-top-right-radius:0px;border-bottom-right-radius:0px}
.k-card-group .k-card.k-last>.k-card-header{border-top-right-radius:0px}
.k-card-group .k-card.k-only{border-radius:0px}
.k-card-group .k-card.k-only>.k-card-header{border-top-left-radius:0px;border-top-right-radius:0px}

I would like to reduce the height of the DDL control to match the reduced height of adjacent text input fields.

See attached picture for current behavior.

Before I start messing with CSS hacks I'd like to see if there's a cleaner way.

Hi,

I have a .net core mvc app and using Kendo UI controls on several pages. i'm wondering if there is something i can place into the js at the root of the site that can attach to a control on any of the pages to prompt if a user leaves the page without saving. Or is this something that has to be done on each page? 

Either way if it's possible would there be an example that i could see where it has been implemented?

 

Hello support.

When the calendars are visible and the first selection (start date) is made a "day-month-year" label/placeholder is displayed in the end date input field (see screenshot).

Is this text customizable? Or can it be set to not display?

Best regards

Morten

Hello support,

which is the best way to set the width of the start and end input fields of a data range picker?

Best regards

Morten

 

Hello,

I noticed in the documentation if you set checkChildren it enables tri-state check box. The problem is that we do not want to enable checkChildren.  In addition we have the possibility of showing a large tree. Possibly 100+ items, 3+ levels deep. When coming back into our edit screen to modify what was previously selected.  While collapsed we would like to be able to see a parent in it's indeterminate state if there are any children underneath it that are checked.  For example, imagine a tree like so.

Item 1

|_ Item 11

|_ Item 12

|_ Item 13

In our application we allow the user to choose 1, 11, and 13.  With checkChildren set to true.  If the user checks Item 1.  They would then have to go uncheck item 12 to get the same result.  As you can imagine.  As I mentioned before with 100+ items with 3+ levels deep and checkChildren set to true.  This could be a headache.  Here is my question.  Is it possible to have the tri-state work this way without checkChildren to indicate a child some where under the parent is checked?

Hi

I need to changes the time format displayed when resizing an event to 24 hour and add custom text that changes as the event resizes.  

Does the scheduler support this?

I have to display a table in an autocomplete and I thought of using the MultiColumnComboBox but I need the select event to be triggered only when the user selects a row from the table. However I have found that it can be triggered as selected even though no row was selected.

In order to reproduce it go to the Events page of the MultiColumnComboBox. Select an item. The event is triggered and the item is the one displayed. Now delete one character and click outside of the control for the list to close. The select is triggered with no item. Click inside the control and delete another character then click outside of the control for the list to close. The select event is triggered and instead of no item selected you received that the previous item is selected even though in the combobox control the text is not filled with the selected item.

 

Is this function as design? How can I overcome this functionality cause when a row is selected I need to execute some code and I do not want to execute that code when in fact the user did not select a row.

In dojo example here: https://dojo.telerik.com/UVuVAcoG The summary is shown as diamond just like milestone. However, in the example here: https://demos.telerik.com/kendo-ui/gantt/index if you move milestone task under any task which is not summary and has no other tasks as subtask, nothing is shown for summary task. We are having similar behaviour in our gantt. Why is the dojo example behaving different than the kendo example on the index page?