Telerik Forums
Kendo UI for jQuery Forum
4 answers
154 views
Generally speaking, is it just as performant to apply formatting and validation settings cell by cell, or is it better to apply it by range? Or are they functionally the same and there wouldn't necessarily be an operational performance difference?
Veselin Tsvetanov
Telerik team
 answered on 31 Jul 2017
1 answer
196 views

When using the bottom right corner of a cell to batch copy values across a range by dragging the corner, an error popup appears if a disabled cell is found inside the range that was dragged into.  It is possible to reproduce this with this demo:

https://demos.telerik.com/kendo-ui/spreadsheet/disabled-cells

1.  Set the quantity column to disabled.

2. Select B3.

3.  Drag the bottom right corner of B3 to D3.

4.  See error: "Destination range contains disabled cells."

There should be an option to allow that to copy into any enabled cells in that range and ignore the disabled ones.

 

Second problem is that if I now do the following:

5. Click OK to dismiss the error.

6.  Click on the bottom right corner of D3 and drag to B3.

7.  Notice that C3 and D3 are both blanked out, even though C3 is supposed to be disabled.

 

Veselin Tsvetanov
Telerik team
 answered on 31 Jul 2017
16 answers
1.7K+ views

I have a problem with the datasource, when binding it to an asp.net MVC backend controlller for READ and UPDATE.

The READ function works when using the parameterMap like :

if (operation == "read") {
return options;
};

The UPDATE function, however, does NOT:

if (operation != "read" && options.models) {
return { models: kendo.stringify(options.models) };
};

When saving the grid back to the backend controller, an error occurs in kendo.all.js.

This i my Datagrid - sourcecode:

var gridDatasource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "@Url.Action("GetBudgetData","Dagsbudget")",
            dataType: "json",
            type: "POST",
            data:
            {
                butik: $("#location").data("kendoDropDownList").value(),
                budgetyear: periodeSelector.getFullYear(),
                budgetmonth: periodeSelector.getMonth() + 1
            }
        },
        update: {
            url: "@Url.Action("PutBudgetData","Dagsbudget")",
            type: "POST",
            dataType: "json",
        },
        parameterMap: function (options, operation) {
 
            if (operation != "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            };
            if (operation == "read") {
                return options;
            };
 
        },
        success: function (e) {
            alert("Get budget data success");
        },
        error: function (xhr, status, error) {
            debugger;
            alert(error);
        },
        schema: {
            model: {
                fields: {
                    location: { type: "text", ediable: false },
                    date: { type: "date", editable: false, format: "dddd, 'd.' dd-MM-yyyy" },
                    lastYear: { type: "number", editable: false },
                    budget: { type: "number", editable: true },
                    fontcolor: { type: "text", editable: false }
                }
            }
        },
        batch: true
        }
    });

My Grid definition:

$("#budgetGrid").kendoGrid({
    dataSource: gridDatasource,
    toolbar: ["save","cancel"],
    pageable: false,
    editable: "inline",
    navigatable: true,
    groupable: false,
    sortable: false,
    pageable: false,
    columns: [
        {
            field: "location",
            hidden: true
 
        },
        {
            field: "date",
            title: "Day",
            width: 180,
            template: "<span style='color:#=fontColor#'>#= kendo.toString(date, 'dddd, dd-MM-yyyy') #</span>"
        },
        {
            field: "lastYear",
            title: "Sidste Ã¥rs oms.",
            width: 80,
            format: "{0:c0}",
            attributes: { style: "text-align:right;" }
 
        },
        {
            field: "budget",
            title: "Budget",
            width: 80,
            format: "{0:c0}",
            attributes: { style: "text-align:right;", class: "budgetamount" }
        }
    ]
});

My backend controller actions:

[HttpPost]
public JsonResult GetBudgetData(string butik, int budgetyear, int budgetmonth)
{
    return Json(db.GetDailyBudget(butik, new DateTime(budgetyear, budgetmonth, 1)));
}
 
