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

Hello,

we configured our grid to be filterable by a filter row. Filter row support autocomplete, however the autocomplete's default filter operator is 'startswith'. Our requirement is, that the autocomplete's filter operator corresponds to the operator selected in the operator-dropdownlist (next to the input-field). I am trying to fullfill that requirement by adding a change-listener to the operator-dropdownlist, which does not work, because the change-event is not being triggered.

Here is my javascript-code for that purpose:

$('#mygrid .k-filter-row th').each(function () {
    var filterDropdown = $($(this).find('.k-dropdown-operator input')[0]).data("kendoDropDownList");
    filterDropdown.bind('change', function () {
        // this listener is not being triggered after selecting a new value
    });
});

 

Any ideas why?

Thanks in advance & best regards,

Dima.

Dima
Top achievements
Rank 1
 answered on 26 Jul 2018
1 answer
553 views

I have an autocomplete on a form. We are using jquery validation and I have discovered an issue that I don't know if it is kendo issue, jquery issue or my application issue.

The autocomplete field has a server validation and the form can load having the autocomplete field invalid. I have noticed that after the form is displayed in the browser the autocomplete is like this

<span tabindex="-1" class="k-widget k-autocomplete k-header input-validation-error form-control k-autocomplete-clearable k-state-default" role="presentation">
    <input name="AutoCompleteError" class="input-validation-error form-control k-input" id="AutoCompleteError" role="textbox" aria-disabled="false" aria-haspopup="true" aria-readonly="false" aria-owns="AutoCompleteError_listbox" aria-autocomplete="list" type="text" value="" data-role="autocomplete" autocomplete="off">
    <span tabindex="-1" title="clear" class="k-icon k-clear-value k-i-close k-hidden" role="button" unselectable="on"></span>
    <span class="k-icon k-i-loading" style="display: none;"></span>
</span>

Please noticed the input-validation-error on the span. The jquery is based on this and after I provide a valid value the jquery validation will remove all the dom structure because it does something like $('span.input-validation-error').text('').

Is the input-validation-error attached to autocomplete done by the .net core framework or done by the telerik framework? Can it be removed?

Neli
Telerik team
 answered on 25 Jul 2018
2 answers
132 views

I have a grid that successfully inserts and deletes, however, after I perform an insert the inline edit remains open. If I hit cancel it does not display the new data; I have to refresh the page to see it in the grid.

Here is my code:

<div class="k-grid">
    @(Html.Kendo().Grid<GasModel>()
                .Name("manageGasesGrid")
                .AutoBind(true)
                .Columns(columns =>
                {
                    columns.Bound(p => p.gasName).Title("Name");
                    columns.Bound(p => p.formula).Title("Formula");
                    columns.Bound(p => p.gasID).Title("ID").Hidden();
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(190);
                })
                .Events(e => e
                    .Edit("onEdit")
                )
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Sortable(sortable => sortable.SortMode(GridSortMode.MultipleColumn))
                .Filterable()
                .Reorderable(r => r.Columns(true))
                .ColumnMenu()
                .Scrollable(s => s.Endless(true))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id("gasID"))
                    .ServerOperation(false)
                    .Read(read => read.Action("Gases_ReadAsync", "Gas"))
                    .Create(create => create.Action("Gases_CreateAsync", "Gas", "gasData"))
                    .Update(update => update.Action("Gases_UpdateAsync", "Gas", "gasData"))
                    .Destroy(destroy => destroy.Action("Gases_DestroyAsync", "Gas", "gasData"))
                )
    )
</div>

 

<script>
 
    function gasData(e) {
        return {
            gasID: id,
            gasName: name,
            formula: gasFormula
        }
    }
    function onEdit(e) {
        var id = this.gasID
        var name = this.gasName
        var gasFormula = this.formula
    }
 
</script>
Catherine
Top achievements
Rank 1
 answered on 24 Jul 2018
2 answers
155 views

Hi,

How would one show the value of a cell in a popup editor template without making it editable? In other words it's just text, not a disabled widgit.

Thanks!

Catherine
Top achievements
Rank 1
 answered on 24 Jul 2018
3 answers
1.1K+ views

I have a grid on my page, as follows:

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

                                      .Name("choicesGrid")
                                      .Columns(columns =>
                                      {
                                          columns.Select().Width(50);
                                          columns.Bound(c => c.Name);
                                      })                         
                                      .Pageable(pageable =>
                                      {
                                          pageable
                                              .Input(true)
                                              .Numeric(false)
                                              .PageSizes(true)
                                              .PreviousNext(true);
                                      })
                                      .PersistSelection()
                                      .Sortable()
                        )

When I select rows and then go to a different page of results and then return back to the previous page, my selections are all cleared.  I have the PersistSelection option turned on for the grid. 

I have a grid on my page where Model.AllChoices is an IEnumerable of POCOs.

Any help in resolving this issue is greatly appreciated.

Thanks

 

Konstantin Dikov
Telerik team
 answered on 24 Jul 2018
1 answer
526 views

Hi,

 

