Telerik Forums
UI for ASP.NET Core Forum
1 answer
283 views

Hello,

When the edit mode is used for other controls, we are given the option to select a template that resides inside of the ~/Views/Shared/EditorTemplates/ folder.I would like to be able to select a template that would be used to display each of the records for this control as well instead of relying on .ClientTemplateId(). Is this currently possible?

For instance, I would like to be able to select the template located at ~/Views/Shared/Templates/ChannelCard.cshtml by doing the following:

@(Html.Kendo().ListView<NotificationSystem.Data.Models.ChannelCard>()
          .Name("channels")
          .TagName("ul")
          .TemplateName("ChannelCard")
          .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("Read", "Channels").Data("bindSearch"))
              .PageSize(20)
          )
          .Pageable()
          .HtmlAttributes(new {@class = "channel-list"})
          .Deferred()
          )
Georgi
Telerik team
 answered on 01 Apr 2019
1 answer
172 views

I am working with AutoComplete in a grid cell. I need the dropdown display for the filter to be different than the value that populates the field once a value is selected. The stored procedure that returns the values to be searched/filtered combines several fields so the users can filter several fields at once. However, I don't want the final selected value displayed to be that field but another shortened field. In my example, the filtering is done on a combination of "ProjectNumber" and "ProjectName" while the final selected value displayed should only be the ProjectNumber.

This isn't an issue once the user presses the Bulk Save button on the grid as the read returns only the ProjectNumber for the grid field but I need to display only the ProjectNumber once an autocomplete value is selected.

@(Html.Kendo().AutoComplete()
        .Name("")
        .Filter(FilterType.Contains)
        .DataTextField("ProjectLookup")
        .Value("ProjectKey")
        .ValuePrimitive(true)
        .Placeholder("Select...")
        .Template("#= ProjectNumber # | #= ProjectName #")
        .AutoWidth(true)
        .MinLength(1)
        .DataSource(dataSource =>
        {
            dataSource.Ajax();
            dataSource.Read(read =>
            {
                read.Action("ProjectAutoComplete_Read", "Timecard").Data("projectAutoCompleteRead");
            })
            .ServerFiltering(false);
        })
        .Events(events => events
            .Select("projectAutoComplete_OnSelect")
            .Filtering("projectAutoComplete_OnFiltering")
            .Change("projectAutoComplete_OnChange")
        )
)

 

 

Misho
Telerik team
 answered on 01 Apr 2019
10 answers
1.5K+ views

I've just set up a grid using ASP.NET core, and the controller method to return data is called, but no data is displayed by the grid. Looking at the JSON returned  in Fiddler, it seems the field name cases have been changed by the serializer to be camel case, with the first letter always being lower case.

 

As the field names of the table are uppercase, this means they aren't being picked up by the grid. The only other option is to serialize as snake case, which doesn't help.

How can this be handled?

Viktor Tachev
Telerik team
 answered on 01 Apr 2019
4 answers
972 views

Hi guys,

I've got a view model that implements IValidatableObject for some DateTime fields that are used with the DateTimePicker. If the validation fails in the Validate method for the DateTime fields they return the error but after fixing the issue (for example DateTime cannot be in the past) the view model and control continues to use a empty/default DateTime value (1-1-1901 12:00 AM) and there's no way to get the model back to a valid state. 

The attached image is the form at start. The two DateTime fields are set to the current time. One you submit the form the Validate method kicks in and recognizes the date in the past and throws back the error message. The second image shows the error message in the form. The third image shows the corrected value to be a time in the future (using the time picker). The fourth image shows the form after the POST where the time gets reset back to 1/1/1901 12:00 AM and throws the error it can't be in the past. No matter how many times you change this field it keeps throwing this error.

Here's the Validate method:

1.public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
2.{
3.        if (OutageStart < DateTime.Now)
4.        {
5.            yield return new ValidationResult("Outage Date / Time cannot appear in the past", new[] { "OutageStart" });
6.        }
7.}
Angel Petrov
Telerik team
 answered on 28 Mar 2019
2 answers
240 views

