Telerik Forums
UI for ASP.NET MVC Forum
9 answers
1.2K+ views

Hi,

 

I currently have a grid with InCell editing and batch updates enabled using MVC calls.

On this grid I have 2 columns which have drop down lists as a client template which displays data depending on what values are on the row.

 

Due to this, I am using AJAX binding for the drop down lists and value mappers.

 

Everything is working fine with one smallish bug when editing the cells.

I currently have an issue where if you sometimes double click or quickly click on the drop down list cells, the selection shows up as "undefined".

The control loads if you click it, and you can select items, but as soon as you click out, the text returns to "undefined".

 

When you try to save the changes, the property is passed through as null.

 

Because I need to have dynamic data on the drop down lists, I can't return hard coded values using the ViewBags as shown on the demoes.

 

What I've tried doing is to see if I can create an artificial delay on the grid events (BeforeEdit, Edit, CellClosed) but this has been no use as the cell loses focus as soon as you click somewhere else.

 

Is there some error that's occurring in the Kendo Javascript files which can be tweaked or to add some sort of delay to allow the drop down to load?

Or is there any way to prevent the "undefined" error from binding a null object until you cancel?

If the controls can just correctly bind after you get the "undefined" error would be good as well.

 

 

Thanks

Tsvetomir
Telerik team
 answered on 30 Jun 2020
1 answer
249 views
Hi Friends,

I facing some issue while binding the data with kendo grid

Aim : I want to call different action methods on radio button (s) selection (not kendo radio buttons) selection , my controller action will fetch the data from DB and return through Json. and binding the kendo grid with the resulted data

Issue : controller action is not being invoked.on second radio button selection 

below are my code bits

.cshtml 

switch (TempData["redirect"].ToString())
            {
                case "All": //
                    actionName = "ABC";
                    break;
                case "CurrentUser": // 
                    actionName = "XYZ";
                    break;
                 default:
                 actionName = "PQR";
                    break;
            }

 <label class="control-label font-weight-bold rumaila-label">All Users: </label>
            <input checked="checked"
                   id="radio"
                   name="radio"
                   type="radio"
                   value="All" 
                   onchange="radioButtonSelected()"
                  />
            <label class="control-label font-weight-bold rumaila-label ml-3">Current User: </label>
            <input 
                   id="radio"
                   name="radio"
                   type="radio"
                   value="CurrentUser" 
                   onchange="radioButtonSelected()"
                  />

.Read(read => read.Action(actionName(getting dynamically through tempdata), "controller name").Data("radioButtonSelected"))