[HttpPut]
public JsonResult PutBudgetData(IEnumerable<DailyBudget> budgets)
{
    foreach (DailyBudget item in budgets)
    {
        // Do something....
    }
    return Json(null);
}

 

Either the update-routine of the grid doesn't fire or an error occurs in the kendo-all.js file...

I have tried all the tricks, tips and workarounds I can find or think of, but nothing seems to be working...

 

 

 

Martin Moesby
Top achievements
Rank 2
 answered on 31 Jul 2017
1 answer
4.1K+ views

Hello,

We were advised by Kendo support to use a kendo.ui.progress control to display on-screen during a save process (which may take 5-10 seconds), but it seems like the Progress control isn't able to display before the save process begins. In fact, it is only drawn after the save process completes, which renders it pointless.

I've mocked up an example here:

http://dojo.telerik.com/OLiGUz

It's clear from the display of the button that the delay has occurred (as it's unresponsive during this period). Additionally, if you comment out the line which hides the Progress control, and re-run it, you can see that the Progress control is only displayed after the long process has completed.

So how do we get the progress control to display before the long process begins?

We urgently require a solution to this problem, so would appreciate a recommendation ASAP.

Thanks.

Stefan
Telerik team
 answered on 31 Jul 2017
3 answers
599 views

I use the script like 'ex1' but it will very slow when the event is too much,so I want use pushDestroy to remove events from another datasource like 'ex2' but not useful

ex1:

function remove(ownerId){

var raw = $("#scheduler").data("kendoScheduler").dataSource.data();

var length = raw.length;

var item, i;

for(i=length-1; i>=0; i--){

     item = raw[i];

     if (item.ownerId==ownerId)

     { $("#scheduler").data("kendoScheduler").dataSource.remove(item); }

}

}

ex2:

 var sharableDataSource = new kendo.data.SchedulerDataSource({
            transport: {
                read: {

                    url: "/api/tasks",
                    data: { id: id }
                }
            },
            schema: {
                model: {
                    id: "TaskID",
                    fields: {
                        eventID: { from: "EventID" },
                        taskID: { from: "TaskID" },
                        title: { from: "Title", validation: { required: true } },
                        location: { from: "Location" },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID"},
                        isAllDay: { type: "boolean", from: "IsAllDay" },
                        alert: { from: "Alert", type: "object", defaultValue: "" },
                        showfor: { from: "Showfor", type: "object", defaultValue: "busy" },
                    }
                }
            }
        });

$("#scheduler").data("kendoScheduler").dataSource.pushDestroy(sharableDataSource.data().toJSON());

Veselin Tsvetanov
Telerik team
 answered on 31 Jul 2017
1 answer
228 views

I'm having issue for display listview template vertically.

<div class="mainsortable">
      
    @(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Product>()
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource =>
        {
            dataSource.Read(read => read.Action("ProductGrid_Read", "ListView"));
         
        })
       
    )

    @(Html.Kendo().Sortable()
        .For("#listView")
        .Ignore(".order")
        .Filter(">div.product")
        .Cursor("move")
        .PlaceholderHandler("placeholder")
        .HintHandler("hint")
    )

</div>

</div>

<script type="text/x-kendo-tmpl" id="template">

    <div class="product">
            <div class="panel panel-default">
                <div class="panel-heading">#=ProductID# #:ProductName#</div>
                <div class="panel-body">
                    <div class="partialsortable">

                        @(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Order>()
                        .Name("OrderlistView_#=ProductID#")
                        .TagName("div")
                        .ClientTemplateId("ordertemplate")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read => read.Action("Order_Read", "ListView", new { ProductID = "#=ProductID#" }));
                        })
                                 .ToClientTemplate()
                        )

                        @(Html.Kendo().Sortable()
                        .For("#OrderlistView_#=ProductID#")
                       .Filter(">div.order")
                        .Cursor("move")
                        .PlaceholderHandler("placeholder")
                        .HintHandler("hint")

                                 .ToClientTemplate()
                        )

                    </div>
                </div>
            </div>
        </div>