I have a grid with a popup editor that has lots of content. There is a problem is when you scroll down and the window title is no longer visible. When I make changes to some of the kendo elements in the popup (grid, editor), the browser then scrolls up to the top of the window. 

How can I prevent this scroll up?

Adrian
Top achievements
Rank 1
 answered on 27 Mar 2019
2 answers
130 views

I have a grid:

@(Html.Kendo().Grid(Model.Lines)
    .Name("lines")
    .Columns(columns =>
    {
        columns.Bound(p => p.Item).ClientTemplate("#= (Item.Name) ? Item.Name : '' #");
        columns.Command(command => command.Destroy());
    })
    .ToolBar(tools =>
    {
        tools.Excel();
        tools.Pdf();
        tools.Save().HtmlAttributes(new { style = "float:right" });
        tools.Create().HtmlAttributes(new { style = "float:right" });
    })
    .AllowCopy(true)
    .Excel(excel => excel.FileName("LinesExport.xlsx"))
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Navigatable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(i => i.Id);
            model.Field(i => i.Id).Editable(false);
            model.Field(i => i.ItemId).Editable(false);
            model.Field(i => i.Item).Editable(true).DefaultValue(new Item { ItemId = "", ItemGroup = "", Name = "", SearchName = "" });
        })
        .Batch(true)
        .ServerOperation(false)
    )
)

 

with a custom editor on a field:

@model Item
 
@(Html.Kendo().MultiColumnComboBoxFor(m => m)
    .Placeholder("Select item")
    .DataTextField("Name")
    .DataValueField("ItemId")
    .Columns(columns =>
    {
        columns.Add().Field("ItemId").Title("Item Number").Width("180px");
        columns.Add().Field("Name").Title("Name").Width("180px");
        columns.Add().Field("SearchName").Title("Search Name").Width("180px");
        columns.Add().Field("ItemGroup").Title("Item Group").Width("180px");
    })
    .Filter(FilterType.Contains)
    .FooterTemplate("Total #: instance.dataSource.total() # items found")
    .Height(400)
    //.Events(events => events.Change("onComboBoxChange"))
    .DataSource(source => source
        .Read(read =>
        {
            read.Action("GetItems", "Home").Data("getItemsData");
        })
        .ServerFiltering(false)
    )
    .CascadeFrom("CustomerId")
)

 

The custom editor displays correctly for the Item field.  When Customer changes (happens elsewhere) it is cascading properly and the read action is getting called.  The read action is returning results (can see this by inspecting the result in the RequestEnd event) but no results are actually displayed in the MultiColumnComboBox.  I have another MultiColumnComboBox elsewhere on the page that is not in the grid that cascades from the same value and does an almost identical lookup and it works fine.

 

What am I missing here?  or is this a bug and if so how do I work around it?

 

 

 

Konstantin Dikov
Telerik team
 answered on 27 Mar 2019
4 answers
143 views

Hi, I have a problem displaying multiple needles with the radial gauge. 

I have a radialGauge defined as such:

@(Html.Kendo().RadialGauge().Name("MultiGauge")
                .Pointers(pointers =>
                {
                    pointers.Add().Color("#c20000").Length(0.5).Cap(c => c.Size(0.15));
                    pointers.Add().Color("#ff7a00").Length(0.75).Cap(c => c.Size(0.1));
                    pointers.Add().Color("#ff7a22").Length(0.75).Cap(c => c.Size(0.1));
                    pointers.Add().Color("#ff1100").Length(0.75).Cap(c => c.Size(0.1));
                })
                     .Scale(scale => scale
                            .MinorUnit(5)
                            .StartAngle(-60)
                            .EndAngle(240)
                            .Max(100)
                            .Labels(labels => labels
                                .Position(GaugeRadialScaleLabelsPosition.Inside)
                            )
                            .Ranges(ranges =>
                            {
                                ranges.Add().From(0).To(20).Color("#3bd11d");
                                ranges.Add().From(20).To(40).Color("#ffc700");
                                ranges.Add().From(40).To(60).Color("#ff7a00");
                                ranges.Add().From(60).To(100).Color("#c20000");
                            })
                        )
 
                    )
)

 

