Telerik Forums
UI for ASP.NET MVC Forum
9 answers
2.3K+ views

I've found examples how to use the kendo dropdown list as a editor in a column. Can you please provide me an example of how to use a MultiColumnComboBox as a column editor and how you would populate the MultiColumnComboBox in such a use case?

Thank you.

Ivan Danchev
Telerik team
 answered on 08 Mar 2021
1 answer
133 views

Hi,

how to find the selected cell header column name from the below example.

 

https://demos.telerik.com/aspnet-mvc/grid/multicolumnheaders

 

Marin Bratanov
Telerik team
 answered on 08 Mar 2021
6 answers
199 views

Hi ,
i want to sort values in multi checkbox filter dropdown.
here am attaching image and project code . pls find it.

 

https://drive.google.com/file/d/1BigmLzF_12b2sFzANGrGWCWaA5j4gcBT/view?usp=sharing


sandy
Top achievements
Rank 1
Iron
Veteran
 answered on 07 Mar 2021
5 answers
275 views
I have a grid containing a Start Date, an End Date, and a notes column.  For testing purposes, I added custom validation to check that the notes begins with an upper case letter, and it works just fine in all cases.  I added validation to the start date to make sure that the start date doesn't start after the end date, and vice versa for the end date.

The validation for these fields will show properly if I immediately select an invalid value.  However, if I select a valid value, and then select an invalid value, the validation message does not show.  The editor will not let me move away from the field until it is valid, so that piece is working - it just does not show the message.

I am using Kendo for MVC, with InCell editing.
 
//register custom validation rules
(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
            notesvalidation: function (input, params) {
                if (input.is("[name='Notes']") && input.val() != "") {
                    input.attr("data-notesvalidation-msg", "Notes error");
                    return /^[A-Z]/.test(input.val());
                }
 
                return true;
            },
            startdatevalidation: function (input, params) {
                if (input.is("[name='StartDate']") && input.val() != "") {
                    input.attr("data-startdatevalidation-msg", "Start Date needs to be before End Date");
                    var row = input.closest("tr");
                    var grid = $('#Grid1').data().kendoGrid;
                    var dataItem = grid.dataItem(row);
                    if (dataItem.EndDate == "")
                        return true;
                    var result = (new Date(Date.parse(input.val())) <= dataItem.EndDate)
                    return result;
                }
 
                return true;
            },
            enddatevalidation: function (input, params) {
                if (input.is("[name='EndDate']") && input.val() != "") {
                    input.attr("data-enddatevalidation-msg", "End Date needs to be after Start Date");
                    var row = input.closest("tr");
                    var grid = $('#Grid1').data().kendoGrid;
                    var dataItem = grid.dataItem(row);
                    if (dataItem.StartDate == "")
                        return true;
                    var result = (new Date(Date.parse(input.val())) >= dataItem.StartDate)
                    return result;
                }
 
                return true;
            }
        },
        messages: { //custom rules messages
            productnamevalidation: function (input) {
                // return the message text
                return input.attr("data-val-notesvalidation");
            },
            startdatevalidation: function (input) {
                // return the message text
                return input.attr("data-val-startdatevalidation");
            },
            enddatevalidation: function (input) {
                return input.attr("data-val-enddatevalidation");
            }
        }
    });
})(jQuery, kendo);

Chayanika
Top achievements
Rank 1
 answered on 05 Mar 2021
15 answers
847 views

I have a Parent Child relationship that is using a Parent Grid and Tab strip with child grids.  I can get the data to show up but my custom buttons to add / edit and delete data is not working or showing up

TIA

 

Error

