Questions on UI for ASP.NET Core Forum

18 answers

851 views

Hello, in my site I have boxes and in the boxes I have charts. The boxes do have a default width and height(height & width are the same. Even on resize). Now only do the charts their own thing and get their own height. How can I fix it so the charts will fit in the boxes?

General Discussions

answered on 11 Jan 2019

1 answer

346 views

Chart is not displayed

Hi,

I Using Kendo Chart,Previously worked without problems

But Now Chart is not Displayed,Only the contents are displayed in text

This Is My Code:

<div class="chart-wrapper">
        @(Html.Kendo().Chart()
                                .Name("chart")
                                .Title("Site Visitors Stats /thousands/")
                                .Legend(legend => legend
                                    .Position(ChartLegendPosition.Bottom)
                                )
                                .SeriesDefaults(seriesDefaults => seriesDefaults
                                    .Column().Stack(true)
                                )
                                .Series(series =>
                                {
                                    series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
                                    series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
                                })
                                .CategoryAxis(axis => axis
                                    .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
                                    .MajorGridLines(lines => lines.Visible(false))
                                )
                                .ValueAxis(axis => axis
                                    .Numeric()
                                    .Line(line => line.Visible(false))
                                )
                                .Tooltip(tooltip => tooltip
                                    .Visible(true)
                                    .Format("{0}")
                                )
        )
    </div>

Please Help Me.

Chart

answered on 10 Jan 2019

3 answers

180 views

[Solved] TreeList Filterable Columns

Do you have any documentation on how the .Filterable mechanism works on a column in the TreeList? I had some success with this feature on a Grid but this control doesn't seem to require the same parameters.

Eg. columns.Add().Field(e => e.Description).Filterable(ftb => ftp...

TreeList

answered on 10 Jan 2019

1 answer

140 views

Task Progress Shading

How do you color a task to represent the percent completion?

The demo's at https://demos.telerik.com/aspnet-core/gantt/task-template and https://demos.telerik.com/aspnet-core/gantt/api show it but I couldn't tell how it was being done. I am looking to do something like these demo's do.

Thanks

Ken

Gantt

answered on 10 Jan 2019

2 answers

140 views

Sending the grid to controller via custom cmd

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>

Grid

answered on 10 Jan 2019

2 answers

167 views

Navigation to Detail Page

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");

})

))

TreeList

answered on 09 Jan 2019

2 answers

149 views

[Solved] Binding to Model property

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

TreeList

answered on 08 Jan 2019

2 answers

678 views

Font Size

How do I increase the font size for both the content and tab titles?

TabStrip

answered on 07 Jan 2019

2 answers

102 views

[Solved] Incremental Search - Custom Template or formatting

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

DropDownList