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

Hi,

Is it possible to use the MVC scheduler like a daily rostering system with locations down the left then times along the top and resources can be assigned to these locations and times?

When I look at examples, the times are always down the left and days along the top.

Thanks,

 

Ian

Ivan Danchev
Telerik team
 answered on 07 Jul 2023
0 answers
110 views

We are having an issue when a column gets filtered out via the column menu, the filtered state of the gird doesn't persist if the grid gets reloaded or user moved to another area that has the same grid.

i.e. if user filters out customer column, navigates elsewhere, comes back then the customer column will reappear.

Using v2023. 1. 117

Oudom Munint
Top achievements
Rank 1
 asked on 06 Jul 2023
1 answer
162 views

I have a form as follows where it fires validation for text box controls but not for file upload


<form id="frmItem">
    <table class="table table-bordered">
        <thead class="bg-dark text-center text-white">
            <tr>
                <th colspan="2">Add/Modify Item</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:404px;">Item ID Name</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtItemName")
                        .HtmlAttributes(new { placeholder = "Item ID Name", required = "required", validationmessage = "Enter Item ID Name" }))
                </td>
            </tr>
            <tr>
                <td>UN Number</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtUnNumber")
                        .HtmlAttributes(new { placeholder = "UN Number", required = "required", validationmessage = "Enter UN Number" }))
                </td>
            </tr>
            <tr>
                <td>Packing Instructions</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtPackingInstructions")
                        .HtmlAttributes(new { placeholder = "Packing Instructions", required = "required", validationmessage = "Enter Packing Instructions" }))
                </td>
            </tr>
            <tr>
                <td>SDS Sheet</td>
                <td>
                    @(Html.Kendo().Upload().Name("SdsSheet")
                        .Multiple(false)
                        .HtmlAttributes(new { required = "required" }))
                </td>
            </tr>
            <tr>
                <td>Cargo Only?</td>
                <td>@(Html.Kendo().CheckBox().Name("txtCargoOnly"))</td>
            </tr>
            <tr>
                <td>Example Shipment Ground (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("GroundShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Next Day Air (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("NextDayShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Freight (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("FreightShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Ground (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("GroundShipmentLimited"))</td>
            </tr>
            <tr>
                <td>Example Shipment Next Day Air (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("NextDayShipmentLimited"))</td>
            </tr>
            <tr>
                <td>Example Shipment Freight (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("FreightShipmentLimited"))</td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" type="submit">Submit</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<script>
    $(document).ready(function () {
        var validator = $("#frmItem").kendoValidator().data("kendoValidator");

        $("#frmItem").submit(function (event) {
            event.preventDefault();

            if (validator.validate()) {
                
            } else {
                
            }
        });
    });
</script>

Ivan Danchev
Telerik team
 answered on 05 Jul 2023
1 answer
138 views

Am I missing a configuration option?  I have a menu which has several levels of menus.  With "Security Trimming" enabled, root level objects get trimmed with no issues.  Parents which have their children objects "trimmed", still show up.  Example:

 


@(Html.Kendo().Menu()
                          .Name("Menu")
                          .SecurityTrimming(true)
                          .Items(items =>
                          {
                                items.Add().Text("Home").Action("Index", "Home");
                                items.Add().Text("Owners").Action("Index", "Owners");
                                items.Add().Text("Interred").Action("Index", "Interred");
                                items.Add().Text("Maintenance").Items(itm =>
                                {
                                    itm.Add().Text(@"Sections/Lots/Spaces").Action("Index", "MaintainSpaces");
                                    itm.Add().Text("Search Tags").Action("Index", "MaintainSearchTags");
                                    itm.Add().Text("Undertakers").Action("Index", "MaintainUndertakers");
                                    itm.Add().Text("Reclaim Spaces").Action("Index", "MaintainReclaimSpaces");
                                    itm.Add().Text("Research Tool").Action("Index", "MaintainResearchTool");
                                    itm.Add().Text("Headstones").Action("Index", "MaintainHeadstones");
                                });
                                items.Add().Text("Reports").Items(itm =>
                                {
                                    itm.Add().Text("Available Spaces").Action("Index", "ReportsPage");
                                });
                        })
                )

As you can see the "Maintenance" and "Reports" menu items are still visible.  An example situation would be :

A unauthorized user sees the "Home" button, and everything else should be trimmed.  While the actual actions are getting trimmed, the "Maintenance" and "Reports" menu items (with nothing in them) are still there.

Am I missing a configuration option to also remove parents?

Ivan Danchev
Telerik team
 answered on 03 Jul 2023
1 answer
308 views

Hello,
I've use kendo Grid MVC for my project and want to change the Input type when filter (in one field):

  • choose "Contains" display to input text.
  • choose "Is Equal To" display Select Option.

What i want like the below image: 

 

Have any way to config this ?

My Source Code : 

<script type="text/javascript">

    $(window).resize(function () {
        var gridElement = $("#BudgetApprovalAuditGrid"),
            newHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;

        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        });

        gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
    });

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function datePicker(args) {

        args.kendoDatePicker({
            format: "dd/MM/yyyy"
        });
    }

    function GetListDataSetNameFilter(element, fieldName) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("_GetListDataSetNameFilter", "BudgetApprovalAudit")",
                    }
                }
            },
            filter: "Contains",

            optionLabel: "-Select Value-"
        });
    }

    function GetListBudgetNameFilter(element, fieldName) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Action("_GetListBudgetNameFilter", "BudgetApprovalAudit")",
                }
            },
            filter: "Contains",

            optionLabel: "-Select Value-"
        });
    }
    function GetListApprovalStatusFilter(element, fieldName) {
        console.log("elementelementelementelementelementelementelement>>>>>>>>>>>>>>>>>>>>>>>>", element)
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("_GetListApprovalStatusFilter", "BudgetApprovalAudit")",
                    }
                }
            },
            filter: "Contains",
            optionLabel: "-Select Value-"
        });
    }
    function OnDataBoundBudgetApprovalAuditGrid(e) {
        //console.log("OnDataBoundBudgetApprovalAuditGrid",e)
        //if ($('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p').length != 0) {
        //    for (var i = 0; i < $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p').length; i++) {
        //        var tempHTML = $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[i].innerHTML
        //        //do something
        //        //tempHTML


        //        $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[0].innerHTML = tempHTML

        //    }
        //    //$('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[0].innerHTML = "Your text";
        //}
    }

