Telerik Forums
Kendo UI for jQuery Forum
1 answer
250 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.8K+ 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.3K+ 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
669 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
292 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.6K+ 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
331 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
271 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
148 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
13 answers
1.5K+ views

Hello, 

We have a grid with filter row mode enabled. The filters are either drop down lists, or autocomplete fields. When the grid is first initialized, the autocompletes are initialized correctly with their list of possible suggestions based on the data present in the grid (server side filtering is not enabled). On the grid we have a button which changes the datasource url of the grid and refreshes the data : 

//change the URL of the datasource
grid.dataSource.options.transport.read.url = Worklist.buildWorklistUrl();
grid.dataSource.page(1);
grid.dataSource.read();
grid.refresh();

 

When we do this, the grid is updated and the new data set is shown like we want. However, it seems that the autocomplete filter field values are based on the old grid and don't reflect the new data. 

I've tried to refresh the autocompletes manually after refreshing the grid to get them to reflect the new values, but no luck: 

 

var inputs = grid.thead.find("tr").eq(1).find(".k-input");
 
$.each(inputs, function(idx, input) {
    var autocomplete = $(input).data("kendoAutoComplete");
    if (autocomplete) {
        autocomplete.refresh();
    }
});

Are there any suggestions about how to get those autocompletes to update when the grid contents are updated? 

 Thanks for the help

Lovelesh
Top achievements
Rank 1
 answered on 28 Jul 2017
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
Drag and Drop
Application
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?