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

I am using a hierarchical grid as per your demos for ASP.NET Core.  When I call the hidecolumn() js function like so:  
       $("#CategoryGrid").data("kendoGrid").hidecolumn("Category4");, it does work as expected, but only for the Chrome browser.  Firefox and Edge display a huge column size for the leftmost column with the expand button created by the hierarchical grid, (with the header class 'k-hierarchy-cell k-header').  When a column is removed in chrome the remaining column sizes expand uniformly, but in firefox and Edge, the leftmost column expands at a much faster rate, which will then shrink the rightmost columns with the actual data to below their minimum sizes.  Is there an easy fix for this?  

 

Thank you.

 

 

Chris
Top achievements
Rank 1
 answered on 28 Jan 2019
3 answers
122 views

Hello, 

I have a grid that I would like to work with an html form.

 

Right now the form an grid work just fine. What i am trying to do is pass parameters to the method that runs the actual query. When I add in the parameters that is when the issue arises, instead of the results going back into the grid i get a page of json results. Any help would be greatly appreciated.  

 

@(Html.Kendo().Grid<MVCPROJECT.ViewModels.FormViewModel>()
                  .Name("SearchResultsGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.FirstName).Width(120).Filterable(ftb => ftb.Multi(true));
                      columns.Bound(c => c.LastName).Width(120).Filterable(ftb => ftb.Multi(true));
                      columns.Bound(c => c.Agency).Width(120).Filterable(ftb => ftb.Multi(true));
                      columns.Bound(c => c.Address1).Width(120).Filterable(ftb => ftb.Multi(true));
                      columns.Bound(c => c.City).Width(120).Filterable(ftb => ftb.Multi(true));
                      columns.Bound(c => c.PhoneNumber).Width(130).Filterable(false);
                      columns.Bound(c => c.ServiceName).Width(150).Filterable(ftb => ftb.Multi(true));
                      columns.Bound(c => c.ClientType).Width(120).Filterable(ftb => ftb.Multi(true));
                  })
                  .NoRecords()
                  .Mobile()
                  .Pageable(pager => pager.PageSizes(new int[] { 10, 20, 50 }))
                  .Sortable()
                  .Filterable()
                  .Pageable(pager => pager.ButtonCount(5))
                  .Scrollable()
                  .Navigatable()
                  .HtmlAttributes(new { style = "height:550px;font-size:12px" })
                  .DataSource(dataSource => dataSource
                  .Ajax() 
                  .PageSize(20)
                  .Read(read => read.Action("SearchResults", "ProviderSearch"))
                  ))

 public ActionResult SearchResults([DataSourceRequest]DataSourceRequest request, string ClientType, int? ZipCode, int? Distance, string County, string[] ProviderServices)
        {
                return Json(GetSearchResults(ClientType).ToDataSourceResult(request));
        }

Tsvetomir
Telerik team
 answered on 28 Jan 2019
13 answers
2.3K+ views

Hello,

It seems that there is no Extension method in Kendo.Mvc.Extensions for MVC Core to use Dynamic Grid with DataTable?

"DataTable" does not contain a definition for "ToDataSourceResult", and the overloading of the optimal extension method "QueryableExtensions.ToDataSourceResult (IEnumerable, DataSourceRequest)" requires an IEnumerable

how to use a datatable in ASP.NET MVC Core Version of the grid?

 

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
        {
            DataTable products = Products();
 
            return Json(products.ToDataSourceResult(request));
        }

 

@(Html.Kendo().Grid<dynamic>()
                          .Name("Grid")
                          .Columns(columns =>
                          {
                              foreach (System.Data.DataColumn column in Model.Columns)
                              {
                                  var c = columns.Bound(column.ColumnName);
                                   
                              }
                          })
                          .Pageable()
                          .Sortable()
                          .Filterable()
                          .Groupable()
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .Model(model =>
                              {
                                  var id = Model.PrimaryKey[0].ColumnName;
                                  model.Id(id);
                                  foreach (System.Data.DataColumn column in Model.Columns)
                                  {
                                      var field = model.Field(column.ColumnName, column.DataType);
                                      if (column.ColumnName == id)
                                      {
                                          field.Editable(false);
                                      }
 
                                  }
                              })
                              .Read(read => read.Action("Read", "Home"))
                          )
                )
Alex Hajigeorgieva
Telerik team
 answered on 25 Jan 2019
2 answers
249 views

I have a RadGrid that's losing the ability to sort columns by clicking the column header. I've narrowed it down to some code in my ItemDataBound method that updates the header text. If I remove this code, clicking the column headers works properly. But when I put it back, sorting is disabled. 

Here's my grid:

<telerik:RadGrid ID="RadGrid1" runat="server"
    AllowSorting = "true"
 
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnItemDataBound="RadGrid1_ItemDataBound"
    OnPreRender="RadGrid1_PreRender"
     
    RenderMode="Classic"
    Skin="Windows7">
</telerik:RadGrid>

 