</script>

 

<div style="height: calc(100vh - 220px);">
    <div style="height: 900px">
        @(Html.Kendo().Grid(Model)
        .Name(gridId)
        .HtmlAttributes(new { })
        .Columns(columns =>
            {
            columns.Bound(p => p.DatasetName).Title("Dataset Name22222222").ClientGroupHeaderTemplate("#=value#").Width(100)
                                             .Filterable(x => x.UI("GetListDataSetNameFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));

            columns.Bound(p => p.BudgetName).Title("Budget Name").Width(150).ClientGroupHeaderTemplate("#=value#")
                                            .Filterable(x => x.UI("GetListBudgetNameFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));
            
            columns.Bound(p => p.ApprovalStatus).Title("Approval Status").Width(300)
                                                .Filterable(x => x.UI("GetListApprovalStatusFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));
            
            columns.Bound(p => p.ApprovalPath).Title("Full path").Width(300);
            columns.Bound(p => p.UserName).Title("User Name").Width(150);
            columns.Bound(p => p.CompletedUserName).Title("Completed User Name").Width(150);
            columns.Bound(p => p.TimeDateString).Title("Created Date").Width(200)
                                                .Filterable(x => x.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains("Contains"))));

            columns.Bound(p => p.CompletedTimeDateString).Title("Completed Date").Width(200)
                                                .Filterable(x => x.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains("Contains"))));

            columns.Template(@<text> </text>).Title("&nbsp;");

            })
        .ToolBar(toolbar =>
        {
        toolbar.Template(@<text><a class="k-button" style="opacity:0"></a></text>);
        })
        .DataSource(ds => ds.Ajax().Read("_GetListBudgetApproval", "BudgetApprovalAudit")
        .Events(events => events.Error("error_handler"))
        ).Events(x=>x.DataBound("OnDataBoundBudgetApprovalAuditGrid"))
        .Sortable()
        .Scrollable()
        .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .IsEqualTo("Is Equal To")
                        .Contains("Contains")
                    ))
                )
        .Resizable(resize => resize.Columns(true))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)))
    </div>
