Telerik Forums
UI for ASP.NET MVC Forum
1 answer
340 views

I am trying to modify an existing grid control and replace the editor for one of the columns with custom HTML. Currently, the column displays time and we use a combobox as the editor. To make this somewhat usable, we populate the combobox with times in 15-minute increments rather than 1-minute. I want to replace the combobox with a time-picker but unfortunately we are tied to an old version of the Telerik library that doesn't support the modern component type. Instead, I would like to use the HTML5 picker. How do I accomplish that using the editor template property?

Btw, I am very much a novice with regards to this UI framework so my question might have been answered in the documentation somewhere but I haven't been able to find it so my apologies if that's the case.

Ivan Danchev
Telerik team
 answered on 29 Jul 2021
1 answer
96 views

Hi Team ,

Persist collapsed state of grouped records in kendo mvc grid on  edit / update /cancel buttons.

could you please provide the sample for the same.

 

Thanks & Regards,

Purnima

 
Ivan Danchev
Telerik team
 answered on 29 Jul 2021
1 answer
135 views

Hi Team,

 

I need to show my list items separated by line so is it possible to have grid lines ?

Please provide the sample for custom messages as well.

 

 

Thanks & Regards,

sp.

Anton Mironov
Telerik team
 answered on 29 Jul 2021
1 answer
114 views

Hi,

I am using Telerik spreadsheet in my web page. I have set the toolbar option to false as it was not needed for my use. When I tried the keyboard short cuts Ctrl + b and Ctrl + i the page console shows an error. I don't know if this creates any issues in the spreadsheet. I tried the same in the Telerik demo with toolbar option set to false and the console shows error in that too. I have attached the screenshot of demo in which I checked. Please take a look at this error as I don't know if it creates any further issues in the spreadsheet.

Ivan Danchev
Telerik team
 answered on 28 Jul 2021
1 answer
262 views

Hi,

I am using Telerik spreadsheet in my web page and I am using the deleteRow and insertRow methods on a button click to programmatically delete and insert rows in spreadsheet. When I click the button the rows are successfully added and removed, but on Ctrl + z these actions are not undone. Is there any way to consider this actions on undoing?

Anton Mironov
Telerik team
 answered on 28 Jul 2021
0 answers
521 views

I am using Kendo version 2020.1.114.545

In inline edit mode, when I am adding a new record, its creating duplicates.

Here is my controller code

public ActionResult Employee_Create([DataSourceRequest]DataSourceRequest request, Employee employee)
        {
            repository.CreateEmployee(employee.Name, employee.NetworkID, employee.SeniorityDate, employee.ApplicationDate, employee.Shift);
            return Json(new[] { employee }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

 

And the razor view

@(Html.Kendo().Grid<PCOSAWeb.Models.Employee>()

                        .Name("EmployeeGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Name).Width(300);
                            columns.Bound(p => p.NetworkID).Width(100);
                            columns.Bound(p => p.SeniorityDate).ClientTemplate("#= SeniorityDate ? kendo.toString(kendo.parseDate(SeniorityDate), 'MM/dd/yyyy') : '' #").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(200);
                            columns.Bound(p => p.ApplicationDate).ClientTemplate("#= ApplicationDate ? kendo.toString(kendo.parseDate(ApplicationDate), 'MM/dd/yyyy') : '' #").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(200);
                            columns.Bound(p => p.Shift).Width(150);
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                        })
                        .ToolBar(toolbar => toolbar.Create())
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .Pageable(a => a.PageSizes(new int[] { 50, 100 }))
                        .Sortable()
                        .Scrollable()
                        .HtmlAttributes(new { style = "height:700px;" })
                        .Events(events => events.DataBound("onDataBound")
                        )
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(100)
                .Model(model => model.Id(p => p.EmployeeID))
                .Read(read => read.Action("Employees_Read", "Admin"))
                .Update(update => update.Action("Employees_Update", "Admin"))
                .Destroy(destroy => destroy.Action("Employee_Delete", "Admin"))
                .Create(create => create.Action("Employee_Create", "Admin"))
        )
    )

 

Is this a bug? In stackoverflow, someone suggested to return entire record. I am already doing that in the controller.

Please suggest a resolution. Thank you.

 

StuartLittle
Top achievements
Rank 1
 asked on 28 Jul 2021
6 answers
675 views

Good morning,

