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

Hello,

I have a problem with the grid's virtual scrolling not taking into account the grid's row height. When a cell's data needs two lines to display properly, virtual scrolling doesn't adjust the available scroll to compensate. This makes data hide under the grid's defined box. 

Is there a way to handle this scenario properly?

Thank you for the help!!

David

David
Top achievements
Rank 1
 answered on 02 Oct 2019
1 answer
509 views

Hi, I have a custom TagHelper that I have written to suppress the output of an HTML element. Basically it allows me to provide a comma delimited list of policies and if the user does not pass that check, all output is suppressed. I can add these TagHelpers to a kendo TagHelper, but of course it does not work, as I know Kendo is doing a lot internally. Is there a way to get this to work though?

If I take the if statement out of this class and wrap the Kendo component with it, it will indeed work. I've also tried messing with the Order property of the TagHelper itself, to no avail. One item I am trying to use this on is the <panelbar-item /> to limit navigation options.

The code in the custom TagHelper class is as follows.

public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
    if (!(await _authorizationService.AuthorizeAsync(ViewContext.HttpContext.User, Policy)).Succeeded)
    {
        output.SuppressOutput();
    }
}
Veselin Tsvetanov
Telerik team
 answered on 02 Oct 2019
14 answers
1.4K+ views

Hello,

We are currently using your Kendo Grid to display a list of explants based on status.  We are using server side filtering for this, and we have a filter menu where the user can multi-check statuses to filter the list by.  This works fine when loading all data at once, however we have a use case where a user might hit a link that loads the grid and just displays data under a specific status.  When this happens, the filter dropdown for status only displays that status that they are viewing, not all statuses.  Clearing the filtering does work and then shows all of the data, but the user then can't filter by another status because the dropdown only displays that one status the user was originally viewing.  Is there a way around this without forgoing server-side filtering?  I can get this to work as expected using client-side, but that's not going to be an effective way of loading data when we're going to be loading thousands of explants for the user to view.  I've attached a couple images to show what I mean, one is what the status filter looks like when I load all the data at once, and the other is what it looks like when I load the grid for just one status.  I'll also attach a small snippet of my code as well, to show how I'm applying this filtering on grid load.

Thanks,

Jason

Linda Soukup
Top achievements
Rank 1
 answered on 02 Oct 2019
2 answers
151 views

Please help me with the TagHelper equivalent of the following code.

ps. A suggestion for your documentation team; please include more useful examples like you have for the razor code -> the one read-only example is trivial and on the border of being useless.

@(Html.Kendo().Grid<OrderViewModel>
    ()
    .Name("grid2")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Width(100);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:yyyy-MM-dd HH:mm:ss}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
 
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Search())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .PageSize(80)
    //.Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.OrderID))  
    .Read(read => read.Action("Orders_Read", "Grid")) 
    .Create(create => create.Action("Orders_Create","Grid"))
    .Destroy(update => update.Action("Orders_Destroy", "Grid"))
    .Update(update => update.Action("Orders_Update", "Grid"))
    )
 
)

I have tried with the following but have not succeeded in getting the destroy event to fire properly.

<kendo-grid name="grid1" height="550">
           <columns>
               <column field="OrderID" title="Order ID">
                   <filterable enabled="false"></filterable>
               </column>
               <column field="Freight" title="Freight" />
               <column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
               <column field="ShipName" title="Ship Name" />
               <column field="ShipCity" title="Ship City" />
               <column>
                   <commands>
                       <column-command text="Delete" name="destroy"></column-command>
                       <column-command text="Edit" name="edit"></column-command>
                   </commands>
               </column>
           </columns>
           <scrollable enabled="true" />
           <sortable enabled="true" />
           <pageable enabled="true" />
           <editable mode="inline" />
           <filterable enabled="true" />
           <datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false">
               <transport>
                   <read url="@Url.Action("Orders_Read", "Grid")" />
                   <destroy url="@Url.Action("Orders_Destroy", "Grid")" />
               </transport>
               <schema>
                   <model>
                       <fields>
                           <field name="OrderId" type="int"></field>
                           <field name="Freight" type="decimal"></field>
                           <field name="OrderDate" type="DateTime"></field>
                           <field name="ShipName" type="string"></field>
                           <field name="ShipCity" type="string"></field>
                       </fields>
                   </model>
               </schema>
           </datasource>
       </kendo-grid>
