Telerik Forums
Kendo UI for jQuery Forum
1 answer
165 views
Is it possible to restrict editability of a cell to be only through the custom editor?  I tried to disable the cell, but that causes the custom editor to not show up at all.  Is it possible to disable in cell editing, but allow custom editor editing?
Nencho
Telerik team
 answered on 31 Jul 2017
4 answers
238 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
231 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.2K+ 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
644 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
277 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
321 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
244 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
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?