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

Hello,

I have a nested grid which implements the sortable components. After reordering the rows, i would like to send the reordered grid to my controller so i can update the data in it. I'm not sure i'm using the right approach, but i'm trying to do this with a custom command from the toolbar. My question is simple, how can i send all my grid to my controller after i reordered the rows ? The goal is to change the property "Ordre" if my model. Thank you very much.

Here is my code so far: 

 

//nested grid
<script id="questionsTemplate" type="text/x-kendo-tmpl">
    @(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.Bound(p => p.Ordre);
            col.Command(cmd =>
            {
                cmd.Edit().Text(" ");
                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");
            toolbar.Custom().IconClass("fas fa-save").Text("Sauvegarder l'ordre").HtmlAttributes(new { data_role = "saveOrder" });//the custom button i'm trying to use to send my grid
        })
        .Events(e => e.Change("onChange"))
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)
            .PageSize(16)
            .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"))
        .ToClientTemplate()
)
 
</script>
 
<script>
    var noHint = $.noop;
 
    function placeholder(element) {
        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    }
 
    function onChange(e) {
        var id = e.sender.element[0].id;
        var grid = $("#" + id).data("kendoGrid");
 
        skip = grid.dataSource.skip();
        oldIndex = e.oldIndex + skip;
        newIndex = e.newIndex + skip;
        data = grid.dataSource.data();
        dataItem = grid.dataSource.getByUid(e.item.data("uid"));
 
        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);
    }
 
    // I'm trying to send my grid to my controller with this method, but it keeps calling the delete method.
    function onFamilleGridDetailExpand(e) {
        e.detailRow.find("[data-role=saveOrder]").click(function () {
            var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid").saveChanges();
        });
    }
</script>
Julien
Top achievements
Rank 1
 answered on 10 Jan 2019
2 answers
142 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
115 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 3
Bronze
Iron
Iron
 answered on 08 Jan 2019
2 answers
641 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
77 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
165 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
125 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
578 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
69 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
171 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
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?