Telerik Forums
UI for ASP.NET Core Forum
or
Ask question
All Questions
Unanswered
Answered
2,802 questions
1 answer
1.9K+ views
Change letters to upper case

Hey,

 

I am using kendo grid incell edit mode in my project

I want to convert the alphabets to upper case(in caps) as the users enter in the cells. As he types in the letters should automatically change in CAPS - from a to A  

Grid
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 28 Aug 2020
1 answer
2.1K+ views
make column title BOLD

Hi

I want to make the column title of kendo grid as BOLD font

please help 

Grid
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 28 Aug 2020
4 answers
197 views
Scheduler Drag and Drop from Grid Example

     Hi, does anyone have any code samples for a .Net Core scheduler that can accept a drag and drop from another control, such as a Grid?   I am upgrading an old ASP.NET app that has this same functionality using Telerik scheduler and need to keep this heavily used feature intact.   I have seen the Jquery example of this however that does not translate well into the .net Core scheduler.   

Thanks for any help

Regards

Scheduler
Ivan Danchev
Telerik team
 answered on 26 Aug 2020
11 answers
378 views
Filterable operators in grouped columns

 

Hi,

we use some grids where we have defined the filters that appear on the columns with:

.Filterable(ftb => ftb.Mode(GridFilterMode.Row)
                .Extra(true)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .Contains(String.Format(SharedLocalizer["lblGridFilterContains"].Value))
                        .StartsWith(String.Format(SharedLocalizer["lblGridFilterBeginsWith"].Value))
                        .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value)))
                    .ForNumber(num => num.Clear()
                        .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value))
                        .IsGreaterThan(String.Format(SharedLocalizer["lblGridFilterGreaterThan"].Value))
                        .IsLessThan(String.Format(SharedLocalizer["lblGridFilterLessThan"].Value))
                        )
                    .ForDate(date => date.Clear()
                        .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value))
                        .IsGreaterThan(String.Format(SharedLocalizer["lblGridFilterGreaterThan"].Value))
                        .IsLessThan(String.Format(SharedLocalizer["lblGridFilterLessThan"].Value))
                        )
                    )
            )

 

And it works great.

The problem is that when there are grouped columns it works in the "normal" columns but not in the grouped ones (it shows all the filters and not the ones we've defined).

The only way we have found to make it work in every column is to define again in the column that's grouped the filterable operator:

c.Group(group => group
            .Title(@SharedLocalizer["lblPaymentdiscountday2"].Value)
            .HeaderHtmlAttributes(new { groupname = "paymentsGrid_grp_skonto2" })            
            .Columns(skonto2 =>
            {
                skonto2.Bound(m => m.discountday_2).HtmlAttributes(new { style = "text-align: right;" }).Width(90)
                .Filterable(f => f
                    .Cell(cell => cell.Enabled(true).MinLength(100))
                    .Operators(op => op
                            .ForNumber(num => num.Clear()
                                    .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value))
                                    .IsGreaterThan(String.Format(SharedLocalizer["lblGridFilterGreaterThan"].Value))
                                    .IsLessThan(String.Format(SharedLocalizer["lblGridFilterLessThan"].Value))
                                    ))
                    );                
                skonto2.Bound(m => m.discount_2).HtmlAttributes(new { style = "text-align: right;" }).Format(@SharedLocalizer["gridColumnFormatDec"].Value).Width(100).Filterable(f => f.Cell(cell => cell.Enabled(true).MinLength(100)));
                skonto2.Bound(m => m.netday).HtmlAttributes(new { style = "text-align: right;" }).Width(90).Filterable(f => f.Cell(cell => cell.Enabled(true).MinLength(100)));

            })
        );

 

We'd like to know if there's another way to make the custom filters work in grouped columns, because we'd like to avoid writing the same code for every grouped column in the grid.

Thank you in advance.

Kind regards

Grid
Nikolay
Telerik team
 answered on 26 Aug 2020
1 answer
264 views
Get ListBox Items OnPost Event

