Telerik Forums
UI for ASP.NET Core Forum
2 answers
135 views

I need to allow the user to select an item from the TreeList then go to its detail.  I don't believe there is a double-click event.  So then, I assume I'll need to put a "Details" button on the Grid.  Do you have an example how I do this?  I assume we do something like this (doesn't work):

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
  .Name("treelist")
  .Columns(columns =>
  {
      columns.Add().Command(c => { c.Custom().Text("Detail");}).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
      columns.Add().Field(e => e.Description);
      columns.Add().Field(e => e.CurrentStatus.Name).Title(nameof(Group.Status));
      columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
      columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
  })
  .Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
  .Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
  .DataSource(dataSource => dataSource
      .ServerOperation(false)
      .Create(create => create.Action("CreateJson", "Groups"))
      .Read(read => read.Action("AllJson", "Groups").Data("groupsRead"))
      .Update(update => update.Action("UpdateJson", "Groups"))
      .Destroy(delete => delete.Action("DestroyJson", "Groups"))
      .Model(m =>
      {
          m.Id(f => f.Id);
          m.ParentId(f => f.ParentId);
          m.Expanded(true);
          m.Field(f => f.Name);
          m.Field(f => f.Description);
          m.Field(f => f.AddTimestamp).Editable(false);
      })
      .Events(events =>
      {
          events.Error("onError");
      })
  ))
Viktor Tachev
Telerik team
 answered on 09 Jan 2019
2 answers
104 views

I have a Group object that has an [int Status] property.  I get a list of Status values from a Lookup object that has a Name and an EnumIndex value.  The Status value needs to be set from the selected Lookup object's EnumIndex value.  Form & Drop down definition:

Groups are defined in TreeList:

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
              .Name("treelist")
              .Columns(columns =>
              {
                  columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
                  columns.Add().Field(e => e.Description);
                  columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
                  columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new {style = "text-align: center;"});
                  columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
                  columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
              })
              .Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
              .Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
              .DataSource(dataSource => dataSource
                  .ServerOperation(false)
                  .Create(create => create.Action("CreateJson", "Groups"))
                  .Read(read => read.Action("AllJson", "Groups")
                      .Data("groupsRead"))
                  .Update(update => update.Action("UpdateJson", "Groups"))
                  .Destroy(delete => delete.Action("DestroyJson", "Groups"))
                  .Model(m =>
                  {
                      m.Id(f => f.Id);
                      m.ParentId(f => f.ParentId);
                      m.Expanded(true);
                      m.Field(f => f.Name);
                      m.Field(f => f.Description);
                      m.Field(f => f.AddTimestamp).Editable(false);
                  })
              ))
 
<script>
    var groupId = Number(@(ViewBag.GroupId));
 
    function groupsRead() {
        return { id: groupId };
    }
 
</script>

 

Editing is done in this PopUp:

@model GsiPortal.Models.Group

<div class="container-fluid">
    <div class="col-xs-offset-1">
        <h4>Group</h4>
        <form class="form-horizontal" asp-action="Edit" asp-controller="Groups">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Id" />
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Description" class="control-label"></label>
                <input asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ImageUrl" class="control-label"></label>
                <input asp-for="ImageUrl" class="form-control" />
                <span asp-validation-for="ImageUrl" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Status" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.Status)
                      .DataTextField("Name")
                      .DataValueField("EnumIndex")
                      .DataSource(source =>
                      {
                          source.Read(read =>
                          {
                              read.Action("GetStatus", "Groups");
                          });
                      })
                      .HtmlAttributes(new { style = "width: 75%" })
                      )
            </div>
        </form>
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Controller Method:

/// <summary>
///
/// </summary>
/// <param name="request"></param>
/// <param name="grp">DO NOT RENAME THIS PARAM TO "group" as it will cause the control to not submit</param>
/// <returns></returns>
[AcceptVerbs("Post")]
public async Task<JsonResult> UpdateJson(
    [DataSourceRequest] DataSourceRequest request,
    Group grp)
{
    if (ModelState.IsValid)
    {
        customerDbContext.Update(grp);
        await customerDbContext.SaveChangesAsync();
    }
 
    return Json(await new[] { grp }.ToTreeDataSourceResultAsync(request, ModelState));
}

 

The drop down looks good with the list of Status values but my problem is, the Group's Status value does not change.  What did I miss?

Thanks, Joel

Joel
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 08 Jan 2019
2 answers
623 views
How do I increase the font size for both the content and tab titles?
Ken
Top achievements
Rank 1
 answered on 07 Jan 2019
2 answers
70 views

I have an incremental search using a Kendo UI DropdownList working in an ASP.NET Core application.  I would like to have multiple columns in the display or at least to group the results.  So that I could nicely format it showing products they are searching for grouped by category with a category image.

 

Sort of like :

<image> Category 1

    Selection 1
    Selection 2

<image> Category 2
    Selection 1
    Selection 2

etc.

Are there any demos demonstrating this?

 

Thanks

Reid
Top achievements
Rank 2
 answered on 07 Jan 2019
1 answer
156 views

Do you have Demos that point at Core 2.2?  If not, what is their ETA?  I'm no longer able to run the Visual Studio Demo code.

Thanks, Joel.

Dimitar
Telerik team
 answered on 07 Jan 2019
4 answers
116 views

All of your examples don't show me how to load the TreeList with data from a specified ParentId.  Correct me if I'm wrong, but I believe this is the load order (MVC):

  1. Call the Controller Index method to load the View.
  2. View is loaded then the TreeList is initialized which begins the Binding.
  3. Binding calls the TreeList.Read() method to get the hierarchy data (From the GroupsController, AllJson method in my case)

My read definition looks like this:  

