Telerik Forums
UI for ASP.NET Core Forum
2 answers
1.4K+ views

Is there a template for columns.Command(command => command.Custom(template).Click("showDetails")).Width(45);

I want to show button with Icon instead of text.

Thanks

Ryan
Top achievements
Rank 1
 answered on 26 Feb 2020
1 answer
137 views

I have separated a timestamp in my model so that I can get a good filtering experience in the grid. However, the filtering mechanism for the Time column remains the calendar.  How do I set this to filter using a time picker?  Also, as defined I expected there to be no filter for the Time column.  But, there is one.  How do I turn off the filter of this column if it shows even with no definition?

 

@(Html.Kendo().Grid<Session>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(command => command
            .Custom("Detail")
            .Click("goDetail"))
            .Width(Glossary.Portal.ButtonWidth);
        columns.Bound(p => p.Device.Name).Title("Device")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                .ShowOperators(false)
                .SuggestionOperator(FilterType.Contains)));
        columns.Bound(p => p.Date).Title("Date").Format("{0:MM/dd/yyyy}")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")
                .ShowOperators(false)));
        columns.Bound(p => p.Time).Title("Time").Format("{0:hh:dd:mm tt}");
 
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .HtmlAttributes(new { style = "height:596px;" })
    .Selectable()
    .Navigatable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("IndexJson", "Sessions")
    .Data("getData"))))
 
<script>
 
function getData() {
    return @Html.Raw(Model.GetIndexData());
}
 
function goDetail(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var url = '@Url.Action("Details", "Sessions")?id=' + dataItem.Id + '@Model.GetUrlParameters()';
    // Replace & with & as the above encoding step changes & to &.
    window.location.href = url.replace(/&/g, "&");
}
 
function error_handler(e) {
    if (e.errors) {
        var message = "Errors:\n";
        $.each(e.errors,
            function(key, value) {
                if ('errors' in value) {
                    $.each(value.errors,
                        function() {
                            message += this + "\n";
                        });
                }
            });
        alert(message);
    }
}
</script>
Georgi
Telerik team
 answered on 26 Feb 2020
3 answers
592 views
@(Html.Kendo().Grid(Model)
                            .Name("GridOrders")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.Barcode).ClientTemplate("<a href='https://fisherbioservicesdev.platformforscience.com/sprint2demo/corelims?cmd=get-barcode&headerBarcode=#=Barcode#&headerEntityType=0' target=_blank>#=Barcode#</a>"); ;
                                columns.Bound(p => p.FBS_KITREQUEST_REQUESTEREMAIL);
                                columns.Bound(p => p.FBS_KITASREQ_STATUS);
                                columns.Bound(p => p.SiteName);
                                columns.Bound(p => p.FBS_KITREQUEST_DATEREQUESTED).ClientTemplate("#= FBS_KITREQUEST_DATEREQUESTED? kendo.toString(kendo.parseDate(FBS_KITREQUEST_DATEREQUESTED, 'yyyy-MM-ddTHH:mm:ssZ'), 'MM/dd/yyyy'): '' #");
                                columns.Command(command => command.Custom("Details").Click("detailsRedirect")).Width(150);
                            })
                            .ToolBar(t => t.Search())
                            .Pageable()
                            .Navigatable()
                            .Sortable()
                            .Filterable()
                           
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .PageSize(20)
                                .ServerOperation(false)
                                .Events(events => events.Error("error_handler"))
 
                            )
 
)

 

This is what my code looks like. Attached is what is displayed.It is not showing a search box. What am I doing wrong?

Nikolay
Telerik team
 answered on 26 Feb 2020
5 answers
101 views

Note:  It seems your forum no longer has formatting options for pasting code.

 

I have an odd behavior where I can't pass a String value from my model to the JavaScript behind the Grid.  I pass int? values without issue but Strings do not pass. 

This works fine:

var customerId = Number(@Model.CustomerId);

This does not work:

var uniqueId = @Model.CustomerUniqueId;

var uniqueId = String(@Model.CustomerUniqueId);

My full grid and scripts:

@(Html.Kendo().Grid<Person>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Command(command => command
                          .Custom("Detail")
                          .Click("goDetail"))
                          .Width(Glossary.Portal.ButtonWidth);
                        columns.Bound(p => p.FirstName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.LastName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                    .HtmlAttributes(new { style = "height:550px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Persons")
                        .Data("getData"))
              ))

        <script type="text/javascript">

            var customerId = Number(@Model.CustomerId);
            var customerInfoId = Number(@Model.CustomerInfoId);
            var groupId = Number(@Model.GroupId);
            var sessionId = Number(@Model.SessionId);
            
            function getData() {
                return {
                    customerId: customerId,
                    customerInfoId: customerInfoId,
                    groupId: groupId,
                    sessionId: sessionId
                };
            }

            function goDetail(e) {
                e.preventDefault();
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                window.location.href = '@Url.Action("Details", "Persons")?id=' + dataItem.Id + '&customerId=' + customerId + '&customerInfoId=' + customerInfoId + '&groupId=' + groupId + '&sessionId=' + sessionId;
            }

            function error_handler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors,
                        function(key, value) {
                            if ('errors' in value) {
                                $.each(value.errors,
                                    function() {
                                        message += this + "\n";
                                    });
                            }
                        });
                    alert(message);
                }
            }
        </script>

 

