Enabling autoSync on a remote dataSource creates duplicates of items...  (apologies for the formatting.  The inline code formatting widget is not good, and I cannot do a dojo example, because it depends on a remote service).   The result of clicking the button is...

 

{
"Customer": "Item 1",
"id": 1
},
{
"Customer": "Item 1",
"id": 2
},
{
"Customer": "Item 2",
"id": 3
},
{
"Customer": "Item 1",
"id": 4
},
{
"Customer": "Item 2",
"id": 5
},
{
"Customer": "Item 3",
"id": 6
}

 

 

 

$(function () {
$.ajax({
url: "http://localhost:3000/project/2"
}).then((data) => {
let dataSource = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: "http://localhost:3000/customer",
type: "GET"
},
create: {
url: "http://localhost:3000/customer",
type: "POST"
}
},
schema: {
model: {
id: "id"
}
}
});
$("#button").kendoButton({
click: (e) => {
dataSource.add({ Customer: "Item 1" });
dataSource.add({ Customer: "Item 2" });
dataSource.add({ Customer: "Item 3" });
}
})
});
});

 

 

Turning off autoSync and manually syncing the dataSource works as expected.

Hi,

 

https://dojo.telerik.com/oboSOZuz In this example, if I click on "click" button, the task gets shifted but the timeline dates doesnt change. After which, now I want to link Finish to start dependency from task1 to the sub task, I cant do it as the dot is not visible. Is there any way to handle that?

 

Thanks,

Vaishali

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?