.Read(read => read.Action("AllJson", "Groups"))

My problem is I don't see where it lets me specify which root node I want it to initialize the Read from. If I have 200 Hierarchies and I want #134 loaded into the TreeList how do I specify that?

Also, I must load a Hierarchy based on a person's authorization.  That may mean that they are only able to see a branch from a Hierarchy.  How do I accomplish this?

It would make sense to pass the index of a parent node something like this (not real): 

Read(read => read.Action("AllJson", "Groups", ViewBag.ParentId))

Thanks in advance for your help,

Joel

Preslav
Telerik team
 answered on 07 Jan 2019
4 answers
562 views

Hi,

Using UI for .net core.

I have a requirement to show multi days events in week view, 

e.g Start 27/12/18 10:00 AM - End 29/12/18 13:00 PM. (2 days and 3 hours)

So the event should span on those multi days in the week view table part (but not as all day events in the scheduler top row)

The default scheduler week view behavior prevent this by making the event into an all day event.

 

According to this link :

https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/custom-view

I can create a custome view but i cant seem to find an example on how to

create custom view that inherits from week view and that can show events that span for multi days.

 

I checked out other related forum questions but I cant seem to find an answer, for example:

https://www.telerik.com/forums/show-all-day-event-in-the-main-part-of-week-view

 

Looking forward for your answers.
Thank you.

Plamen
Telerik team
 answered on 04 Jan 2019
1 answer
66 views

Hello,

 

I'm trying to integrate the sortable component into a grid that is a ClientDetailTemplateId. Is it possible to do that ? Here is my code so far (this grid is the client detail, a grid within a grid)

 

<script>

@(Html.Kendo().Grid<PointVerificationViewModel>()
        .Name("pointGrid_#=Id#")
        .Columns(col =>
        {
            col.Bound(p => p.Libelle);
            col.Bound(p => p.EstBloquant)
                .ClientTemplate("\\#: data && data.EstBloquant ? 'OUI' : 'NON' \\#");
            col.Command(cmd =>
            {
                cmd.Edit().Text(" ").UpdateText(" ").CancelText(" ").IconClass("fa fa-pencil-alt").UpdateIconClass("fa fa-check").CancelIconClass("fa fa-ban");
                cmd.Destroy().Text(" ").IconClass("fa fa-times");
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .ToolBar(toolbar =>
        {
            toolbar.Create().IconClass("fa fa-plus").Text("Créer un point de vérification");
        })
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)
            .Model(m =>
            {
                m.Id(p => p.Id);
            })
            .Read(a => a.Action("Read", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Get))
            .Create(a => a.Action("Create", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Post))
            .Update(a => a.Action("Update", "PointVerification").Type(HttpVerbs.Put))
            .Destroy(a => a.Action("Delete", "PointVerification").Type(HttpVerbs.Delete))
        )
        .Sortable()
        .ToClientTemplate()
    )

 

    @(Html.Kendo().Sortable()
        .For("#pointGrid_#=Id#")
        .Filter("table > tbody > tr")
        .Cursor("move")
        .HintHandler("noHint")
        .PlaceholderHandler("placeholder")
        .ContainerSelector("#pointGrid_#=Id# tbody")
        .Events(events => events.Change("onChange"))
    )

</script>

 

i've got an invalide template error with that code.

 

Thanks a lot.

Tsvetina
Telerik team
 answered on 04 Jan 2019
11 answers
153 views

Hi,

I want to add subtext to my charts. Lets say I have this bar chart with a title legend etc.

This is the main code:

@model Model1
 
<div class="demo-section k-content wide">
    @(Html.Kendo().Chart<App.Models.Model2>()
   .title ()
   .datasource()
   .series()
   .catAxis()
   .valAxis()
   .valaxis()
 
)

 

How can I add a span properly with the data from Model2?

Tsvetina
Telerik team
 answered on 03 Jan 2019
2 answers
505 views

Hello,

I'm working with scatter plot.

I'm able to set the color of the series of data points plotted and fill them in.

How do I get the data-point-color in the bottom legend to match the color of the data-points?

Or more simply, how do I set the color of the data-point-color in the x-axis legend?

The cshtml code:

    <div class="demo-section k-content wide">
        @(Html.Kendo().Chart<Injectsense.Models.ChartScatterPlotPoint>(Model.DataPointList)
          .Name("pressureDataChart")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom))
          )
          .ChartArea(chartArea => chartArea
              .Background("transparent")
          )
          .SeriesDefaults(seriesDefaults =>
              seriesDefaults.Scatter().Labels(labels => labels.Visible(false)).Markers(markers => markers.Size(6))
          )
          .DataSource(dataSource => dataSource
              .Group(group => group.Add(model => model.Name))
          )
          .Series(series =>
          {
             series.Scatter(model => model.X, model => model.Y).ColorHandler("getPointColor").Markers(markers => markers.Background("getPointColor"));
          })
        .XAxis(x => x
            .Title(title => title.Text("Date"))
            .Date()
        )
        .YAxis(y => y
            .Numeric()
            .Title(title => title.Text("Pressure [mmHg]"))
        )
        .Zoomable()
        .Pannable()
        )
    </div>

The data point:

    public class ChartScatterPlotPoint
    {
        public DateTime X { get; set; }
        public double Y { get; set; }

        public string Name { get; set; }

        public string Color { get; set; }

        public ChartScatterPlotPoint(DateTime dateTime, double value, string name, string color)
        {
            this.X = dateTime;
            this.Y = value;
            this.Name = name;
            this.Color = color;
        }
    }

The image is attached showing the area of concern.

Thank you for your help on this.

-jim

 

James
Top achievements
Rank 1
 answered on 03 Jan 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?