Here's my ItemDataBound method:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) {
    if (e.Item is GridHeaderItem) {
        GridHeaderItem header = (GridHeaderItem)e.Item;
        header["MONTH_NAME_LONG"].Text = "Month";
    }
}

 

Any idea why this is happening?

bdrennen
Top achievements
Rank 1
 answered on 23 Jan 2019
4 answers
1.2K+ views

Hello,

I have an application that has many different tables that need to be presented to the user - some of these have over 200k rows of data.

We currently use a very bad and basic search feature, along with .skip(x), .take(x) to only get a certain amount of data per page.

What I do above works, but lacks more advanced filtering.

I'm currently evaluating and looking at grid, but, I am very confused - it supports paging and by increasing the sample app to return 200k items, I can see through network monitoring that it only pulls the single page at a time, however, I'm getting lost trying to evaluate this product...

... The docs don't seem to go in to that much details and the demos page seems to be better, but neither give any information about performance tuning, limiting the result set and similar - I'm worried that if I link this to the live data, I'm going to introduce a lot of problems.

Are there any other documentation bits that I am missing?

Georgi
Telerik team
 answered on 23 Jan 2019
3 answers
851 views

1.when i change the Brower width, the text auto wrap and the row height grow. I want to set the text not wrap(see attachment), how can I do that.

2.I want to set text wrap in edit mode, how can I do that?

 

Viktor Tachev
Telerik team
 answered on 22 Jan 2019
3 answers
935 views

I am attempting to call a function in the controller when the Destroy button is clicked on a row. The controller will then delete the record in the database. I also need to pass in the ID of the employee to identify which record in the database to delete. Thank you!

This is what I have:

@(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.EmployeeViewModel>()
    .Name("grid")
    .ToolBar(toolbar => toolbar.Create().Text("ADD").HtmlAttributes(new { title = "Add Employee" }))
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeName);
        columns.Bound(p => p.Active);
        columns.Command(command =>
        {
            command.Destroy().HtmlAttributes(new { title = "Delete Highlighted Employee" });
        }).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:450px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Employee_Read", "Grid"))
        .Destroy(update => update.Action("Employee_Delete", "Grid"))
    )
)
Mark
Top achievements
Rank 1
 answered on 21 Jan 2019
2 answers
135 views

.Net Core 2.1,the cshtml

@using Kendo.Mvc.UI
@(Html.Kendo().Grid<Liwb.Entities.Travel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Pos);
        columns.Bound(p => p.IsDelete);
        columns.Bound(p => p.From);
        columns.Bound(p => p.To);
        columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.IntervalDays);
        columns.Bound(p => p.TrafficType);
        columns.Bound(p => p.PhotographDirectory);
        columns.Bound(p => p.ProblemDocument);
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Destroy(); // The "destroy" command removes data items.
        }).Title("Commands").Width(200);
    })
    .Editable(editMode => editMode.Mode(GridEditMode.InLine))
    .Pageable()
    //.Sortable()
    .Scrollable()
    //.Filterable()
    .HtmlAttributes(new { style = "height:100%; width:100%" })
    .DataSource(dataSource => dataSource
        .WebApi()
        .Model(Model => { Model.Id(p => p.ID);})
        .Events(events=>events.Error("error_handler"))
        .Read(read => read.Action("Get", "Travel"))
        .Create(create => create.Action("Post", "Travel"))
        .Update(update => update.Action("Put", "Travel", new { id = "{0}" }))
        .Destroy(destory => destory.Action("Delete", "Travel", new { id = "{0}" }))
    )
)

the api controller
namespace PlantManagement.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TravelController : ControllerBase
    {
        private readonly PlantManagementDbContext _context;
        public TravelController(PlantManagementDbContext context)
        {
            _context = context;
        }
        //MVC return Value: ActionResult
        // GET: api/Travel
        [HttpGet]
        //public IEnumerable<Travel> GetTravels()
        public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
        {
            return _context.Travels.ToDataSourceResult(request);//.Where(p => p.PID == null)
        }
        // GET: api/Travel/5
        [HttpGet("{id}")]
        public async Task<IActionResult> Get([FromRoute] long id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            var travel = await _context.Travels.FindAsync(id);
            if (travel == null)
            {
                return NotFound();
            }
            return Ok(travel);
        }
        // PUT: api/Travel/5
        [HttpPut("{id}")]
        public async Task<IActionResult> Put([FromRoute] long id, [FromBody] Travel travel)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            if (id != travel.ID)
            {
                return BadRequest();
            }
            _context.Entry(travel).State = EntityState.Modified;
            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!TravelExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return NoContent();
        }
        // POST: api/Travel
        [HttpPost]
        public async Task<IActionResult> Post( Travel travel)//[FromBody]
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            _context.Travels.Add(travel);
            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateException)
            {
                if (TravelExists(travel.ID))
                {
                    return new StatusCodeResult(StatusCodes.Status409Conflict);
                }
                else
                {
                    throw;
                }
            }
            return CreatedAtAction("GetTravel", new { id = travel.ID }, travel);
        }
        // DELETE: api/Travel/5
        [HttpDelete("{id}")]
        public async Task<IActionResult> Delete([FromRoute] long id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            var travel = await _context.Travels.FindAsync(id);
            if (travel == null)
            {
                return NotFound();
            }
            travel.IsDelete = true;
            //_context.Travels.Remove(travel);
            await _context.SaveChangesAsync();
            return Ok(travel);
        }
        private bool TravelExists(long id)
        {
            return _context.Travels.Any(e => e.ID == id);
        }
    }
}