The Telerik ASP.NET Core Grid custom validation example (https://demos.telerik.com/aspnet-core/grid/editing-custom-validation) defines a custom validation rule via the CustomValidationProductViewModel model and the productnamevalidation function.

However, the CustomValidationProductViewModel is not visible on the page. Could you please make the model available?

Kind regards

Viktor Tachev
Telerik team
 answered on 20 Jul 2018
4 answers
392 views

Hi there,

i am using a ForeignKeyEditor in the Grid like this

GridForeignKey.cshtml:

@model object

@(
        Html.Kendo().DropDownListFor(m => m)
            .Filter(FilterType.Contains)
            .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

This works however filtering is not working as expected.

If I use the above code the column displays *all* values and not the distinct values that are actually used.

Checking the documentation it states:

By default, the Grid internally matches the values collection in the column with the corresponding value field from the dataItem and creates a collection with the unique values for the filtering of the foreignKey column.

So why is this not working with the above code?

 

Hannes
Top achievements
Rank 1
 answered on 20 Jul 2018
1 answer
663 views
Hi

I'm not sure what am I doing wrong but I'm using Custom Datasoure (API) and adding an authorization header to the request made by the DataSource. Everything works fine but the problem is when the grid is empty I can't add a new row. I was advised to set Autobind(false) from this thread... if I set it to true add new row works fine but I get an Error 401 onload

@(Html.Kendo().Grid<Models.IdentityView>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.identityType).ClientTemplate("#=identityType.typename#").Width(120);
        columns.Bound(p => p.number).Width(120);
        columns.Command(command => { command.Destroy(); command.Edit(); }).Width(100);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Navigatable()
    .ColumnMenu()
    .AutoBind(false)
    .Sortable()
    .Scrollable(scr => scr.Height(800))
    .Reorderable(reorderable => reorderable.Columns(true))
    .DataSource(dataSource => dataSource
        .Custom()
        .PageSize(20)
        .Events(events => events
            .Sync("sync_handler"))
        .Schema(schema => schema.Model(m =>
        {
            m.Id(p => p.identityid);
            m.Field(p => p.identityType).DefaultValue(ViewData["defaultType"] as AdorReactUI.Models.TypeView);
        }))
        .Transport(transport =>
        {
            transport.Read(read =>
                 read.Url("/api/Identity/GetIdentityDetails)
                 .DataType("json")
                  .Type(HttpVerbs.Get)  );
 
            transport.Create(create =>
                create.Url("/api/Identity/post")
                .DataType("json")
               .Type(HttpVerbs.Post)
            .ContentType("application/json; charset=utf-8") );
            transport.ParameterMap("parameterMap");
        })
    )
)
For Passing a Token
$(function () {
    var grid = $("#grid").data("kendoGrid");
   
    grid.dataSource.transport.options.read.beforeSend = Token;
    grid.dataSource.transport.options.create.beforeSend = Token;
    grid.dataSource.transport.options.update.beforeSend = Token;
    grid.dataSource.transport.options.destroy.beforeSend = Token;
  
    grid.dataSource.read(); // make a DataSource read, which will now use the authorization header
  
    function Token(xhr) {
        xhr.setRequestHeader('Authorization', "my token");
    }
});
Tsvetina
Telerik team
 answered on 20 Jul 2018
4 answers
1.6K+ views

I have a Kendo grid that has 15 editable columns and I am currently using inline editing.  I also have a comments column that is only required if one of the other columns has changed its value.  How do I manage that with custom validation?  

In the example below, I am able to click into the row to begin editing.  However I only require the Comments field to be required if ColA,ColB,ColC are edited.I can see that the row has been changed by tying into the hasChanges of the dataSource on the grid, but how do I force the required attribute to be applied to the Comments field?

ColA    ColB    ColC    Comment
0           0         0 

 

                    var grid = $('#grid').data('kendoGrid');
                    var selectedRow = grid.dataItem('tr.k-grid-edit-row');
                    if (grid.dataSource.hasChanges()) {
                        debugger;
                        alert("there are changes");
                    }

Eyup
Telerik team
 answered on 19 Jul 2018
1 answer
188 views

Hello,

 

I'm trying to use localization for Grid and it's seem working only for DatePicker.

I use this in _layout and see attachment

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <environment include="Development">
        <!-- Lato font from Google webfonts -->
        <link href="https://fonts.googleapis.com/css?family=Lato:400,900,700,400italic" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link href="~/dist/css/charming-pro-green.css" rel="stylesheet" />
 
        <!-- Ajout pour Kendo ui -->
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
 
 
    </environment>
    <environment exclude="Development">
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
 
        <!-- Ajout pour Kendo ui -->
        <link rel="stylesheet"
              asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
              asp-fallback-test-class="k-common-test-class"
              asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
 
        <link rel="stylesheet"
              asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
              asp-fallback-test-class="k-theme-test-class"
              asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
    </environment>
</head>
<body class="bg-accent-2">
    <environment include="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <script src="~/dist/js/charming-pro.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        @* Place Kendo UI scripts after jQuery *@
        <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
        <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
        <script src="~/lib/kendo-ui/js/cultures/kendo.culture.en-CA.min.js"></script>
    </environment>
    <environment exclude="Development">
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    @RenderBody()
 
    <partial name="_CookieConsentPartial" />
    @RenderSection("Scripts", required: false)
</body>
</html>
<script type="text/javascript">
    kendo.culture("en-CA");
</script>
Rumen
Telerik team
 answered on 18 Jul 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?