</script>

<script type="text/x-kendo-tmpl" id="ordertemplate">

    <div class="order">
        Unit Price : #:UnitPrice#<br />
        Quantity : #:Quantity#<br />
        Discount : #:Discount#
    </div>

</script>

<script>

    function placeholder(element) {
        return element.clone().addClass("placeholder");
    }

    function hint(element) {
        return element.clone().removeClass("k-state-selected");
    }
    
</script>

<style>
     .mainsortable {
        min-width: 1120px;
    }
    
     .order {
        margin: 10px;
        padding: 10px;
        border: 2px solid #000;
    }

    .panel{
        margin-left:10px;
        margin-right:10px;
        
    }

    .tabstrip{
        margin-bottom:10px;
    }

    .frame{
        padding:10px;
    }

    #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 400px;
        min-width:1120px;
    }

    .product {
        float: left;
        position: relative;
        width: 400px;
        min-height: 100px;
        cursor: default;
    }


    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

</style>

 

In css, #listView  min-width property does not working properly.I attached following the screenshot of expected listview (Expected.png) and Issued listview (Issue.png).

Stefan
Telerik team
 answered on 31 Jul 2017
4 answers
1.5K+ views

I

<div class="panel-body">
                        @(Html.Kendo().Grid<CdsAdmin.ViewModels.TravelPreferenceVM>()
                              .Name("gridTravelPreference")
                              .Columns(columns =>
                              {
                                  columns.Bound(c => c.TPF_ID).Hidden();
                                  columns.Bound(c => c.TPO_ID).Hidden();
                                  columns.Bound(c => c.TPF_NAME).Filterable(true).Width(200);
                                  columns.Bound(c => c.TPF_DESC).Filterable(false).Width(250);
                                  columns.Bound(c => c.TPF_STATUS).ClientTemplate("# if (TPF_STATUS == 1 ) {# Active #} else {# Inative #}#").Filterable(false).Width(100);
                                  columns.Bound(c => c.TPF_PREFERENCE).ClientTemplate("# if (TPF_PREFERENCE == 1 ) {# <i class='fa fa-heart'></i><i class='fa fa-heart'></i> #} " +
                                      "else if (TPF_PREFERENCE == 2 ) {# <i class='fa fa-heart'></i><i class='fa fa-heart'></i><i class='fa fa-heart'></i>  #} " +
                                      "else if (TPF_PREFERENCE == 3 ) {# <i class='fa fa-stars'></i> Exclusive  #} " +
                                      "else if (TPF_PREFERENCE == 0 ) {# Neutral #} " +
                                      "else if (TPF_PREFERENCE == -1 ) {# Hidden #} " +
                                      "else {# TPF_PREFERENCE #}#").Filterable(false).Width(200);
                                  columns.Bound(c => c.HTL_CD).Filterable(false);
                                  columns.Bound(c => c.HCH_ID).Filterable(false);
                                  columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(150);
                              })
                              .ToolBar(toolbar =>
                              {
                                  toolbar.Template(@<text>
                            <a class='k-button k-button-icontext k-grid-excel' href='#'><span class='k-icon k-i-excel'></span>Export Excel</a>
                            <a class='k-button k-button-icontext k-grid-pdf' href='#'><span class='k-icon k-i-pdf'></span>Export PDF</a>
                            <a class='k-button k-button-icontext k-grid-add' href='#'><span class='k-icon k-i-add'></span>Add</a>
                            <a class="k-button k-button-icontext" onclick="addMultiHotels()" style="width:200px;"><span class='k-icon k-i-add'></span>Add multi</a>
                                </text>);
                              })
                              .Editable(editing =>
                              {
                                  editing.Mode(GridEditMode.PopUp).TemplateName("PopupEditors/PopupTravelPreference")
                                      .Window(w => w.Title("Management preferred hotels").AutoFocus(true));
                                  editing.DisplayDeleteConfirmation("Are you sure ?");
                              })
                              .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                              .Pageable(pageable => pageable
                                           .Refresh(true)
                                           .PageSizes(false)
                                           .ButtonCount(10))
                              .Excel(excel => excel.FileName("HotelExcel.xlsx")
                                                   .Filterable(true)
                                                   .AllPages(true)
                                                   .ProxyURL(Url.Action("ExcelExport", "TravelPreference")))
                              .Pdf(pdf => pdf.AllPages()
                                             .AvoidLinks()
                                             .PaperSize("A4")
                                             .Scale(0.8)
                                             .Margin("2cm", "1cm", "1cm", "1cm")
                                             .Landscape()
                                             .RepeatHeaders()
                                             .TemplateId("pdf-template")
                                             .FileName("HotelPdf.pdf")
                                             .ProxyURL(Url.Action("PdfExport", "TravelPreference")))
                              .Scrollable()
                              .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)
                                                                  .Type(GridSelectionType.Cell))
                              .Navigatable()
                              .AllowCopy(true)
                              .Resizable(resize => resize.Columns(true))
                              .Reorderable(reorder => reorder.Columns(true))
                              .NoRecords(n => n.Template("Il n'y a pas des hôtels préféré pour cette compagnie."))
                              .HtmlAttributes(new { style = "height:650px;" })
                              .Events(events => events.Edit("onKendoGridEdit"))
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .PageSize(100)
                                  .ServerOperation(true)
                                  .Events(events => events.Error("KendoGridErrorHandler").RequestStart("onRequestStart").RequestEnd("onRequestEnd"))
                                  .Model(model =>
                                  {
                                      model.Id(p => p.TPF_ID);
                                      model.Field(p => p.TPF_ID).Editable(false);
                                      model.Field(p => p.HOTEL).Editable(false);
                                  })
                                  .Create(update => update.Action("Create", "TravelPreference"))
                                  .Read(read => read.Action("Read", "TravelPreference").Data("additionalInfo"))
                                  .Update(update => update.Action("Update", "TravelPreference"))
                                  .Destroy(update => update.Action("Destroy", "TravelPreference"))
                              ))
                    </div>

