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

I'm new to ASP Core Grid component. I need to build a custom detail template. It has a child grid with its own data source. But it also have some info above the child grid. I started with the 'Grid and Menu' Visual Studio project template and removed unnecessary code. I've attached the UI screenshot and copied the content of Index.cshtml below. I have the following questions:

  1. The Freight in the detail template is decimal type. How to format it to '0.##'?
  2. I want to show some information in the detail template that could be part of the master record but cannot be loaded as part of the master record, it's a big performance hit if done that way. So it must be loaded later when the detail expands. I thought I can use the DetailInit event on the master grid but how do I update the UI? Do I re-render the template, do I update the master data record and then refresh the UI somehow?
  3. I have Refresh button on the detail grid pager. Can I update the entire template (including the Freight and summary info above the detail grid) when this button is clicked? Are there any events I can use to perform (2.) above? Is there a better way?

Any pointers are greatly appreciated.

Thank you!

Index.cshtml:

@{
    ViewData["Title"] = "Home Page";
}

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid <GridDetail.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .HtmlAttributes(new { style = "height:550px;" })
            .ClientDetailTemplateId("detailTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
                )
        )
    </div>
</div>

<script id="detailTemplate" type="text/html">
    <div>Freight: #=Freight#.</div> <!-- How to format the Freight? -->
    <div>
        Here some information that could come from shared data source.
        Or it could be on the master grid record but loaded when the detail expands.
    </div>
    @(Html.Kendo()
        .Grid<GridDetail.Models.OrderDetailViewModel>()
        .Name("grid_#=OrderID#")
        .Columns(columns =>
        {
            columns.Bound(c => c.Item);
            columns.Bound(c => c.Quantity);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("Order_Details_Read", "Grid", new { orderId = "#=OrderID#" }))
        )
        // Can the pager refresh be used to trigger update to the entire detailTemplate?
        // Is there even that could be used?
        .Pageable(pager => pager.Refresh(true))
        .ToClientTemplate()
    )
</script>

 

Stoyan
Telerik team
 answered on 09 Dec 2021
1 answer
114 views

Hi, all

theme: kendo.bootstrap-v4.min.css

header in DatePicker is not correct colored. Text is white on light gray background. In 2021.3.914 the same problem too.

 

Aleksandar
Telerik team
 answered on 09 Dec 2021
1 answer
88 views
Please can you advise if kendo support treelist with paging capabilities? 
Alexander
Telerik team
 answered on 08 Dec 2021
1 answer
429 views

I'm using the html helpers to configure the scheduler. Little by little, there have been more changes that I wasn't able to do with the html helper.

I've opted to use the edit event of the widget. During the event, the Disclaimer and SystemSoftwareVersion rows are added as well as the scrollbar on the side. Additionally, the Device drop-down is disabled conditionally.

The last thing left to do is to give the labels more space as the line wrapping for System Software Version is undesireable and only gets worse when viewed on mobile.

I know I can:

  • Continue adding on to the edit event and customize there
  • Create a template for the edit window

Both these options aren't ideal as I'd much prefer not messing with the DOM to this extent in the edit event. Since I haven't worked with templates before however, switching over to that option is daunting.

What are my options here? Am I overlooking something? If I wanted to start using templates for the edit window - how do I get started?

Aleksandar
Telerik team
 answered on 08 Dec 2021
1 answer
442 views

Hello,

 

In a .net 5.0 application using MVC, I have a grid that has been defined as Html.Kendo().Grid<dynamic>() because it needs to have dynamically generated columns (a mix between static and dynamic columns).

Html.Kendo().Grid<dynamic>() 
/*..*/
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.EnableCustomBinding(true)
.Columns(columns =>
{
    for (int i = 0; i < Model.TotalDimensions * 2; i++)
    {
        columns
            .Bound(Model.Data.Columns[i].DataType, Model.Data.Columns[i].ColumnName)
            .Title(Model.Data.Columns[i].Caption)
            .ClientGroupHeaderTemplate($"{Model.Data.Columns[i].Caption} #= value #")
            .Width(100);
    }
}
/*..*/

I am attempting to override the behavior of the filter UI. The documentation states that I should use this syntax:

columns.Bound(/*..*/).Filterable(filter => filter.UI("filterFunction")

Unfortunately, since the grid model has been defined as dynamic, the above line does not compile.

Is there a workaround for this?

Aleksandar
Telerik team
 answered on 06 Dec 2021
1 answer
680 views

Is it possible to integrate loader or other wait component to show that server  side process is running?

 

Tsvetomir
Telerik team
 answered on 06 Dec 2021
1 answer
433 views

Hi All,

May I ask about what will happen if the date over 30 days trial? 

Regards


Mihaela
Telerik team
 answered on 03 Dec 2021
1 answer
236 views

look this:

columns.Bound(p => p.Lock).ClientTemplate("<input onclick='return false;' type='checkbox' #= Lock? checked='checked' : ' ' # />");

It's completely normal but I always get  Invalid template

It's just happen with Hierarchy grid, and with normal grid it works fine.

<script id="LoadWeek" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<WorkingWeek>()
            .Name("grid_#=Id#")
            .Columns(columns =>
            {
                another column bound
                columns.Bound(p => p.Lock).ClientTemplate("<input onclick='return false;' type='checkbox' #= datChuan ? checked='checked' :'' # />");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("HierarchyBinding_Week", "WeeklyProgress", new { WorkingMonthId = "#=Id#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
How can I edit the template column as I want with Hierarchy grid?
Alexander
Telerik team
 answered on 03 Dec 2021
1 answer
246 views

Hello,

Is it possible to have a different template per row according to a value of a column in the grid?

Example:

If ForecastType=1

If ForecastType=2

 

If ForecastType=3

 

yellow areas are editable

Tsvetomir
Telerik team
 answered on 02 Dec 2021
1 answer
306 views

I have an asp.net core razor page app im trying to make an edit page I would like to add a Telerik grid to bind to a list of objects that I have declared as a bind property. The Grid is displaying great but when the form posts back I want the grid to modelbind to the list and pass back in the new records, changed records, and delated actions done in the grid.  This is not happening and if I use the bind property or pass the parameter on the onpost I can't get the grid values passed back.

   In the code behind

 

  public class HowToUseSteps

    {

        public int Id { get; set; }

        public string Steptext { get; set; }

    }

 

 

  [BindProperty]

        public  List<HowToUseSteps> _Steps { get; set; }

 

in the cshtml

<form method="post">

              @(Html.Kendo().Grid(Model._Steps)

              .Name("HowToUseSteps")

              .Editable(editable => editable.Mode(GridEditMode.InCell))

              .Columns(columns =>

              {

                  columns.Bound(column => column.Id).Title("Id").Width(100);

                  columns.Bound(column => column.Steptext).Title("Step");

                  columns.Command(command => command.Destroy()).Width(150);

              }

           )

                .ToolBar(toolbar =>

                {

                    toolbar.Create();

                    toolbar.Save();

                })

                    .DataSource(dataSource => dataSource

        .Ajax()

        .PageSize(20)

        .ServerOperation(true)

     )

    <button type="submit" class="btn btn-success">Save</button>

</form>

I know i can call separate on change on delete events on the grid. but i was hoping to use databinding on a postback instead.  any help would be appricated. 

Thanks

Ross

Aleksandar
Telerik team
 answered on 30 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?