Bruce
Top achievements
Rank 1
 answered on 01 Oct 2019
5 answers
96 views

Why are the 3.0 templates still using older 2.2 code in startup.cs and program.cs? Sure it works but it's not really 3.0 syntax.

Example:

2.2 -> 3.0:

AddMvc -> AddControllersWithViews

IWebHostBuilder -> IHostBuilder

Nencho
Telerik team
 answered on 01 Oct 2019
3 answers
104 views

There must be an easier way to set the background color of cells based on a condition. 

I have the following code that colors all cells the same color. I will modify it later to constrain it to those cells that I actually need to color.

Before I do, I want make sure I am doing things correctly. My code works, but seems overly complicated. The other issue is that when the color is set I lose the horizontal border. Is there a  way to color a cell and keep the 4 borders (i.e. the gridlines)?

Any guidance would be greatly appreciated.

 

function gridDataBound(e)
      {
          var grid = this;
          var headerCells = grid.element.find("th");
          var data = $("#grid").data("kendoGrid").dataSource.data();
          var i;
          var j;
          var dataItem;
          rows = e.sender.content.find('tr');
          for (i = 0; i < rows.length; i++)
          {
              dataItem = data[i];
              var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
              for (j = 0; j < rowCells.length; j++)
              {
                  $(rows[i]).children('td:eq(' + j + ')').css("background-color", "yellow");
              }
          }
Alex Hajigeorgieva
Telerik team
 answered on 30 Sep 2019
7 answers
1.4K+ views

Hello,

I try setup my Kendo grid in a Net.Core project with inline editing, but the "Create" controller action not firing after I try add new row. The Read method executes successfully, but the Create method never executing.

My controller code:

[HttpPost]
      public ActionResult Create([DataSourceRequest] DataSourceRequest request, DynamicMessageViewModel product)
      {
 
          return Json(new[] { product }.ToDataSourceResult(request, ModelState));
      }
 
      public ActionResult Read([DataSourceRequest]DataSourceRequest request)
      {
          IQueryable<DynamicMessageModel> dynamicmessagemodels = _context.DynamicMessage.DistinctBy(d => d.StringId).AsQueryable();
           
          DataSourceResult result = dynamicmessagemodels.ToDataSourceResult(request, dynamicMessageModel => new DynamicMessageViewModel {
              Id = dynamicMessageModel.Id,
              StringId = dynamicMessageModel.StringId,
              Culture = dynamicMessageModel.Culture,
              Message = dynamicMessageModel.Message
          });
 
          return Json(result);
      }

 

My view:

@(Html.Kendo().Grid<MyCoreSite.Models.DynamicMessage.DynamicMessageViewModel>()
           .Name("grid")
           .Columns(columns =>
           {
               columns.Bound(c => c.Id).Hidden();
               columns.Bound(c => c.StringId);
               columns.Bound(c => c.Culture).Hidden();
               columns.Bound(c => c.Message).Hidden();
               columns.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" ").HtmlAttributes(new { title = Lang["Szerkesztés"].Value }); command.Destroy().Text(" ").HtmlAttributes(new { title = Lang["Törlés"].Value }); }).Width(102);
           })
           .ToolBar(toolbar =>
           {
               toolbar.Create();
               toolbar.Excel();
           })
           .Editable(editable => editable.Mode(GridEditMode.InLine))
           .Pageable()
           .Selectable(selectable =>
           {
               selectable.Mode(GridSelectionMode.Single);
               selectable.Type(GridSelectionType.Row);
           })
           .Sortable(sortable =>
           {
               sortable.SortMode(GridSortMode.SingleColumn);
           })
           .Filterable(filterable => filterable.Mode(GridFilterMode.Row))
           .Scrollable()
           .Events(events =>
           {
               events.Edit("onEdit");
               events.Change("onRowChange");
               events.SaveChanges("onSaveChanges");
           })
           .DataSource(dataSource => dataSource
               .Ajax()
               .Create(create => create.Action("Create", "DynamicMessage"))
               .Update(update => update.Action("Update", "DynamicMessage"))
               .Read(read => read.Action("Read", "DynamicMessage"))
           )
      )

 