I am new to ASP.Core. How do I get the selected items from the "selected" ListBox on the OnPost event?

 

  @(Html.Kendo().ListBox()
        .Name("optional")
        .Toolbar(toolbar =>
        {
            toolbar.Position(ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
                .TransferTo()
                .TransferFrom()
                .TransferAllTo()
                .TransferAllFrom()
                .Remove()
            );
        })
        .ConnectWith("selected")
        .DataTextField("PlayerId")
        .DataTextField("Name")
        .Draggable(true)
        .DataSource(ds => ds.Ajax()
        .Read(r => r.Url("/League/PreDraftPage?handler=Read").Data("forgeryToken"))
)
    )
        @(Html.Kendo().ListBox()
        .Name("selected")
              .Toolbar(toolbar =>
        {
            toolbar.Position(ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
          );
        })
        .DataTextField("PlayerId")
        .DataTextField("Name")
        .BindTo(Model.LeaguePreDraftList)
        .Selectable(ListBoxSelectable.Multiple)
public void OnPost()
   {
       Guid leagueId;
       List<LeaguePreDraftViewModel> listModel;
 
 
       if (ModelState.IsValid)//save the data
       {
           var name = Request.Form["selected"];
           listModel = LeaguePreDraftList;
       }
       //leagueId = new Guid(id);
       //get data from page
 
   }
    )
ListBox
Nikolay
Telerik team
 answered on 25 Aug 2020
1 answer
1.6K+ views
Kendoo grid with multiple models in view
I have a model which looks like this
public class NotificationModel
    {
        public List<TableNotificationModel> TableNotificationModel { get; set; }
        public List<WrongTableNotificationModel> WrongTableNotificationModel { get; set; }
    }

 

and I have a view with two different Kendo grids. I want to populate the first Kendo grid with the TableNotificationModel and the second grid with the WrongTableNotificationModel. 

@model ModelLayer.Models.NotificationModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{ ViewData["Title"] = "Index"; }
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script>
    window.rootUrl = '@Url.Content("~/")';
</script>
<h1>Upload index</h1>
 
 
<div>
    <h4>Upload file</h4>
    <form asp-controller="Upload" asp-action="Upload"
          enctype="multipart/form-data" method="post">
        <input type="file" name="file" />
        <button type="submit" id="btn">Upload</button>
    </form>
 
    @if (ViewBag.Message != null)
    {
<script>
        $(document).ready(function(){
            alert('@Html.Raw(ViewBag.Message)');
        });
</script>}
 
 
</div>
 
 
<div class="clearfix">
    @(Html.Kendo().Grid<Model.WrongTableNotificationModel>()
        .Name("successfullData")
        .ToolBar(tools => tools.Excel())
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .Groupable()
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_OBJECTID).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.messageOut).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
            )
    )
 
</div>
 
<div class="clearfix">
    @(Html.Kendo().Grid(Model.TableNotificationModel)
        .Name("unsuccessfullData")
        .ToolBar(tools => tools.Excel())
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .Groupable()
        .Excel(excel => excel
            .FileName("file.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Upload"))
              )
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_OBJECTID).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.messageOut).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
            )
    )
 
</div>
 
<script>
    function sendAdditional() {
        var data = JSON.parse('@Html.Raw(Json.Serialize(Model))');
 
        return {
            model: data
        }
    }
</script>

neither of these methods I tried work