Tsvetomir
Telerik team
 answered on 21 Jan 2019
1 answer
1.7K+ views

Hi there,

I am using a simple Kendo grid which contains a pop up form to allow a user to either add or delete new "categories" (many) for one product.

popup

@using KendoGridOneToMany.Models
 
@(Html.Kendo().Grid<ProductModel>()
                        .Name("persons")
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(m => m.Id))
                            .Read(read => read.Action("GetProducts", "Home"))
                            .Update(up => up.Action("UpdateCategory", "Home"))
                            .Create(x => x.Action("CreateProduct", "Home"))
                    )
                    .ToolBar(x => x.Create())
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.Id).Width(200);
                        columns.Bound(c => c.Type);
                        columns.Bound(c => c.DisplayCatogories);
                        columns.Command(cmd => cmd.Edit());
                    })
                    .Events(ev => ev.Edit("addDeleteButton"))
                    .Pageable()
                    .Sortable()
            .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PopUpView"))
)

I have altered the pop up to contain an additional "delete" button. As this extra button is not supported by the grid's inbuilt update function, I have used AJAX to capture data within the pop up held in a form and return it to the controller's separate "delete" method.

The pop up form code is contained on a partial view that looks like so:

@model ProductModel
<div>
<fieldset id="popUpForm">
    <dl>
        <dt>
            @Html.HiddenFor(m => m.Id)
            @Html.ValidationMessageFor(m => m.CategoryId)
 
        </dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.CategoryId).AutoBind(false).OptionLabel("Select Category...").DataTextField("Name").DataValueField("Id").DataSource(dataSource =>
                                                  { dataSource.Read(read => read.Action("GetCategories", "Home")).ServerFiltering(true); }))
        </dd>
    </dl>
</fieldset>

And just for reference, the "Product" model like so:

public ProductModel()
{
   public int Id { get; set; }
 
   public string Type { get; set; }
 
   public int CategoryId { get; set; }
 
   public ICollection<CategoryModel> Categories { get; set; }
 }

I've added the delete button by using the grid's edit event to add the button dynamically via JavaScript:

function addDeleteButton(e) {
    $('<a class="k-button k-button-icontext k-grid-delete custom"
    href="\\#"k-icon k-i-delete"></span>Delete</a>').insertAfter(".k-grid 
     -update");
    $('.k-window-title').text("Edit Categories");
    $(".custom").click(function (e) {
        e.preventDefault();
        var formContainer = $("#popUpForm");
        SubmitInfo(formContainer);
    });
}

 

So, when the user selects a category, they have the option to either add or delete a category from the selected "product". However, where "add" is handled by Kendo, I need to handle delete using AJAX.

The delete button is linked to the following JavaScript.

function SubmitInfo(formContainer) {
    var grid = $("#persons").data("kendoGrid"),
        parameterMap = grid.dataSource.transport.parameterMap;
    var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
    $.ajax({
        url: '@Url.Action("Delete", "Home")',
        type: "POST",
        dataType: "JSON",
        data: data + "&" + formContainer.serialize(),
        success: function (result) {
               // Clear the input tags
                formContainer.find("input[type='text']").each(function (i, element) {
                    $(this).val('');
                });
                $('#persons').data('kendoGrid').dataSource.read();
                $('#persons').data('kendoGrid').refresh();
            }
        }
    });
}

 

And the corresponding Controller method like this:

[HttpPost]
   public Void Delete([DataSourceRequest] DataSourceRequest request, ProductModel product)
    {
        var productModel = siteRepository.GetProductById(product.Id);
        var categoryToRemove = productModel.Categories.SingleOrDefault(r => r.Id == product.CategoryId);
        if (categoryToRemove != null)
        {
            product.Categories.Remove(categoryToRemove);
            siteRepository.UpdateProduct(product);
        }
    }

 

This works pretty well at posting back the required Id from the desired Category, but I am unable to persist the Product ID back to the controller required to know from which product to remove the selected category from. This is despite including the relevant @Html.HiddenFor(m => m.Id) in the pop up form.

Error

Would anyone know the best way to persist that piece of data from my pop up form to my controller?

 

Tsvetomir
Telerik team
 answered on 18 Jan 2019
2 answers
113 views
How is that handled?  Binding to a column that is a nullable date time?
Reid
Top achievements
Rank 2
 answered on 18 Jan 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
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
Iron
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?