We have a couple places in our code where we are using a kendo time or datetime picker and the entry field can accept either a properly formatted date or a "relative" code we came up with.  example:  0:+1 = this hour, one minute from now.  0:0 is now.  You get the idea.  To support someone entering an actual value, two-digit numbers are considered literal.  This is a problem with these controls because they appear to be auto=formatting 0:0 to 0:00.  We have a work-around by adding a + to the front or a T to the front (we pass the result as unix time format).  However, it is desired that we don't have to do this.  Is there a way to stop the control from doing this?

Note:  I picked "timedurationpicker" as the tag because you don't seem to have the correct tag for timepicker available.

Our code:

    function parameterEditor(container, options) {
        switch (options.model.ObjectFieldTypeID) {
            case @((int)ObjectFieldType.Types.Boolean):
                boolEditor(container, options);
                break;
            case @((int)ObjectFieldType.Types.Integer):
                numericEditor(container, options, 0);
                break;
            case @((int)ObjectFieldType.Types.Double):
                numericEditor(container, options, 2);
                break;
            case @((int)ObjectFieldType.Types.DateTime):
                dateTimeEditor(container, options, "kendoDateTimePicker", "M/d/yyyy H:mm", "H:mm");
                break;
            case @((int)ObjectFieldType.Types.Date):
                dateTimeEditor(container, options, "kendoDatePicker", "M/d/yyyy");
                break;
            case @((int)ObjectFieldType.Types.Time):
                dateTimeEditor(container, options, "kendoTimePicker", "H:mm");
                break;
            default:
                stringEditor(container, options);
        }
    }

    function dateTimeEditor(container, options, type, format, timeFormat) {
        $('<input id=' + options.field + '>')
            .appendTo(container)[type]({  /* dynamically choose the type of kendoXXXPicker (code other than "format" is universal) */
                value: options.model.DefaultValue,
                format: format,
                timeFormat: timeFormat,
            })
            .data(type);
        $("#" + options.field).on("change", function () {
            options.model.set(options.field, kendo.toString($(this).val(), format) || $(this).val());
        });
    }

This example not works as expected:

https://dojo.telerik.com/ESAQEsip/2

It should only select: Red and Green.

Isn't it?

It's the same if I write the value of the input field by hand: value="Red"

Docs:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked#binding-lists-of-checkboxes-to-arrays

Many thanks

Using the demo (https://docs.telerik.com/kendo-ui/knowledge-base/timeline-using-range-bars) as a base, each has a unique ID.  I have adjusted the data in the datasource to only use two different colors.  The demo turns off the legend.  But I need a legend to indicate what the colors on my chart mean.  Turning on the legend (for both the demo and for mine) has two separate issues.

1) The legend contains a separate entry for each individual bar rather than combining them (either by category field or (prefered) the color).

2) The color in the legend doesn't match the color of the bar.

Here is the creation of my chart:

Google isn't helping me here.  I did find an article saying #2 isn't possible because the legend isn't using colorField parameter of the datasource, but that was pretty dated.

Hi,

I am new to your controls, and was wondering if there is a Grid example, or another control that enabled the user to  create something like this:

Regards,

George C. Geschwend

I have a kendo dropdown tree and when I set the datasource after initialization via .setDataSource([...]) it triggers the change event. How do I prevent this from happening? I am setting the datasource with a local javascript array of objects. I saw in another forum post to set the value to an empty array. I tried that but it still triggered the on change event. I'm doing this because I have 2 dropdowntrees (one in a flyout panel and one in the header) that I need to keep in sync.

Here is a dojo demonstrating my issue: 
https://dojo.telerik.com/iKoBOVIk/30

I'm trying to create a kendo menu that stays inside a bootstrap responsive grid. I don't want to set an explicit width, but allow users to scroll when items don't fit in the screen width.

Example: https://dojo.telerik.com/EJojofaD/6

When I try to click on a sub menu item, it closes too soon. When I remove the 'scrollable' property, clicking on child items works, but the menu overflows its containers.

How can I have a menu that stays inside a bootstrap grid column without specifying a width explicitly, and still be able to?

I have a kendo grid with custom control. Kendo Grid Export CSV is not working for me. Source code is given below. Can anyone help me.

Code running without error but CSV is not generating ( chrome).