function radioButtonSelected() {
        return {
            id: $("input:radio[name=radio]:checked").val()
        };

below Jquery to send the control to action method to get the actionName(same name will be used above in the grid) 

 $('input[type=radio][name=radio]').change(function() {
        if (this.value == 'All') {
            $.post('@Url.Action("ActionMethod", "Controller", new {id = "All" })', function( data ) {
            });
        }
        else if (this.value == 'CurrentUser') {
            $.post('@Url.Action("ActionMethod", "Controller", new {id = "CurrentUser" })', function( data ) {
            });
        }

.cs

public async Task<ActionResult> ActionName([DataSourceRequest]DataSourceRequest request)
        {
            DataSourceResult resultFinal = null;
            string url = "api/xyz";
            able to get the data from API --- through above url

            return Json(new
            {
                Data = resultFinal.Data,
                Total = resultFinal.Total,
                AggregateResults = resultFinal.AggregateResults,
                Errors = resultFinal.Errors,
            });
        }

unable to invoke the 2nd controller action based on radio selection , first action is being invoked , 2nd controlleraction method is also same as above but some logic change to get data
Plamen
Telerik team
 answered on 30 Jun 2020
1 answer
932 views

I have controls like text area ,Labelfor and  Kendo grid in the same page i need to export all the details to MS word and customize html in button click ,it will be good if it's provided in javascript function or jquery function.can anyone help on this.

 

Thanks

Mohammed

Ivan Danchev
Telerik team
 answered on 26 Jun 2020
1 answer
186 views

Is there a way to hide/change the URL in a sortable column header in an ajax grid and keep the sorting ability?

The URL is referring to the Read ajax action (with the sort direction)

Page URL: http://mysite/Incident?FacilityID=123
Header URL: http://mysite/Incident/Read?FacilityID=123&IncidentGrid-sort=IncidentSummaryFacilityTypes-asc

 

Users are right-clicking the column header URL and opening in new tab/window which causes an error because it's calling an ajax grid read method, not a full page method.

We want to keep the sorting but if possible change the URL so if opened in a new window it just reloads the same page. Our grid is setup using the ajax datasource read.Action and works fine other than this URL being visible/available for opening in new windows.

The sorting demo has a different datasource, but works how we'd like: https://demos.telerik.com/kendo-ui/grid/sorting
The column headers automatically link to the page, not to a different action.

 

A secondary option is can we disable right-click on just the column headers.

Dimitar
Telerik team
 answered on 25 Jun 2020
1 answer
2.3K+ views

Hi Telerik Family,

I have kendo upload and i'm uploading some image and video with  that . I need to check image width and height of image so than i can understand image is proper or not proper.

I checked you have "e.files[0].size" value for .Select() event but that is not useful for me.

 

What you suggest?

 

Thanks

Ivan Danchev
Telerik team
 answered on 25 Jun 2020
3 answers
386 views

Hi,

 

Any idea how to reset the theming to another thema (default) ?

 

Currently I'm using the 'material v2' theme

 

Best regards

Dimitar
Telerik team
 answered on 25 Jun 2020
7 answers
2.6K+ views
I've got this example and i want to change a numeric value with a string value using an enum. I've tried a few methods, like .ClientTemplate and .EditorTemplateName. How can i use an enum to format the rows? Here is a grid example:

@(Html.Kendo().Grid<TelerikAspNetCoreApp2.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight).EditorTemplateName("Test"); //This is the value to change
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName).Filterable(f => f.UI("shipName"));
                columns.Bound(p => p.ShipCity).Filterable(f => f.UI("shipCity"));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Pageable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

 

And this is the example enum

public enum Test
{
    zero = 0,
    one = 10,
    two = 20,
    three = 30,
    four = 40,
    five = 50
}

Suad
Top achievements
Rank 1
 answered on 24 Jun 2020
7 answers
1.8K+ views

Hi,

I have some problem displaying the grid pager buttons :

The 'next page' and 'last page' buttons are not always displayed on Chrome with the Material theme, and are not displayed on IE11 with the 2 themes.

 

I use last version on Kendo MVC 2919.1.115, and I downloaded the latest SASS version for Material and Default themes (via NPM)

The problem comes from the margin-left which is calculated with this formula in some cases:

$pager-numbers-margin: calc(
    #{add-three( 2 * $button-border-width, 2 * $button-padding-y, $button-line-height * 1em, 2)} +
    #{$pager-padding-x} +
    #{2 * $button-border-width}
) !default;

 

In Material Theme, $button-border-width=0 => Crash with Chrome and IE11

In Default Theme, $button-border-width=1px => Crash on IE11 (IE11 does not accept the use of several "calc", even the use of more than 2 terms in the "calc")

(see attached files)

 

Question : What makes my pager in k-pager-sm and not in k-pager?

 

 

Regards

Thierry

Preslav
Telerik team
 answered on 24 Jun 2020
3 answers
1.5K+ views
Hi ,

I am using the Filter row in my grid, it works fine if there are no client template. but if there are any client template it gives error.
@(Html.Kendo().Grid<Document>()
                        .SetDefaults()
                        .Name("gridDocuments")
                        .Groupable()
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .Events(x => x.DataBinding("OnDataBound").Edit("EditGrid"))
                        .Columns(columns =>
                        {
                            columns.Bound(x=>x.CategoryCode).Filterable(false).ClientTemplate(#=data.CategoryDescription#").EditorTemplateName("CategoryTypeMultiselect"); 
                            columns.Bound(x => x.AssetTag).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                            columns.Command(command =>
                            {
                                command.Edit().Text(" ").CancelText(" ").UpdateText(" ");
                                command.Custom("Del").Text("<span class='k-icon k-i-delete'></span>").Click("PageGridDelClicked");
                            }).Width("3%").HtmlAttributes(new { style = "text-align:center;background:#=RowColor#" });
                        })
                        .Selectable(selectable => selectable
                        .Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))
                        .Navigatable()
                        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                        .DataSource(dataSource => dataSource
                        .SetDefaults()
                        .PageSize(20)
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.AssetTag).Editable(false);
                            model.Field(p => p.CategoryType).Editable(true);
                        })
                        .Read(x => x.Action("GetSelectedData", "Assets", new { CacheKey = PageUID }).Data("getAssetId"))
                        .Update(x => x.Action("UpdateDocuments", "Assets", new { CacheKey = PageUID }).Data("getAssetId"))))