I'm currently trying to get my donut charts to look flat with a bootstrap theme through the use of the kendo widget.  I've been taking a look at your documentation and came across the following property, and was hoping that it would be as simple as adding this to the end of the series object in the mvc widget ".Overlay.Gradient("none")"

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.overlay

But to no avail, there is no such property, not according to the syntax highlighting, and it doesn't work when I try brute forcing the thing.  So I was wondering how to go about this using the syntax below.

@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title("Chart Data")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .Series(series =>
    {
        series.Donut(
            model => model.Value,  // The data to use
            model => model.Category, // The category Name
            model => model.Color, // The color to use for the category
            null // How far out the donut section should pop out
        ).Padding(10)
        .Overlay.Gradient("none")
        ;
        //.Labels(labels => labels
        //    .Visible(true)
        //    .Position(ChartPieLabelsPosition.OutsideEnd)
        //    .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
        //    .Background("transparent")
        //);
    })
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= category # - #= kendo.format('{0:P}', percentage) #")
    )
)

 

ITsolution
Top achievements
Rank 1
Iron
 answered on 27 Jul 2021
0 answers
348 views

Can you please guide me or show me how I can use the #displayFilters to be used with a header and footer and the footer continuing the page numbering. Currently the header and footer only displays with the grid pages and then it does a page-break with the filters with no styling. I’ve tried adding the styling but I don’t get the results I’m looking for. 
 

Another solution could be that it appends the displayFilters just after the grid without the page-break. 
below is my code for exporting: 
 
var grid = $("#grid").data("kendoGrid"); 

var root = new kendo.drawing.Group(); 

   
kendo.drawing.drawDOM($("#displayFilters")) 

.done(function (displayFilters){ 

               grid._drawPDF(progress) 

                    .then(function (root) { 

           

                        root.children.push(displayFilters); 

                        return kendo.drawing.exportPDF(root, { 

                            multiPage: true, 

                            allPages: true, 

                            avoidLinks: true, 

                       margin: { top: "3cm", left: "1cm", right: "1cm", bottom: "1cm" }, 

                            landscape: true, 

                            template: $("#page-template").html() 

                        }); 

                    }) 

                    .done(function (dataURI) { 

                        kendo.saveAs({ 

                            dataURI: dataURI, 

                            fileName: reportModel.Report.ReportName + ".pdf" 

                        }); 

                        progress.resolve(); 

                    }); 

            }); 
 
Here is my template:  

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

 

        <div class="page-template"> 

 

          <div class="header"> 

            <div style="float: left; width:33%;"><img src="./Content/Images/SB Logo.png" /></div> 

            <div id="reportName" style="width: 33%; height:100px; text-align:center; color: black; font-size:30px;vertical-align:middle;display:inline-block;padding-top:20px;">@ViewBag.Report.ReportName</div> 

            <div id="currentDate" style="float:right;width:33%; text-align:right; color: black; font-size:30px;padding-top:36px;display:inline-block;">23/07/2021</div> 

          </div> 

 

 

          <div class="footer" > 

            Page #: pageNum # 

          </div> 

 

        </div> 

</script>

Nolan
Top achievements
Rank 1
 asked on 26 Jul 2021
2 answers
296 views

Hello, I'm looking at the Stepper component e.g. (from a Telerik code sample and can't seem to find choices for icons.

I have looked at the documentation which points to web fonts but they don't seem right as I pasted in one or two of the icon names and get a blank step.

Thanks for any insight where to find a list of icon names to use in the Stepper.
@(Html.Kendo().Stepper()
        .Name("stepper")
        .Orientation(StepperOrientationType.Horizontal)
        .Label(Model.Label)
        .Indicator(Model.Indicator)
        .Steps(s =>
        {
        
            s.Add().Label("Begin").Icon("home");
            s.Add().Label("Second").Icon("attachment").Error(true);
            s.Add().Label("Third").Selected(true);
            s.Add().Label("Fourth").Icon("user");
            s.Add().Label("111");
            s.Add().Label("Done").Icon("save");
        })
    )

 

 

Karen
Top achievements
Rank 2
Iron
 answered on 23 Jul 2021
2 answers
160 views

Hi, I've got 2 dropdownlist dd1 and dd2. I need this functionality:

 

  1. First, both dd are enabled, each of them load all its items
  2. If user select value in dd1, we need to load in cascade dd2 with the corresponding values

Is this possible with the cascade functionality of the telerik dropdownlist?

 

Best regards.

PELAYO
Top achievements
Rank 1
Iron
 answered on 23 Jul 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?