My first question: why the Create action not firing after I try add new row? If I check the url of the Accept button, I see "#" in the href attribute...

My second question: after I click on the "Edit" button inside a row, the Cancel button appear. After I click on Cancel, the entire row will be removed from the grid. I dont understand why.

Thank you for help!

 

 

 

Viktor Tachev
Telerik team
 answered on 30 Sep 2019
5 answers
126 views

Hi There,

I am working on a grid which has a dropdownlist column. I use the solution in the following demo:

https://demos.telerik.com/aspnet-core/grid/editing-custom

The difference is that we need to save the grid through an ajax call instead of the build-in "Save Changes" button. I added a "Save" button under the grid, change the dropdownlist value and use the following code to post the grid data to Controller action, but the value of products passed to Action always contains the original dropdownlist value other than the updated value. Is there anything not right in my code? Please help. Thank you.

$('#btnSaveGridData').click(function () {
            var data = $("#grid").data("kendoGrid").dataSource.data();
 
            $.ajax({
                url: '/Editing_CustomController/SaveGridData',
                type: "post",
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(data),
                complete: function (response) {
                    $("#gridSection").empty();
                    $("#gridSection").html(response.responseText);
                },
                failure: function (response) {
                    //alert(response.responseText);
                },
                error: function (response) {
                    //alert(response.responseText);
                }
            });
        });
 
Controller Action
[HttpPost]
public async Task<IActionResult> SaveGridData([FromBody] List<ProductViewModel> products)
       {
            //Action logic
            return PartialView("_Grid");
        }

 

 

Meng
Top achievements
Rank 1
 answered on 27 Sep 2019
1 answer
784 views

Hi,

We have a custom popup grid editing form with cascading dropdowns, which use serverFiltering(true) and pass 3 parameters to the datasource read action.

The dropdown gets a set of items and we then want to use simple clientside filtering in the dropdown to help the users find what they want:

@(Html.Kendo().DropDownListFor(m => m.CodeId)
                                                            .OptionLabel("Select code ...")
                                                            .DataTextField("Description")
                                                            .DataValueField("Id")
                                                            .Filter(FilterType.Contains)
                                                            .MinLength(2)

                                                            .ValuePrimitive(true)
                                                            .DataSource(source =>
                                                            {                                                                
                                                                source.Read(read =>
                                                                {                                                                
                                                                    read.Action("GetCodesForPropertyForCashType", "CodeInvoice").Data("GetCodes");
                                                                })
                                                                .ServerFiltering(true);
                                                            })
                                                            
                                                            .Enable(false)

                                                            .AutoBind(false)
                                                            .CascadeFrom("ScheduleId")

)

 

But the server filtering always seems to kick in.

Can we get the dropdown to just filter its contents in place after the initial load?

Thanks,

Daniel.

Martin
Telerik team
 answered on 27 Sep 2019
1 answer
78 views

How create chart with 2 or 3 bars from DataSource

series.Bar(model => model.Sum).Name(""); // One Bar

series.Bar(model => model.Sum).Name(""); //  Need new data????

 

@(Html.Kendo().Chart<CoreDiag.Models.CKassaLine>(Model)
            .Name("Name1") // The name of the Chart is mandatory. It specifies the "id" attribute of the widget.
            .Title("Name1")
            .Series(series =>
            {
                series.Bar(model => model.Sum).Name("");
            })
            .CategoryAxis(axis => axis
                .Categories(model => model.Period)
            )
             
  )

Nikolay
Telerik team
 answered on 27 Sep 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?