1. kendo grid.
    .Name("PayrollReport")
    .ToolBar(toolbar =>
    {
        toolbar.Excel().HtmlAttributes(new { @class = "toolbar-field" });
        toolbar.Custom()
                        .Text("Export To CSV")
                        .HtmlAttributes(new { id = "exportCSV" });

jquerry

 

  $("#PayrollReport").on("click", "#exportCSV", function (e) {

            var batchid = $("#ddlbatchidamexrpt").data("kendoDropDownList").value();
            var status = $("#ddlpayrollstatus").data("kendoDropDownList").value();
            //debugger;
              $.ajax({
                type: "POST",
                url: "/Home/ExportServer",
                  data: JSON.stringify({ 'Batchid': batchid, 'Status': status }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //alert("Saved Successfully");
                },
                failure: function (response) {
                    //alert("Error Occured");
                }
              });
            e.preventDefault();



        }); 

Home controller

 

  [HttpPost]
        public FileContentResult ExportServer(string Batchid,string Status)
        {
            var payrollrpt = svc.GetPayrollReport(Batchid, Status);
            StringBuilder sw = new StringBuilder();          

            sw.AppendLine("\"CompanyID\",\"BatchID\",\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"");
           
            sw.Append("\n");
            foreach (var line in payrollrpt)
            {
                sw.AppendLine(string.Format("\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\",\"{7}\",\"{8}\",\"{9}\",\"{10}\",\"{11}\"",
                                           line.CompanyID,
                                           line.BatchID,
                                           line.Earning5CodeTERTaxable,
                                           line.TaxableExpense,
                                           line.Earning5CodeHotel,
                                           line.HOTELTAX,
                                           line.Earning5CodeAir,
                                           line.AIRTAXB,
                                           line.Earning5CodeOther,
                                           line.TRNSRTAX,
                                           line.Earning5CodeMeals,
                                           line.Meals ));
              
                sw.Append("\n");
            }          
           
            return File(new System.Text.UTF8Encoding().GetBytes(sw.ToString()), "text/csv", "PayrollReport.csv");          

        }

 

            

<div>
                            @(Html.Kendo().Grid<FourCSQL.ContractorPortal.Model.Custom.WorkRequest.WorkRequestModel>()
                                .Name("gridTestrequest")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.TestName).Title(ResourceManagerClass.GetResource("CarTest", languageID)).Width(200);
                                    columns.Bound(c => c.TestDescription).Title(ResourceManagerClass.GetResource("Car Description", languageID)).Width(460);
                                    columns.Bound(c => c.TestToComplete).Title(ResourceManagerClass.GetResource("Car Test to complete", languageID)).Width(150);
                                    columns.Bound(c => c.TestPriority).Title(ResourceManagerClass.GetResource("Carpriority", languageID)).Width(180);
                                    columns.Bound(c => c.TestCode).Title(ResourceManagerClass.GetResource("CarTestCode", languageID)).Width(200);
                                    columns.Bound(c => c.TestDepartment).Title(ResourceManagerClass.GetResource("Cardepartment", languageID)).Width(180);
                                    columns.Bound(c => c.TestLocation).Title(ResourceManagerClass.GetResource("CarLocation Description", languageID)).Width(240);
                                    columns.Bound(c => c.LocationDescription).Title(ResourceManagerClass.GetResource("Asset", languageID)).Width(240);
                                    columns.Bound(c => c.WorkDescription).Title(ResourceManagerClass.GetResource("Work ", languageID)).Width(180);
                                    columns.Bound(c => c.TestStatus).Title(ResourceManagerClass.GetResource("Status", languageID)).Width(180);
                                    columns.Bound(c => c.TestStore).Title(ResourceManagerClass.GetResource("Store", languageID)).Width(180).Hidden(true).Exportable(true);
                                })

            .ToolBar(toolBar =>
                        toolBar.Template("<a class='k-button k-button-icontext k-grid-excel btn btn-secondary btn-custom' style='float:right;margin-                      right:12px;color:white;' href='#'><span class='k-icon k-i-excel' style='margin-top:-1px;'></span>Export</a> "))
                .Excel(excel => excel
                .FileName("workrequest.xlsx")
                .Filterable(true).AllPages(true)
                .ProxyURL(Url.Action("AdminList", "Admin", new { @requestType = @ViewBag.RequestType }))
            )
        .Scrollable(scr => scr.Height(230))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
        .Pageable(pageable => pageable.Refresh(false).PageSizes(true).ButtonCount(1))
        .Sortable()
        .Filterable(f => f.Extra(false)
        .Operators(op => { op.ForString(str => { str.Clear().Contains("Contains"); }); })
        .Messages(m => m.Info("Items with value contains:")))
        .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("AdminList", "Admin", new { @requestType = "pending" })))
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorderable => reorderable.Columns(true))
        .Events(events => events.ColumnReorder("saveColumnReorder").ColumnResize("saveColumnSize"))
        .HtmlAttributes(new { @class="KendoGrid"})
         )

</div>

1.How We can Export the Hidden columns in Excel...?

2. In the grid has one columns values like this  the user is seeing like this (volvo, benz, Audi, BMW, I20, MG,) But When user clicks on the Excel So we want show ('30lakhs',  '1crore' , '80lakhs', '30lakhs', '50lakhs')

 