@(Html.Kendo().Grid(Model.TableNotificationModel)
        .Name("successfullData")
 
@(Html.Kendo().Grid<Model.WrongTableNotificationModel>()
        .Name("unSuccessfullData")

 

Is there a way to do this? Can I show both table with different models in the same view?

Grid
Eyup
Telerik team
 answered on 24 Aug 2020
3 answers
2.0K+ views
Custom Popup Editor for Create and Edit

Hey,

I am trying to choose a different template for a popup editor depending on whether a new entry is inserted or an already existing one is modified. I am aware that I probably have to subscribe to the "beforeEdit" event of the grid and act depending on whether e.model.isNew() returns true or false.

However, I was not able to set a different template based on this decision yet. Could you please outline what the cleanest way for doing this would be?

So far my code looks similar to this:

@(Html.Kendo().Grid<Data.Promotion>()
    .Name("promotionGrid")
    .Columns(c =>
    {
        ...
        c.Command(cmd => cmd.Edit()).Width(120);
        c.Command(cmd => cmd.Destroy()).Width(120);
    })
    .Events(e =>
    {
        e.BeforeEdit("beforeEdit");
        e.Edit("edit");
    })
    .DataSource(c =>
    {
        c.Ajax()
        .Read(o => o.Url("CodeManagement?handler=Read").Data("forgeryToken"))
        ...
        .Model(m =>
        {
            m.Id("PromotionId");
            ...
        });
    })
    .ToolBar(c =>
    {
        c.Create();
    })
    .Editable(c =>
    {
        c.Mode(GridEditMode.PopUp);
        c.TemplateName("Promotion");  // using a static template right now, we want to change that
    })
)

 

Moreover, in the Edit-template, I have to constrain a DatePicker based on some model properties. However, the Model field is not set which leads to a NullReferenceException. Is there any way to set the Model field of the template to the entry that is currently being edited/created?

Thank you.

Grid
Neli
Telerik team
 answered on 21 Aug 2020
1 answer
1.6K+ views
kendo.mvc.dll
How do I get a copy of Kendo.mvc.dll for  Progress® Telerik® UI for ASP.NET Core Version 2020.2.617?  
Installer and VS Extensions
Dimitar
Telerik team
 answered on 21 Aug 2020
7 answers
199 views
Gain access to DataValueField Mvc method code behind how

I am about to plan a purchase with a  new customer again for the suite and I am using the latest demo. I was trying to get the value from the form that I placed my control in. I need to gain access in this field  .DataValueField("Id") which would be bound to the form when its posted but when I access tag item its null
  

<form asp-action="LinkToCase" asp-controller="MISObjects">
 
<div class="row">
    <div class="col-md-12">
        <div class="card card-success">
 
            <div class="card-header" style="background-color:#1e3f5a;color:white">
                <h3 class="card-title">Search and Tag</h3>
            </div>
            <div class="card-body">
 
                <div class="col-md-12">
                    <div class="input-group">
                        <select id="searchOptions" name="searchOptions" style="background-color: #1e3f5a; color: white; width: 140px; height: 45px">
                            <option selected value="1">Poi</option>
                            <option selected value="1">Vessel</option>
                        </select>
 
 
                        @(Html.Kendo().MultiColumnComboBox()
                            .Name("tagItem")
                            .DataTextField("name")
                            .DataValueField("Id")
                            .Filter("contains")
                            .FilterFields(new string[] { "name", "ContactTitle", "CompanyName", "Country" })
                            .Columns(columns =>
                            {
                                columns.Add().Field("name").Title("Contact Name").Width("200px");
                                columns.Add().Field("dob").Title("Date Of Brith").Width("200px");
 
                            })
                            .FooterTemplate("Total #: instance.dataSource.total() # items found")
                            .HtmlAttributes(new { style = "width:80%;" })
                            .Height(400)
                            .DataSource(source => source
                                .Custom()
                                .Transport(transport => transport
                                    .Read(read =>
                                    {
                                        read.Action("SearchQuery", "MISObjects")
                                            .Data("onAdditionalData");
                                    }))
                            )
                            )
                        <button class="btn-primary" value="Link To Case" style=" background-color:#1e3f5a;color:white">Link To Case</button>
 
                    </div>
                    
                    <script>
                        function onAdditionalData() {
                            return {
                                text: $("#customers").val()
                            };
                        }
                    </script>
  public IActionResult LinkToCase(int tagItem, string sesearchOptionsr) {
            Int32.TryParse(TempData.Peek("CaseId").ToString(), out int resultCaseId);
 
            POI newPoi = new POI();
            newPoi =  _context.Pois.SingleOrDefault(w => w.Id == tagItem);
 
            newPoi.MISObjectId = resultCaseId;
 
            _context.Pois.Add(newPoi);
 
            _toast.AddSuccessToastMessage(
                $"You have linked {newPoi.FirstName} {newPoi.LastName} to case {resultCaseId:d8}");
 
            return RedirectToAction("Edit", new { id = resultCaseId });
}

 

MultiColumnComboBox
Ivan Danchev
Telerik team
 answered on 20 Aug 2020
8 answers
230 views
Splitter not activating

I have a grid with a details panel.

The details panel has the following template:

<script id="SuggestionGridDetailsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Splitter()
  .Name("sug-splitter-#=SuggestionID#")
  .HtmlAttributes(new { style = "height: 500px;" })
  .Orientation(SplitterOrientation.Vertical)
  .Panes(verticalPanes =>
  {
 
 
  verticalPanes.Add()
          .HtmlAttributes(new { id = "sug-top-#=SuggestionID#" })
          .Collapsible(false)
          .Size("#if(Status == 0){#54px#}else{#100px#}#")
          .Content(@<div class="container">
                  <div class="row">
                      #if(Status == 0){#
                      <div class="col-2 offset-10 float-right">
                          @(Html.Kendo().Button()
                    .Name("DeleteSuggestionBtn-#=SuggestionID#")
                    .HtmlAttributes(new { type = "button", @class = "k-btn-danger mt-2 float-right" })
                    .Events(e => e.Click("DeleteSuggestionBtnClick"))
                    .Content("Delete").ToClientTemplate())
                      </div>
                        #} else {#
                      <div class="col-4">
                          <label>Actioned by:</label>
                          <p>#=ActionedBy#</p>
                      </div>
                      <div class="col-8">
                          <label>Comments:</label>
                          <p>#=Comments#</p>
                      </div>
                      #}#
 
                  </div>
                  </div>);
 
          verticalPanes.Add()
              .HtmlAttributes(new { id = "sug-bottom-#=SuggestionID#", @class="iv-pane-no-overflow" })
              .Resizable(false)
              .Collapsible(false);
      }).ToClientTemplate()
)
</script>

 

The grid has a DetailExpand event that will populate the bottom pane of the "sug-splitter" with a partial view from the controller using AJAX. The content all loads, but the script generated to make the splitter look like a splitter does not fire. If I copy the jQuery call into the console and run it, the splitter turns into what I am expecting.

<script>kendo.syncReady(function(){jQuery("#vertical-18b41377-7c46-4e83-b72c-84e9a6589135").kendoSplitter({"panes":[{"collapsible":false,"scrollable":false},{"collapsible":false,"resizable":false,"size":"100px"}],"orientation":"horizontal"});});</script>

 

I have loaded content with a splitter in it previously, although this was into a window, not a grid details area. 

What can I do to get the splitter to load and not just be a bunch of divs on page?

Splitter
Ivan Danchev
Telerik team
 answered on 20 Aug 2020
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
DropDownList
Chart
Editor
Scheduler
Form
TreeList
Upload
Installer and VS Extensions
Date/Time Pickers
TabStrip
Spreadsheet
ListView
MultiSelect
Menu
ComboBox
Window
Filter
PDFViewer
TreeView
Toolbar
AutoComplete
TextBox
Wizard
Button
ListBox
NumericTextBox
Checkbox
DropDownTree
Styling
FileManager
PanelBar
TileLayout
DateRangePicker
PivotGrid
Template
Timeline
Dialog
Gantt
Calendar
ImageEditor
Localization
Security
ToolTip
OrgChart
Pager
Splitter
Switch
Accessibility
Breadcrumb
Drawer
MaskedTextBox
MultiColumnComboBox
Notification
RadioGroup
ScrollView
TaskBoard
Gauge
Loader
TextArea
Popover
Card
Chat
CheckBoxGroup
ColorPicker
DateInput
Diagram
ExpansionPanel
Stepper
Barcode
Licensing
ResponsivePanel
Sortable
GridLayout
AppBar
FloatingActionButton
ProgressBar
QRCode
Captcha
Avatar
DockManager
VS Code Extension
Badge
MultiViewCalendar
Rating
Slider
ActionSheet
SkeletonContainer
ColorGradient
DropDownButton
Signature
ChipList
BottomNavigation
BulletGraph
Collapsible
RadioButton
Ripple
Sparkline
TreeMap
CircularGauge
HeatMap
PivotGridV2
FlatColorPicker
CircularProgressBar
ColorPalette
SplitButton
StackLayout
TimeDurationPicker
Chip
ToggleButton
AIPrompt
PropertyGrid
Sankey
OTPInput
ChartWizard
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
136 137
138
139 140
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how