My controller

   [HttpPost]

        public ActionResult ExcelExport(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);
            return File(fileContents, contentType, fileName);
        }

 

My js 

function additionalInfo() {
    return {
        companyId: CmpId
    }
}

Stefan
Telerik team
 answered on 31 Jul 2017
3 answers
294 views
Hi,
When trying to scroll in my tablet (IE10) when kendo chart is in focus (the swipe occurs on the chart) nothing really happens.
Looks like the chart does not bubble up the swipe event and the page is not being scrolled.
How can I fix that ?
Thx
Sagi
btw, in chrome the scoop  behavior is just fine.
IT Dept
Top achievements
Rank 1
 answered on 28 Jul 2017
3 answers
206 views

When you have selectable on and can click and highlight and select time cells in the scheduler, you can use the arrow keys to move that selection and shift + arrow keys to increase your selected slots.

If you user the right or left arrow keys and move to the last day of the view, then press over again, it will move to the next date range for that view, but will not fire a navigate event, only a change event that I could see.

This is with 1.118 I believe.

Has this been fixed, or is there someway to detect when navigation has occurred with this shortcut?

Ivan Danchev
Telerik team
 answered on 28 Jul 2017
2 answers
108 views

What is the difference between the following theme files in 2017.2? kendo.mobile.nova.min.css and kendo.nova.mobile.min.css

<link rel="stylesheet" href="../inc/kendoui/styles/kendo.common-nova.min.css"/>
 <link rel="stylesheet" href="../inc/kendoui/styles/kendo.nova.min.css"/>
 <link rel="stylesheet" href="../inc/kendoui/styles/kendo.mobile.nova.min.css"/>

 

I've included the nova desktop theme because I'm making usage of the kendoDropDownList and wanted it styled.

Joel
Top achievements
Rank 1
 answered on 28 Jul 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?