So How We can do this I have not found any link anyone can you please help me out to find for this solution.

Thanks& Regards

Hi,

I am using Treelist as a new component in my project. we have a requirement where we need to change icon of row reorder column. Could you suggest what would be the best way to do that. Please refer to the screenshot attached; circled icon needs to be replaced.

Hello

I am trying to create a kendo multi axis scatter plot in my application. Both Y axis is logarithmic and x axis is numeric. 

Chart is displaying fine but x axis display in middle of charts. I want x axis to be display at bottom instead of middle. I trieds setting display X axis crossing values but I could not able to correct this. Please let me know what's wrong in my code. 

 

 

Code 

 

div.kendoChart({
                    title: {
                        text: "J & L vs Voltage",
                        font: "bold 18px arial",
                        visible: false
                    },
                    legend: {
                        visible: false,
                        position: "custom",
                        offsetX: (500 * 0.66),
                        offsetY: (400 * 0.19),
                        item: {
                            visual: function (e) {
                                let optionfont = '7pt "Open Sans", sans-serif';
                                let color = e.options.markers.background;
                                let labelColor = e.options.markers.border.color;
                                let rect = new kendo.geometry.Rect([0, 0], [450, 50]);
                                let layout = new kendo.drawing.Layout(rect, {
                                    spacing: 5,
                                    alignItems: "left"
                                });
                                let name = e.series.dashType === "longDash" ? e.series.name + ' (R)' : e.series.name;
                                let label = new kendo.drawing.Text(name, [0, 0], {
                                    fill: {
                                        color: labelColor
                                    },
                                    font: optionfont

                                });
                                const lineWidth = 6;
                                const halfLineWidth = lineWidth / 2;
                                let grpList = [];
                                let grp = new kendo.drawing.Group();
                                const size = 6;
                                markerRect = new kendo.geometry.Rect([0, 0], [size + lineWidth, size]);
                                const geometry = new kendo.geometry.Circle([size / 2 + halfLineWidth, size / 2], size / 2);
                                marker = new kendo.drawing.Circle(geometry, {
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: 1
                                    }
                                });
                                grpList.push(marker);

                                let lineMarker = new kendo.drawing.Path({
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: e.series.dashType === "longDash" ? 2 : 1,
                                        dashType: e.series.dashType === "longDash" ? "longDash" : "solid"
                                    }
                                })
                                    .moveTo(0, markerRect.size.height / 2)
                                    .lineTo(markerRect.size.width, markerRect.size.height / 2);
                                //.moveTo(markerRect.origin.x, markerRect.origin.y + markerRect.size.height / 2)
                                //.lineTo(markerRect.origin.x + markerRect.size.width, markerRect.origin.y + markerRect.size.height / 2);

                                grp.append(lineMarker);
                                for (var item of grpList) {
                                    grp.append(item);
                                }

                                layout.append(grp, label);
                                layout.reflow();

                                return layout;

                            }
                        }
                    },
                    seriesColors: ["green", "red", "blue", "maroon", "pink", "olivegreen"],
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    dataSource: {
                        data: jvlDataForChartPreview,
                        group: "sampleId"
                      
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        xField: xFieldName,
                        yField: yFieldName,
                        yAxis: yFieldName,
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverCircleMarker
                        },
                        markers: {
                            border: {
                                width:1,
                                color: "green"
                            },
                            type: "circle",
                            visual: seriesCircleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }, {
                        xField: xFieldName,
                        yField: rightyFieldName,
                        yAxis: rightyFieldName,
                        width: 2,
                        dashType: "longDash",
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverTriangleMarker
                        },
                        markers: {
                            border: {
                                width: 2,
                                color: "red"
                            },
                            type: "circle",
                            visual: seriesTriangleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }],
                    xAxis: {
                        name:"voltage",
                        min: xScaleMin,
                        max: xScaleMax,
                        axisCrossingValues: [0.001, 10000], 
                        type: "numeric",
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}"
                            
                        },
                        title: {
                            text: "Voltage [V]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                       
                    },
                    yAxes: [{
                        name: yFieldName,
                        min: yScaleMin,
                        type: "log",
                        max: yScaleMax,
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "green"
                        },
                        title: {
                            text: "Current Density [mA/cm²]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                        
                    }, {
                        name: rightyFieldName,
                        min: rightyScaleMin,
                        type: "log",
                        max: rightyScaleMax,
                        
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "red"
                        },
                        title: {
                            text: "Luminance [cd/m²]",
                        }
                       

                    }],
                    tooltip: {
                        visible: true
                    },
                    chartArea: {
                        height: 400
                    },
                    renderAs: "canvas",
                    transitions: false
                });