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

We are seeing an issue where the Change event for Grid is firing as if it was the Databind event.  We get a console log event on load and when we filter the grid to cause another bind, but not when I click select on a row.  I want to redirect to a details page for that row when the user clicks.

<div class="ci-body-grid">
    @(Html.Kendo().Grid<OrderViewModel>()
        .Name("gridMain")
        .Columns(columns => {
            columns.Bound(e => e.OrderID).Filterable(false);
            columns.Bound(e => e.Freight);
            columns.Bound(e => e.OrderDate).Width(120).Format("{0:MM/dd/yyyy}");
            columns.Bound(e => e.ShipName).Width(260).Filterable(filterable => filterable.Cell(cell => cell.Operator("contains").ShowOperators(false)));
            columns.Bound(e => e.ShipCity).Width(150);
        })
        .Excel(excel => {
            excel.AllPages(true);
            excel.FileName("Users.xlsx");
        })
        .ToolBar(toolbar => { toolbar.ClientTemplateId("tmpGridToolbar"); })
        .Pageable(pageable => pageable.Refresh(true).Numeric(false).PreviousNext(false))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
        .Navigatable()
        .Mobile()
        .Resizable(resize => resize.Columns(true))
        .ColumnMenu()
        .Sortable()
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Filterable(filterable => filterable.Mode(GridFilterMode.Row))
        .DataSource(dataSource => dataSource
        .Custom()
        .Events(events => events.Change("gridMain_OnChange").Error("error_handler"))
        .Type("odata")
        .Transport(transport =>
            transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"))
        )
        .PageSize(100)
        .ServerPaging(true)
        .ServerSorting(true)
        .ServerFiltering(true)
    ))
</div>
 
<script id="tmpGridToolbar" type="text/x-kendo-template">
    <span class="ci-header-grid">Users</span>
    <div class="k-float-right k-display-inline-block">
        @(Html.Kendo().Button().Name("btnExport").Icon("file-excel").Content("Export").Events(evt => evt.Click("exportGrid")).ToClientTemplate())
    </div>
</script>
 
@section Scripts {
    <script>
        function exportGrid() {
            $("#gridMain").data("kendoGrid").saveAsExcel();
        }
        function resizeGrid() {
            $("#gridMain").data("kendoGrid").resize();
        }
        $(window).resize(function () {
            resizeGrid();
        });
        function gridMain_OnChange(arg) {
            var test = "";
            console.log(this);
            //var selected = $.map(this.select(), function (item) {
            //  return $(item).text();
            //});
            //console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
        }
    </script>
}

n/a
Top achievements
Rank 1
 answered on 06 Apr 2020
2 answers
201 views

I have modified the below code to add my own title row to Excel.

But, as you see in my screen shot, the column filters were added to the title row instead of the actual data row.

How can I have the column filters on the data row?

https://dojo.telerik.com/ekuDetoX/2

Alex Hajigeorgieva
Telerik team
 answered on 06 Apr 2020
11 answers
2.2K+ views

I'm trying to follow the most basic example of a binding to remote data for the dropdownlist.  I am using the following code but when I run the page, I get the image shown below.  I am supposed to have 4 results, and if I step through the EF code, I can see it pulling the proper results back.  What am I doing wrong?

Code Behind

public JsonResult GetRegions()
        {
            //Get Distinct Regions and put into a Select List
            List<StationRegionLookup> distinctItems = new List<StationRegionLookup>();
            distinctItems = (from d in _context.StationRegionLookup
                             select d).ToList()
                .GroupBy(x => x.Region)
                .Select(x => x.First()).ToList();
            return new JsonResult(distinctItems);
        }

 <div class="demo-section k-content">
        <h4>Regions</h4>
        @(Html.Kendo().DropDownList()
                  .Name("regions")
                  .DataTextField("Region")
                  .DataValueField("Region")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetRegions", "DropDownList");
                      });
                  })
                  .HtmlAttributes(new { style = "width: 100%" })
        )
    </div>

 

 

 

 

 

majed
Top achievements
Rank 1
 answered on 03 Apr 2020
2 answers
1.0K+ views

The checkbox works fine until it is replaced through an Ajax call which returns a partial view.

Afterwards the click event is still fired but the checkbox does not show as checked.

If I remove the classes "k-checkbox" and "k-checkbox-label" from the input and label it works just fine.

html-partial view

<input id="@Model[i].DefinitionName" asp-for="@Model[i].IsRequired" class="k-checkbox" type="checkbox" onclick="ToggleRelatedGLSegmentComboBox()" />
        <label for="@Model[i].DefinitionName" class="k-checkbox-label" style="width:15em;">@Model[i].BusinessName</label>

c#

return PartialView("_PartialViewName", model);

js

$.ajax(
            {                
                success: function (html) {
                    glPartialDiv.html(html);
                },                
            });