</div>



Thanks

 
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 30 Jun 2023
0 answers
124 views

I have a C# ASP.NET MVC application where I populate a Kendo grid with data from an Ajax call.  I need to have one of the grid columns displayed with a dropdown list.  I also need to set the selected value of the dropdown list.

This is the code for the grid:


    @(Html.Kendo().Grid<TaxCertApp.ViewModels.ParcelViewModel>()

      .Name("DetailedParcelGrid")
      .AutoBind(true)
      .Columns(columns =>
      {
          columns.Bound(parcel => parcel.ParcelKey)
               .ClientTemplate("<button type='button' class='btn btn-taxapp btn-primary assesment-taxyear-add' id='btnAddTaxYear'><b>Add Tax Year</b></button>")
               .Title("")
               .Width(200);
          columns.Bound(parcel => parcel.ParcelKey)
                .ClientTemplate("<span class=\"assesment-parcel-edit glyphicon glyphicon-edit\" style=\"color: rgb(40, 96, 144)\"></span></a>")
                .Title("")
                .Width(30);
          columns.Bound(parcel => parcel.LotNo).Title("Lot #").Width(50);
          columns.Bound(parcel => parcel.AssembledTaxDescription).Title("Tax Description").Width(140);
          columns.Bound(parcel => parcel.SchoolDistrict).Title("School District").Width(120);
          columns.Bound(parcel => parcel.ParcelStreetNo).Title("Street Number").Width(110);
          columns.Bound(parcel => parcel.ItemNo).Title("Item").Width(50);
          columns.Bound(parcel => parcel.Class).Width(50);
          columns.Bound(parcel => parcel.ParcelStatusList)
              .Title("Parcel Status")
              .Width(150)
           //   .ClientTemplate("#=SeeList(ParcelStatusList)#");
              .EditorTemplateName("DropDownEditor");

          columns.Bound(parcel => parcel.ParcelNotes).Title("Parcel Notes");

      })
        .Scrollable()
        .HtmlAttributes(new { style = "height:550px;" })
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(n => n.CaseKey))
            .Read(read => { read.Action("GetDetailedParcelDetails", "Parcel").Data("{ CaseKey: " + @Model.CaseKey + "}"); }))
            .Events(events => events.DataBound("dataBound"))
        )

This is the code in the DropDownEditor.cshtml:


@using System.Collections
@model System.String

@(Html.Kendo().DropDownListFor(m => m)
    .BindTo((IEnumerable)ViewData["ParcelStatusList"])
    .OptionLabel("- Select Parcel Status -")
)

I included an image of the grid that gets generated. I also included an image of the console.log when the code executed the .ClientTemplate code which looks like this:


    function SeeList(parcelStatusList) {

        console.log(parcelStatusList);

        var obj = JSON.stringify(parcelStatusList);

        console.log(obj);

        return parcelStatusList;
    }

Any suggestions on what is preventing the dropdown from displaying properly?

 

Thank you.

 

 

jonathan
Top achievements
Rank 1
Iron
 asked on 28 Jun 2023
1 answer
437 views
Using the UI for ASP.NET MVC 2023.2.606 build and trying to set custom icons for the native grid excel export toolbar item (ref snippet below) - unlike the same build # for MVC CORE the .IconClass "override" setting is not respected and defaults to rendering the pure kendo .svg icon for excel.  Compare the 2 image captures of the rendered html/classes for the same defined toolbar between the ASP.NET MVC and MVC CORE builds


                       .ToolBar(t => {
                            if (PermissionHelper.HasPermissionAny(Roles.RoleAdmin))
                            {
                                t.Create().Text("Add User Role");
                            }
                            t.Excel().Text("Export to Excel").IconClass("fa-solid fa-file-excel");
                        })
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 26 Jun 2023
1 answer
110 views