TypeError: Cannot read property 'dataItem' of undefined
    at AddEditCustomerShip (https://localhost:44368/Customer:238:63)
    at HTMLAnchorElement.onclick (https://localhost:44368/Customer:1:1)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=CustomerID#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Contacts").Content(@<text>
                    @(Html.Kendo().Grid<I2MS.Models.CustomerContactViewModel>
                    ()                    
                    .Name("grid_contact#=CustomerID#")
                    .Columns(columns =>
                    {
                    columns.Bound(o => o.CustomerContactID).Hidden();
                    columns.Bound(o => o.FirstName).Width(40);
                    columns.Bound(o => o.LastName).Width(40);
                    columns.Bound(o => o.Phone).Width(40);
                    columns.Bound(o => o.Email).Width(40);
                    columns.Bound(o => o.Address).Width(40);
                    //columns.Bound(o => o.Address2).Width(200);
                    columns.Bound(e => e.City).Width(40);
                    columns.Bound(e => e.State).Width(40);
                    columns.Bound(e => e.PostalCode).Width(40);

                    columns.Template("<a title=\"Edit\" onclick=AddEditCustomerContact(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerContact(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("HierarchyBinding_CustomerContacts", "CustomerContact", new { customerID = "#=CustomerID#" }))
                    .Model(model => { model.Id(i => i.CustomerContactID); })
                    )
                    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerContact", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });
                        //toolbar.Create();
                    })
                    .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
                    .Sortable()
                    .ToClientTemplate()

                    )
                </text>
                );
                 items.Add().Text("Shipping Addresses").Content(@<text>
                    @(Html.Kendo().Grid<I2MS.Models.CustomerShipViewModel>()
                        .Name("grid_ship#=CustomerID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.CustomerShipID).Hidden();
                            columns.Bound(o => o.Name).Width(40);
                            columns.Bound(o => o.PhoneNumber).Width(40);
                            columns.Bound(o => o.Address).Width(40);
                            //columns.Bound(o => o.Address2).Width(200);
                            columns.Bound(e => e.City).Width(40);
                            columns.Bound(e => e.State).Width(40);
                            columns.Bound(e => e.PostalCode).Width(40);

                            columns.Template("<a title=\"Edit\" onclick=AddEditCustomerShip(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerShip(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(10)
                            .Read(read => read.Action("HierarchyBinding_CustomerShips", "CustomerShips", new { customerID = "#=CustomerID#" }))
                            .Model(model => { model.Id(i => i.CustomerShipID); })
                        )
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Ship").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerShip", onclick = "AddEditCustomerShip(null,#=CustomerID#)" });
                        })
                        .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
                        .Sortable()
                        .ToClientTemplate()

                        )
                </text>
                );
            })
            .ToClientTemplate())
</script>

Georgi Denchev
Telerik team
 answered on 05 Mar 2021
2 answers
412 views
I'm using a custom client template on a Kendo UI Notification control. How can I add a button in the notification and respond to it in a javascript function?
Phil
Top achievements
Rank 1
 answered on 03 Mar 2021
3 answers
742 views

I tried to use fa icons in the drawer but it did not seem to resize / pad (in mini mode) properly. So some of the text was visible.

What am I missing?

Regards

Erwin

Tsvetomir
Telerik team
 answered on 03 Mar 2021
2 answers
333 views

I have a kendo grid in an asp.net MVC application to fill a catalog. There are 2 columns on the grid: ItemName (text) and IsActive (checkbox). 

 

But every time I add or edit a new row, if I write something in the text column and then hover over any checkbox in the grid the text in the cell that I was working disappears.

 

I'm using InCell grid edit mode. To set the checkbox column I used a ClientTemplate:

columns.Bound(x => x.IsActive).Width(80).ClientTemplate("<input type='checkbox' class='GridCheckBox' name='IsActive' #=IsActive? checked='checked' : '' #/> ");

 

Is there a way to solve this?

 

Wendy
Top achievements
Rank 1
 answered on 01 Mar 2021
1 answer
1.3K+ views

Hi,

i have view with few butons. when i click button am displaying a view in pop up using kendo window.

here i have a form with 2 fields. after entering form data and submit ,in controller action i want to check whether those 2 fileds values are exists.

if exists i want to show error message with values are already exists, i not exists in database then i want to insert those values.

 

below is my code

@(Html.Kendo().Window()
                                                                .Name("AddProjectWindow")
                                                                .Modal(true)
                                                                .Width(750)
                                                                .Height(500)
                                                                .Draggable()
                                                                .Resizable()
                                                                .Title("Add New Project")
                                                                .Actions(actions => actions.Close())
                                                                .LoadContentFrom("AddProject", "Home")
                                                                .Visible(false)
)

 

this is my partial popup view

 

@model Enhancements.Models.Project

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>

<body>
    <div>
        @{
            using (Html.BeginForm("SubmitAddNewProject", "Home", FormMethod.Post, new { id = "basicUsage" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)
                <table>
                    <tr>
                        <td>Enter Project Code <label style="color:red">*</label></td>
                        <td> @Html.TextBoxFor(x => x.ProjCode)</td>
                        <td>
                            @Html.ValidationMessageFor(m => m.ProjCode, "", new { @class = "text-danger" })
                        </td>
                    </tr>
                    <tr>
                        <td>Enter Project Name <label style="color:red">*</label></td>
                        <td>  @Html.TextBoxFor(x => x.ProjectName)</td>
                        <td>
                            @Html.ValidationMessageFor(m => m.ProjectName, "", new { @class = "text-danger" })
                        </td>
                    </tr>
                </table>
                <div id="message">

                </div>
                <button type="submit" value="Submit" id="btnValidateForm">Submit</button>
            }
        }

    </div>
</body>
@Scripts.Render("~/bundles/jqueryval")


</html>

 

Aleksandar
Telerik team
 answered on 01 Mar 2021
10 answers
661 views

We bind Kendo Grid column dynamically from DB in .net MVC.While we bind that column in Kendo Grid it will give me an error in Browser Console like

"Uncaught SyntaxError: Unexpected identifier".

I have also attached screen shot for console Error and my Code to bind Kendo Grid.

Eyup
Telerik team
 answered on 01 Mar 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?