Then some js to set the values:

<script>
    $(document).ready(function() {
             
        var multiGauge = $("#MultiGauge").data("kendoRadialGauge");
 
 
        multiGauge.pointers[0].value(15);
        multiGauge.pointers[1].value(34);
        multiGauge.pointers[2].value(55);
        multiGauge.pointers[3].value(80);
        multiGauge.pointers[5].value(80); //required lol???
 
        multiGauge.redraw();
});
 
</script>

When I only set the pointer index 0,1,2, and 3, the gauge does not work.  The needles remain at zero and do not go to the specified value. 

However, if another value is added to an index that doesn't even exist... everything works.  

-Steve

Georgi
Telerik team
 answered on 27 Mar 2019
1 answer
260 views

Hi,

I'm doing some testing with TreeView and want just the top level(level = 0) nodes to be loaded initially. I only want
to load second level nodes(level = 1) when I click on the arrow next to one of the top level nodes.

I set LoadOnDemand to true in the View file, and HasChildren to true for all of the top level nodes in the Controller,
but I still don't get arrows next to my top level nodes.

Here's the code from my View file that creates the TreeView:

              @(
                 Html.Kendo().TreeView()
                 .Name("treeview")
                 .HtmlAttributes(new { style = "font-size: 11px; vertical-align: middle;" })
                 .Events(events => events
                       .Select("onSelect")
                       .Expand("onExpand")
                 )
                 .LoadOnDemand(true)
                 .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.Regions)
              )

And here's the code from my Controller class that creates the collection of Regions that I bind to the tree in the View file:

                List<TreeViewItemModel> regions = new List<TreeViewItemModel>();
                foreach (DataRow r in dt.Rows)
                {
                    TreeViewItemModel theModel = new TreeViewItemModel();
                    theModel.Text = (string)r["regionName"];
                    theModel.ImageUrl = "~/Shared/Images/db78.png";
                    theModel.HasChildren = true;
                    theModel.Id = r["RegionId"].ToString();
                    regions.Add(theModel);
                }
                ViewBag.Regions = regions;

 

If anyone can point me in the right direction, it would be greatly appreciated.

Thanks,

John

Dimitar
Telerik team
 answered on 27 Mar 2019
5 answers
702 views
I am an experienced developer and know the fundamentals of MVC. I bought Kendo UI Complete so that I can provide professional UI components on my websites at low development cost - i.e. avoid spending days experimenting. I've gone through http://docs.telerik.com/aspnet-core/getting-started and found it very disappointing in the following respects:

 

1. It contains typos - for example _Layout.cshtml is called Layout.cshtml

2. It creates a webapp with a lot of extra stuff that I don't want. I like to start with a minimal app and then add features.

3. The relationship between Bootstrap and Kendo style sheets / js isn't clear. I expect to be able to apply a custom theme to my website that works with all the Kendo widgets, but my attempts to change theme result in badly presented components.

4. There isn't clear differentiation of documentation that is Kendo UI for .NET Core specific.

5. Kendo documentation is badly organised. I'm not even told what version of what product it was last tested on.

 

In order to resolve these problems I am proposing this thread as an alternative starting point for people who are new to Kendo UI for .NET Core. Perhaps someone would kindly write a better set of instructions than http://docs.telerik.com/aspnet-core/getting-started and then keep them up-to-date.

 

Martin
Top achievements
Rank 1
 answered on 27 Mar 2019
2 answers
356 views

I've seen a couple of Telerik examples written for creating a Wizard using the TabStrip but using different technologies.  However, I have not had any luck with getting it to work in ASP.NET Core 2.2.  Each Tab should be a step in the process that loads a Partial View sharing 1 model.  The requirements are:

  • Tab 1 I have a Hierarchy using your TreeItem control
  • Tab 2 I have a Grid listing People
  • Tab 3 I capture some data entry
  • Tab 4 I submit the data that has been accumulated.

I'd appreciate your help with this,

Joel

Joel
Top achievements
Rank 3
Bronze
Iron
Iron
 answered on 26 Mar 2019
Narrow your results
Selected tags
Tags
+? 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?