Hello, I am dealing with an issue while implementing a hierarchy grid using server binding. I need to access data child in server so I can modify this data as I need. 

I.E. 

columns.Bound(pet => pet.Origen).Width(100).HtmlAttributes( new {@title = item.title});

I would need to display the tooltip I have in my model, but the problem is that "item" reffers to the father row, not the child. How can I get this done?

 

I don't know if I am using the correct approach here, any help would be appreciated.

Thanks and best regards.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 26 Jun 2023
2 answers
311 views

Hi,

 

I am trying to implement same way as ASP.NET Core PDF Export Key Features Demo | Telerik UI for ASP.NET Core

but Its exporting in client side but it's not going to controller. Don't know what mistake I am doing. Is there a way to send the pad to controller and send it to email attachment. Below is my code.


        $("#btnSubmit").on("click", function (e) {
            e.stopPropagation();
            e.preventDefault();
            var sigval = signature.value();
            $('#lblSearchError').text('');
            if (sigval === undefined || sigval === '') {
                $('#lblSearchError').text('*Signature field is required.');
            } else {
                var data = $("#submitForm").serializeArray();
                var obj = { name: 'signature', value: sigval };
                data.push(obj);

                // Convert the DOM element to a drawing using kendo.drawing.drawDOM
                kendo.drawing.drawDOM($("#mainContect"))
                .then(function (group) {
                    // Render the result as a PDF file
                    return kendo.drawing.exportPDF(group, {
                        paperSize: "auto",
                        margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                    });
                })
                .done(function (data) {
                    // Save the PDF file
                    kendo.saveAs({
                        type: 'POST',
                        dataURI: data,
                        fileName: "Provider.pdf",
                        proxyURL: '@Url.Action("Submit", "Provider")'
                    });
                });
            }
        });

I tried proxyURL AND URL none of them worked. When I clicked on submit button it's just downloading the pdf file. But it not hitting controller.

and in controller 


        [HttpPost]
        public ActionResult Submit(string contentType, string base64, string fileName)
        {
            //if (!ModelState.IsValid)
            //{
            //    data.Id = 0;
            //    return Json(data, JsonRequestBehavior.AllowGet);
            //}

            //var providerData = portalServices.saveProviderData(data);
            //    return Json(providerData, JsonRequestBehavior.AllowGet);

            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

Babu
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 23 Jun 2023
1 answer
110 views

The Value Axis isn't showing a DateTime like '5/1/2023 10:00 AM' which is the same DateTime format that the data from my stored procedure is using. I'd like the value axis to show each hour of the day.

Attached is a screenshot of the grid. Thanks!

Here's the chart's code:

 @(Html.Kendo().Chart<BatchPlantHourlyOutputViewModel>()
    .Name("chart")
    .Title("Planned Pour Delivery Times vs Actual Pour Delivery Times")
    .Legend(legend => legend
        .Visible(true)
        .Position(ChartLegendPosition.Bottom)
    )

    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetBatchPlantHourlyOutputGraph", "Production")
        .Data("PSW.UI.getSelectedInputVals(false)")))
        .Events(e => e.DataBound("PSW.Events.Graph.onBatchPlantHourlyOutputGraphDataBound"))

    .Series(series =>
    {
        series.Line(model => model.ScheduledHour)
           .Name("Scheduled Time");

        series.Line(model => model.StartTime)
            .Name("Actual Time");
    })

    .CategoryAxis(axis => axis
        .Categories(model => model.Output)
        .MajorGridLines(lines => lines.Visible(true))
    )

    .ValueAxis(axis => axis
        .Date()      
        .Labels(labels => labels.Format("{0:MM/dd/yyyy hh:mm:ss}"))
        .Line(line => line.Visible(false))
    )
    )
Anton Mironov
Telerik team
 answered on 22 Jun 2023
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
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
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?