jovaughn
Top achievements
Rank 1
Iron
 answered on 02 Apr 2020
29 answers
1.1K+ views

The documents and demo for the grid tag helpers are appalling, the example tag helper is so basic that it's practically useless.

How can you release new functionality and not bother to add the relevant documentation and demos e.g a grid with full editing with  or incell examples?

Are we to guess?

 

Tsvetomir
Telerik team
 answered on 02 Apr 2020
1 answer
143 views

My requirements say that I must sort the items in the treelist alphabetically.  This includes the child nodes.  This control uses a "flat hierarchy" because it is a table with parent references.  When I sort the source data alphabetically it doesn't seem to change anything.  I need to short by Group.Name:

<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>
 
@(Html.Kendo().TreeList<Group>()
    .Name("treelist")
    .Columns(columns =>
    {
        if (!Model.GetBoolValue(Glossary.Models.Group.Keys.IsHideDetails))
        {
            columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").ClassName("detailButton").Click("goDetail"); }).Width(Glossary.Portal.ButtonWidth);
        }
 
        if (Model.GetBoolValue(Glossary.Models.Group.Keys.IsHideMeta))
        {
            columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(225);
        }
        else
        {
            columns.Add().Field(e => e.Name).TemplateId("icon-template");
        }
    })
    .DataSource(dataSource => dataSource
        .ServerOperation(false)
        .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentId);
            m.Expanded(true);
            m.Field(f => f.Name);
        }).Events(events => events.Error("onError"))
      ).Events(evt => evt.DataBound("treeListBound"))
)

 

 

Alex Hajigeorgieva
Telerik team
 answered on 02 Apr 2020
1 answer
3.2K+ views

Hi, I have an index page that I'm trying to implement a simple kendo grid

I have followed the instructions closely here: 

https://docs.telerik.com/aspnet-core/getting-started/getting-started

However I keep getting a problem of 'uncaught referenceerror kendo is not defined' on the client-side js

I have attached the relevant files.

 

Thanks in advance

 

 

 

Ivan Danchev
Telerik team
 answered on 01 Apr 2020
9 answers
1.5K+ views

Currently I have a grid that groups on a specific column of the data. The display looks just as desired. A template is used to display the grouping "header" like

.ClientGroupHeaderTemplate("Title: #= ...  # <br/>Description: #=... # <br/>Author: #= ... # <span class='badge badge-light'>#= ... #/#= ...  #</span>");I 

 

The problem is that when exporting to Excel this "header" along with the associated HTML is exported as well. I would like to somehow disable these extra header lines from appearing in the exported data? As an added bonus I would also like to remove the duplicates from the exported data.

 

Thank you.

 

Michael
Top achievements
Rank 1
 answered on 01 Apr 2020
3 answers
121 views

I posted this in another thread (https://www.telerik.com/forums/how-to-disable-a-dropdownlist-in-a-row-when-another-dropdownlist-chooses-a-value) if you need more background but this is a new issue I've encountered so it deserves it's own thread in case someone else runs into it.

I have a grid very similar to the one in this example where I am using 3 different client templates to populate and bind 3 drop downs in my grid:
https://demos.telerik.com/aspnet-core/grid/editing-custom

My dropdowns are:
Category
Department
Configuration

I got this all working perfectly but then the client wanted to make Department an editable dropdown (either choose an option, or add a new one on the fly) so I converted the Department dropdownlist to a combobox

I then wrote an ajax call to add the new item to the database:

//e is the Department combobox
function addDepartment(e) {
       var dept = new Object();
       dept.DepartmentID = 0;
       dept.DepartmentName = e.text();
  
       $.ajax(
       {
           url: '@Url.Action("AddDepartment", "Wizard")',
           type: 'GET',
           dataType: "json",
           data: dept,
           contentType: 'application/json; charset=utf-8',
           success: function (result) {
               console.log("success");
               //re-fetch the datasource so the combo has the newly added item in it with its new PK
               this.dataSource.read();
               //I tried forcing its selection like this but it didn't help
                  e.value(result.DepartmentID);
           }
           })
         console.log("dept added");
   }

 

Everything work the way it should, the record is saved to the db, the combobox has the newly added item selected but when you go to save the row, that newly added Department is not actually selected (you get an empty object posted to Controller). HOWEVER, if you first select another option from the Department combo then re-select the newly added item it 'sets' the state correctly to the new object and it gets posted to the Controller correctly. You can see in my script above I'm trying to force it to set the combo but that didn't work. Any ideas how to work around this?

 

 

 

Nikolay
Telerik team
 answered on 01 Apr 2020
1 answer
92 views
when i select a row in grid. it fire change event, but I re-select the same row. the change event fire too. how can i prevent the change event when i select the same row?
Nikolay
Telerik team
 answered on 01 Apr 2020
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?