if i enable filter for Categorycode i am getting error.
Please suggest me how to use the Filter row when we have ClientTemplate in the column.
Tsvetomir
Telerik team
 answered on 24 Jun 2020
6 answers
818 views

I have kendo mvc grid and basically all functions are correct but when i try to export my excel from my grid it's downloading excel but hiding all columns results weirdly
Here my grid

@(Html.Kendo().Grid<Alerts>()
                .Name("grdWaterAlert").AutoBind(false)
                .HtmlAttributes("width: 100%;cellpadding:0;")
                .DataSource(d => d.Ajax().Read("GridWaterAlertBinding", "Dashboards"))
                .Columns(columns =>
                {
                    columns.Bound(e => e.BelIdent).Title("Id").Width("auto");
                    columns.Bound(e => e.StationCode).Title("Station Code").Width("auto");
                    columns.Bound(e => e.StationName).Title("Station Name").Width("auto");
                    columns.Bound(e => e.BelTarih).Title("DateTime").ClientTemplate("#= kendo.toString(BelTarih, 'MM/dd/yyyy') #").ClientGroupHeaderTemplate("DateTime" + ": #=  kendo.toString(value, 'MM/dd/yyyy') #").Width("auto");
                    columns.Bound(e => e.BelInsTime).Title("Alert Time").ClientTemplate("#= kendo.toString(BelInsTime, 'MM/dd/yyyy HH:mm tt') #").ClientGroupHeaderTemplate("DateTime" + ": #=  kendo.toString(value, 'MM/dd/yyyy HH:mm tt') #").Width("auto");
                    columns.Bound(e => e.BelTankId).Title("Tank ID").Width("auto");
                    columns.Bound(e => e.ProductCode).Title("Product Code").Width("auto");
                    columns.Bound(e => e.BelAlarm).Title("Alarm").Width("auto");
                    columns.Bound(e => e.BelTotCapacity).Title("Total Capacity").Width("auto");
                    columns.Bound(e => e.BelWaterVol).Title("Water Volume").Width("auto");
                })
                .ToolBar(toolBar =>
                {
                    toolBar.Excel().HtmlAttributes(new { @class = "btnexcel" }).Text(" ").IconClass("k-i-excel");
                    toolBar.Custom().Text((string)ViewData["ClearFilter"]).HtmlAttributes(new { @class = "k-button", id = "cleargrid", href = "#", onclick = "clearFiltersWaterLevel()" });
                })
                .Excel(excel => excel.FileName("WaterAlert.xlsx").Filterable(true))
                .Selectable()
                .Sortable()
                .AutoBind(false)
                .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
                .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                .ForString(str => str.Clear()
                .StartsWith((string)ViewData["Startswith"])
                .Contains((string)ViewData["Contains"])
                ))
                )
                .Groupable()
                .Scrollable(scrolling => scrolling.Height("100%"))
                .Resizable(config =>
                {
                config.Columns(true);
                })
                .Reorderable(config =>
                {
                config.Columns(true);
                })
                .ColumnMenu()
            )

 

How can i fix this?

 

Thanks

Adil
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 23 Jun 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?