Silviya Stoyanova
Telerik team
 answered on 24 Feb 2020
1 answer
451 views

Hi, I am having an odd problem.

I am using a DateTimePicker in a popup template for a grid.

When I go to edit a record, for the very first time, and the popup comes up, the DateTimePicker does not display the time right and neither of the 2 buttons on the right appear. There is a box displayed, but that's it. No calendar or time dropdown available.

However, if I close the template popup and reopen it  for the current or any other record it works as advertised.

Any ideas?

Thanks … Ed

 

Tsvetomir
Telerik team
 answered on 24 Feb 2020
1 answer
520 views

I'm very interested in this new FileManager to potentially navigate through thousands of photographs stored on Azure Blobs.  

1) Will the Preview Pane display thumbnails of images?  Or just glyphs of the file types?

2) Anyone tried it with Azure Blobs yet?  There is a rudimentary folder structure possible, but I've not tried it yet.  Wondering if anyone else has.

Ivan Danchev
Telerik team
 answered on 21 Feb 2020
1 answer
2.1K+ views
Hi im having exactly this issue here and im unable to run the command listed there any help about this?
Ivan Danchev
Telerik team
 answered on 21 Feb 2020
11 answers
200 views

I am not sure why, but when I use DataUrlField, the subMenu refuses to close and stays open.

I even tried forcing the issue by using CloseOnClick(true). If I comment out the DataUrlField, then the menu works as I would expect, closing on click, or if I set it to CloseOnClick(false) it stays open as expected.  As soon as I add the DataUrlField it seems to force the CloseOnClick to false.  

 

Any ideas what I might be doing wrong, or a workaround?

 

Here is the snippet:

@(Html.Kendo().Menu()
               .Name("absMenu")
               .DataTextField("Label")
               .DataSource(ds => ds.Read("GetNavMenus", "NavMenus")
               .Model(model => model.Children("hasChildren")))
               .Orientation(MenuOrientation.Vertical)
               .CloseOnClick(true)
               .HighlightPath(false)
               .Animation(a => a.Open(o => o.SlideIn(SlideDirection.Right).Duration(100)))
               //.DataUrlField("Action")
               )
Jerome
Top achievements
Rank 1
 answered on 21 Feb 2020
3 answers
936 views

In my current grid definition (below) below the <script type="text/javascript"> line, I go through and define some variables in the JavaScript that are populated from Properties in my Model.  This works for me but I would like to refactor the code to be more simple.  

Refactor 1:

I would like to pull the values directly from my model so it is just a single call.  What kind of object do I return from my @Model.GetDataValues() method that would satisfy the Grid.DataSource.Data call?

            function getData() {
                return @Model.GetDataValues();
            }

Refactor 2:

What would even be cleaner is to not call the JavaScript function at all.  What kind of object do I return from my @Model.GetDataValues() method that would satisfy the Grid.DataSource.Data parameter directly?

                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data(@Model.GetDataValues()))

My Grid Definition:

        @(Html.Kendo().Grid<Person>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Command(command => command
                          .Custom("Detail")
                          .Click("goDetail"))
                          .Width(Glossary.Portal.ButtonWidth);
                        columns.Bound(p => p.FirstName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.LastName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                    .HtmlAttributes(new { style = "height:550px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data("getData"))
              ))

        <script type="text/javascript">

            var customerId = Number(@Model.GetValue(Glossary.Models.Customer.Keys.Id));
            var customerUniqueId = '@Model.CustomerUniqueId';
            var groupId = Number(@Model.GetValue(Glossary.Models.Group.Keys.Id));
            var sessionId = Number(@Model.GetValue(Glossary.Models.Session.Keys.Id));
            var personId = Number(@Model.GetValue(Glossary.Models.Person.Keys.Id));

            function getData() {
                return {
                    customerId: customerId,
                    customerUniqueId: customerUniqueId,
                    groupId: groupId,
                    sessionId: sessionId,
                    personId: personId
                };
            }

...

 

Joel
Top achievements
Rank 3
Bronze
Iron
Iron
 answered on 20 Feb 2020
1 answer
126 views

Hi,

we have an issue with KendoMultiSelect get unusable after an modal KendoWindow was opened on top of the page that contains multi select control. All the data are there, values are still selected, but control is unusable - you cannot open the dropdown to select new values.

We are using 2017.3.913 version.

Kind regards
Paul

Paul
Top achievements
Rank 1
 answered on 20 Feb 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?