Telerik Forums
UI for ASP.NET Core Forum
3 answers
684 views
In the Details Template of the Master Grid , in the first Tab Item grid , I have added a column id with ClientHeaderTemplate as a Check box .

When clicked on the checkbox the event is not triggered.


<script id="secattributes" type="text/kendo-tmpl">

    @(Html.Kendo().TabStrip()
     .Name("tabStrip_#=SecurityMasterId#")
     .SelectedIndex(0)
     .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
     .Items(items =>
     {
     items.Add().Text("Security Attributes").Content(@<text>

                   @( Html.Kendo().Grid<CoreMaster.Models.SecurityAttributeView>()
                  .Name("securityMaster_#=SecurityMasterId#")
                  .ToolBar(toolbar =>
                  {
                      toolbar.Create().Text("Add new Attribute");
                  })
                  .Editable(editable =>
                  {
                      editable.Mode(GridEditMode.PopUp).TemplateName("secattribute");
                  })
                  .Columns(cols =>
                  {

//This Check box event is not triggered

                      cols.Bound(y => y.Id).ClientHeaderTemplate("<label><input id='myId' type='checkbox' value='#= getAllData #' onchange='getAllRecords(#=id#)'>Display all records</label>");
                      cols.Bound(y => y.Name).Title("Name");                 
                  })
                  .DataSource(dataSource => dataSource
                  .Ajax().ServerOperation(true).PageSize(10)
                  .Model(model =>
                  {
                      model.Id(p => p.Id);                    
                  })                  
                  )
                  .Sortable()
                  .Pageable(p => p.Enabled(true)).Events(e => e.Edit("onEditGrid")) .ToClientTemplate() ) </text>);
Tsvetomir
Telerik team
 answered on 16 Apr 2020
4 answers
626 views

I have the scheduler set to timelinemonth view.  I would like to create events in the scheduler by simply clicking on the day for a particular attendee.  I cant find a way to create the event programmatically without showing the dialog.  Unfortunately the "add event" method simply shows the dialog. 

I can call the create method in the controller from jquery but then I would have to refresh the page to show the new data.  

Nencho
Telerik team
 answered on 16 Apr 2020
5 answers
206 views

I have a multi-step UI that requires the user select a group from a TreeList.  That group selection must then be used to feed into a Grid that is populated by People that are in that selected Group.

How do I do this?  I've been using the PanelBar up to this point to perform multi-step processes.  However, I've never had to base the data selection in step 2 with the selection from step 1.  Can I late bind the Grid so it will go get its data when the host Tab is selected?

Nencho
Telerik team
 answered on 16 Apr 2020
4 answers
904 views

Hi,

We recently updated our .NET Core web app from Kendo UI v2019.3.1023 to Kendo UI v2020.1.219. The kendo.bootstrap-v4.min.css file contains a change that produces some fairly drastic jitter and row height changes in editable grids with custom ClientTemplates:

.k-grid .k-command-cell, .k-grid .k-edit-cell, .k-grid .k-grid-edit-row td {
    padding: calc(.75rem - (1.5em + .75rem + 2px - 1.5em)/ 2) .75rem
}

 

I have confirmed the issue is in the above css by removing it and observing that editable grid rows don't jitter and change height when you click on an editable cell. Is this a bug or was this an intended change in behaviour? What is the best / easiest way to completely remove this behaviour? There is nothing special about the grid other than the checkbox ClientTemplate:

@(Html.Kendo().Grid(Model.Create)
            .Name("CreateGrid")
            .Navigatable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Events(events => events.Edit("OnCreateGridEdit"))
            .Columns(columns => ...

Kind regards,

David

Ivan Danchev
Telerik team
 answered on 09 Apr 2020
1 answer
207 views
Can the DatePicker animation be disabled using the TagHelper? I tried adding an animation="false" attribute but had to revert to using @Html.Kendo().DatePicker() before it would disable the open/close animation.
Nikolay
Telerik team
 answered on 09 Apr 2020
3 answers
1.5K+ views

Hello,

 

When I call the following javascript API:

1.var grid = $('#Results').data('kendoGrid');
2.var ds = grid.dataSource;
3.var parameters = ds.transport.parameterMap({ sort: ds._sort, page: ds._page }, "read");

then I get an output like this:

{"sort":"Name-asc~Email-desc","page":2,"group":"","filter":""}

 

Is there any way (.net core or javascript) to pass the string "Name-asc~Email-desc" to the grid (or the datasource or any related objects) in order to apply the sorting ?

Thanks a lot!

Alex Hajigeorgieva
Telerik team
 answered on 09 Apr 2020
1 answer
169 views

Visual Studio 2019, Kendo 2020.1.219, Net Core 3.1

I am trying to use a tag template to display the number of items selected rather that displaying the selected items.  The multiselect gets the data correctly but when I select an item in the list I get an error saying 'values' is undefined.  If I remove values it says maxTotal is undefined.  Any idea what I am doing wrong or missing?

    @(Html.Kendo().MultiSelect()
        .Name("SBN")
        .DataTextField("Text")
        .DataValueField("Value")
        .Placeholder("Select SBN...")
        .TagTemplateId("SBNTagTemplate")
        .TagMode(MultiSelectTagMode.Multiple)
        .AutoClose(false)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("SBNMultiSelect_Read", "Report");
            })
            .ServerFiltering(true);
        })
    )

<script id="SBNTagTemplate" type="text/x-kendo-template">
    #:values.length# out of #:maxTotal#
</script>

 

Head element from  _Layout.cshtml:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="~/js/site.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.aspnetmvc.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
    <link href="~/css/site.css" rel="stylesheet" />
</head>

Martin
Telerik team
 answered on 08 Apr 2020
1 answer
326 views

Hi,

I have:

columns.Bound(t => t.IsActive).Width(45)

 

.ClientTemplate("#=dirtyField(data,'IsActive')# <input type='checkbox' #=IsActive ? checked='checked':'' # ;/>")

.HtmlAttributes(new { style = "text-align:center; " });

 with the following javascript which, I believe I got from Telerik

function dirtyField(data, fieldName)
{
    var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
    if (data.dirty && data.dirtyFields[fieldName] && hasClass)
        return "<span class='k-dirty'></span>";
    else
        return "";
}

 

It works great if I click on the cell first and then check/uncheck the checkbox.

However, if I click directly on the checkbox it doesn't flag it as dirty and the changes are not saved.

Can someone point me in the right direction?

Thanks … Ed

 

 

 

Viktor Tachev
Telerik team
 answered on 06 Apr 2020
2 answers
200 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
208 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?