Telerik Forums
UI for ASP.NET Core Forum
11 answers
429 views

 

Hi,

we use some grids where we have defined the filters that appear on the columns with:

.Filterable(ftb => ftb.Mode(GridFilterMode.Row)
                .Extra(true)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .Contains(String.Format(SharedLocalizer["lblGridFilterContains"].Value))
                        .StartsWith(String.Format(SharedLocalizer["lblGridFilterBeginsWith"].Value))
                        .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value)))
                    .ForNumber(num => num.Clear()
                        .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value))
                        .IsGreaterThan(String.Format(SharedLocalizer["lblGridFilterGreaterThan"].Value))
                        .IsLessThan(String.Format(SharedLocalizer["lblGridFilterLessThan"].Value))
                        )
                    .ForDate(date => date.Clear()
                        .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value))
                        .IsGreaterThan(String.Format(SharedLocalizer["lblGridFilterGreaterThan"].Value))
                        .IsLessThan(String.Format(SharedLocalizer["lblGridFilterLessThan"].Value))
                        )
                    )
            )

 

And it works great.

The problem is that when there are grouped columns it works in the "normal" columns but not in the grouped ones (it shows all the filters and not the ones we've defined).

The only way we have found to make it work in every column is to define again in the column that's grouped the filterable operator:

c.Group(group => group
            .Title(@SharedLocalizer["lblPaymentdiscountday2"].Value)
            .HeaderHtmlAttributes(new { groupname = "paymentsGrid_grp_skonto2" })            
            .Columns(skonto2 =>
            {
                skonto2.Bound(m => m.discountday_2).HtmlAttributes(new { style = "text-align: right;" }).Width(90)
                .Filterable(f => f
                    .Cell(cell => cell.Enabled(true).MinLength(100))
                    .Operators(op => op
                            .ForNumber(num => num.Clear()
                                    .IsEqualTo(String.Format(SharedLocalizer["lblGridFilterIsEqual"].Value))
                                    .IsGreaterThan(String.Format(SharedLocalizer["lblGridFilterGreaterThan"].Value))
                                    .IsLessThan(String.Format(SharedLocalizer["lblGridFilterLessThan"].Value))
                                    ))
                    );                
                skonto2.Bound(m => m.discount_2).HtmlAttributes(new { style = "text-align: right;" }).Format(@SharedLocalizer["gridColumnFormatDec"].Value).Width(100).Filterable(f => f.Cell(cell => cell.Enabled(true).MinLength(100)));
                skonto2.Bound(m => m.netday).HtmlAttributes(new { style = "text-align: right;" }).Width(90).Filterable(f => f.Cell(cell => cell.Enabled(true).MinLength(100)));

            })
        );

 

We'd like to know if there's another way to make the custom filters work in grouped columns, because we'd like to avoid writing the same code for every grouped column in the grid.

Thank you in advance.

Kind regards

Nikolay
Telerik team
 answered on 26 Aug 2020
1 answer
285 views

I am new to ASP.Core. How do I get the selected items from the "selected" ListBox on the OnPost event?

 

  @(Html.Kendo().ListBox()
        .Name("optional")
        .Toolbar(toolbar =>
        {
            toolbar.Position(ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
                .TransferTo()
                .TransferFrom()
                .TransferAllTo()
                .TransferAllFrom()
                .Remove()
            );
        })
        .ConnectWith("selected")
        .DataTextField("PlayerId")
        .DataTextField("Name")
        .Draggable(true)
        .DataSource(ds => ds.Ajax()
        .Read(r => r.Url("/League/PreDraftPage?handler=Read").Data("forgeryToken"))
)
    )
        @(Html.Kendo().ListBox()
        .Name("selected")
              .Toolbar(toolbar =>
        {
            toolbar.Position(ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
          );
        })
        .DataTextField("PlayerId")
        .DataTextField("Name")
        .BindTo(Model.LeaguePreDraftList)
        .Selectable(ListBoxSelectable.Multiple)
public void OnPost()
   {
       Guid leagueId;
       List<LeaguePreDraftViewModel> listModel;
 
 
       if (ModelState.IsValid)//save the data
       {
           var name = Request.Form["selected"];
           listModel = LeaguePreDraftList;
       }
       //leagueId = new Guid(id);
       //get data from page
 
   }
    )
Nikolay
Telerik team
 answered on 25 Aug 2020
1 answer
1.7K+ views
I have a model which looks like this
public class NotificationModel
    {
        public List<TableNotificationModel> TableNotificationModel { get; set; }
        public List<WrongTableNotificationModel> WrongTableNotificationModel { get; set; }
    }

 

and I have a view with two different Kendo grids. I want to populate the first Kendo grid with the TableNotificationModel and the second grid with the WrongTableNotificationModel

@model ModelLayer.Models.NotificationModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{ ViewData["Title"] = "Index"; }
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script>
    window.rootUrl = '@Url.Content("~/")';
</script>
<h1>Upload index</h1>
 
 
<div>
    <h4>Upload file</h4>
    <form asp-controller="Upload" asp-action="Upload"
          enctype="multipart/form-data" method="post">
        <input type="file" name="file" />
        <button type="submit" id="btn">Upload</button>
    </form>
 
    @if (ViewBag.Message != null)
    {
<script>
        $(document).ready(function(){
            alert('@Html.Raw(ViewBag.Message)');
        });
</script>}
 
 
</div>
 
 
<div class="clearfix">
    @(Html.Kendo().Grid<Model.WrongTableNotificationModel>()
        .Name("successfullData")
        .ToolBar(tools => tools.Excel())
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .Groupable()
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_OBJECTID).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.messageOut).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
            )
    )
 
</div>
 
<div class="clearfix">
    @(Html.Kendo().Grid(Model.TableNotificationModel)
        .Name("unsuccessfullData")
        .ToolBar(tools => tools.Excel())
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .Groupable()
        .Excel(excel => excel
            .FileName("file.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Upload"))
              )
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_OBJECTID).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.messageOut).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
            )
    )
 
</div>
 
<script>
    function sendAdditional() {
        var data = JSON.parse('@Html.Raw(Json.Serialize(Model))');
 
        return {
            model: data
        }
    }
</script>

neither of these methods I tried work

@(Html.Kendo().Grid(Model.TableNotificationModel)
        .Name("successfullData")
 
@(Html.Kendo().Grid<Model.WrongTableNotificationModel>()
        .Name("unSuccessfullData")

 

Is there a way to do this? Can I show both table with different models in the same view?

Eyup
Telerik team
 answered on 24 Aug 2020
3 answers
2.2K+ views

Hey,

I am trying to choose a different template for a popup editor depending on whether a new entry is inserted or an already existing one is modified. I am aware that I probably have to subscribe to the "beforeEdit" event of the grid and act depending on whether e.model.isNew() returns true or false.

However, I was not able to set a different template based on this decision yet. Could you please outline what the cleanest way for doing this would be?

So far my code looks similar to this:

@(Html.Kendo().Grid<Data.Promotion>()
    .Name("promotionGrid")
    .Columns(c =>
    {
        ...
        c.Command(cmd => cmd.Edit()).Width(120);
        c.Command(cmd => cmd.Destroy()).Width(120);
    })
    .Events(e =>
    {
        e.BeforeEdit("beforeEdit");
        e.Edit("edit");
    })
    .DataSource(c =>
    {
        c.Ajax()
        .Read(o => o.Url("CodeManagement?handler=Read").Data("forgeryToken"))
        ...
        .Model(m =>
        {
            m.Id("PromotionId");
            ...
        });
    })
    .ToolBar(c =>
    {
        c.Create();
    })
    .Editable(c =>
    {
        c.Mode(GridEditMode.PopUp);
        c.TemplateName("Promotion");  // using a static template right now, we want to change that
    })
)

 

Moreover, in the Edit-template, I have to constrain a DatePicker based on some model properties. However, the Model field is not set which leads to a NullReferenceException. Is there any way to set the Model field of the template to the entry that is currently being edited/created?

Thank you.

Neli
Telerik team
 answered on 21 Aug 2020
1 answer
1.7K+ views
How do I get a copy of Kendo.mvc.dll for  Progress® Telerik® UI for ASP.NET Core Version 2020.2.617?  
Dimitar
Telerik team
 answered on 21 Aug 2020
7 answers
233 views

I am about to plan a purchase with a  new customer again for the suite and I am using the latest demo. I was trying to get the value from the form that I placed my control in. I need to gain access in this field  .DataValueField("Id") which would be bound to the form when its posted but when I access tag item its null
  

<form asp-action="LinkToCase" asp-controller="MISObjects">
 
<div class="row">
    <div class="col-md-12">
        <div class="card card-success">
 
            <div class="card-header" style="background-color:#1e3f5a;color:white">
                <h3 class="card-title">Search and Tag</h3>
            </div>
            <div class="card-body">
 
                <div class="col-md-12">
                    <div class="input-group">
                        <select id="searchOptions" name="searchOptions" style="background-color: #1e3f5a; color: white; width: 140px; height: 45px">
                            <option selected value="1">Poi</option>
                            <option selected value="1">Vessel</option>
                        </select>
 
 
                        @(Html.Kendo().MultiColumnComboBox()
                            .Name("tagItem")
                            .DataTextField("name")
                            .DataValueField("Id")
                            .Filter("contains")
                            .FilterFields(new string[] { "name", "ContactTitle", "CompanyName", "Country" })
                            .Columns(columns =>
                            {
                                columns.Add().Field("name").Title("Contact Name").Width("200px");
                                columns.Add().Field("dob").Title("Date Of Brith").Width("200px");
 
                            })
                            .FooterTemplate("Total #: instance.dataSource.total() # items found")
                            .HtmlAttributes(new { style = "width:80%;" })
                            .Height(400)
                            .DataSource(source => source
                                .Custom()
                                .Transport(transport => transport
                                    .Read(read =>
                                    {
                                        read.Action("SearchQuery", "MISObjects")
                                            .Data("onAdditionalData");
                                    }))
                            )
                            )
                        <button class="btn-primary" value="Link To Case" style=" background-color:#1e3f5a;color:white">Link To Case</button>
 
                    </div>
                    
                    <script>
                        function onAdditionalData() {
                            return {
                                text: $("#customers").val()
                            };
                        }
                    </script>
  public IActionResult LinkToCase(int tagItem, string sesearchOptionsr) {
            Int32.TryParse(TempData.Peek("CaseId").ToString(), out int resultCaseId);
 
            POI newPoi = new POI();
            newPoi =  _context.Pois.SingleOrDefault(w => w.Id == tagItem);
 
            newPoi.MISObjectId = resultCaseId;
 
            _context.Pois.Add(newPoi);
 
            _toast.AddSuccessToastMessage(
                $"You have linked {newPoi.FirstName} {newPoi.LastName} to case {resultCaseId:d8}");
 
            return RedirectToAction("Edit", new { id = resultCaseId });
}

 

Ivan Danchev
Telerik team
 answered on 20 Aug 2020
8 answers
250 views

I have a grid with a details panel.

The details panel has the following template:

<script id="SuggestionGridDetailsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Splitter()
  .Name("sug-splitter-#=SuggestionID#")
  .HtmlAttributes(new { style = "height: 500px;" })
  .Orientation(SplitterOrientation.Vertical)
  .Panes(verticalPanes =>
  {
 
 
  verticalPanes.Add()
          .HtmlAttributes(new { id = "sug-top-#=SuggestionID#" })
          .Collapsible(false)
          .Size("#if(Status == 0){#54px#}else{#100px#}#")
          .Content(@<div class="container">
                  <div class="row">
                      #if(Status == 0){#
                      <div class="col-2 offset-10 float-right">
                          @(Html.Kendo().Button()
                    .Name("DeleteSuggestionBtn-#=SuggestionID#")
                    .HtmlAttributes(new { type = "button", @class = "k-btn-danger mt-2 float-right" })
                    .Events(e => e.Click("DeleteSuggestionBtnClick"))
                    .Content("Delete").ToClientTemplate())
                      </div>
                        #} else {#
                      <div class="col-4">
                          <label>Actioned by:</label>
                          <p>#=ActionedBy#</p>
                      </div>
                      <div class="col-8">
                          <label>Comments:</label>
                          <p>#=Comments#</p>
                      </div>
                      #}#
 
                  </div>
                  </div>);
 
          verticalPanes.Add()
              .HtmlAttributes(new { id = "sug-bottom-#=SuggestionID#", @class="iv-pane-no-overflow" })
              .Resizable(false)
              .Collapsible(false);
      }).ToClientTemplate()
)
</script>

 

The grid has a DetailExpand event that will populate the bottom pane of the "sug-splitter" with a partial view from the controller using AJAX. The content all loads, but the script generated to make the splitter look like a splitter does not fire. If I copy the jQuery call into the console and run it, the splitter turns into what I am expecting.

<script>kendo.syncReady(function(){jQuery("#vertical-18b41377-7c46-4e83-b72c-84e9a6589135").kendoSplitter({"panes":[{"collapsible":false,"scrollable":false},{"collapsible":false,"resizable":false,"size":"100px"}],"orientation":"horizontal"});});</script>

 

I have loaded content with a splitter in it previously, although this was into a window, not a grid details area. 

What can I do to get the splitter to load and not just be a bunch of divs on page?

Ivan Danchev
Telerik team
 answered on 20 Aug 2020
4 answers
1.1K+ views

I've ported my app from .NET Framework MVC to .NET Core 3.1.  The Kendo Grid displays OK and fetches data from the controller successfully (no javascript console errors). However despite the fact that 10 records are returned, the grid isn't actually rendering any rows.   What could I be doing wrong?

Controller:

public ActionResult FetchUsers([DataSourceRequest] DataSourceRequest request)
{
    var cardivationApi = GetCardivationApi();
    var data = cardivationApi.GetUsersFiltered(request);
    return new JsonResult(data);

}

 

View:

@(Html.Kendo().Grid<UserDtoV1>().Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.FirstName).Title(DbRes.T("FirstName", "Labels"))
                      .Filterable(t => t.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith).Delay(9999))
                          .Operators(o => o.ForString(d => d.Clear().StartsWith(DbRes.T("StartsWith", "Labels")).Contains(DbRes.T("Contains", "Labels"))))
                          .Extra(false));
                  [ cut for brevity ]
                     
                   
                .Pageable(p => p.PageSizes(true).PageSizes(new[] { 10, 20, 50, 100 }).Messages(t => t.ItemsPerPage(DbRes.T("ItemsPerPage", "Labels"))))
                .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
                .HtmlAttributes(new { style = "min-height:500px;" })               
                .ProxyURL(Url.Action("ExcelExport", "Users"))
            )
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .ServerOperation(true)
                .Read(read => read.Action("FetchUsers", "Users"))
                .Model(model => model.Id(t => t.UserID))
            )
        )

 

 

Thanks,

Nick

Eyup
Telerik team
 answered on 20 Aug 2020
2 answers
179 views

I am trying to put in a panel bar that is collapsed by default. I took the demo and changed the expanded value to false.

<kendo-panelbar name="project">
    <items>
        <panelbar-item text="Storage" expanded="false">
            <items>
                <panelbar-item text="Wall Shelving"></panelbar-item>
                <panelbar-item text="Floor Shelving"></panelbar-item>
                <panelbar-item text="Kids Storag"></panelbar-item>
            </items>
        </panelbar-item>
    </items>
</kendo-panelbar>

 

The panel bar items are collapsed but the icon is set to "k-i-arrow-60-up" so it looks like it can still be collapsed.

I am also wanting to put content other than <panelbar-item> in there, so I was going to use the <content> tag instead f the <items> tag an then put a treeview in there. When I use the <content> tag, the content is always show, so I must be using this incorrectly. I know I can do it with the html helpers, but I like how the tag helpers look. Can I still do this with the tag helpers?

Ivan Danchev
Telerik team
 answered on 19 Aug 2020
1 answer
291 views

Hi everybody 

I have a problem with kendo treeview checkboxes 
i populated treeview with remote data, it binds correctly. I used "checked" property to send checked checkboxes to view, it works fine too. 
i use 2 different method for sending checked node IDs to controller but does not work properly.
method1: 
use java script to read nodes recursively and gather IDs then store in hidden field and send to controller but most of the times some nodes doesn't illustrate the check items thoroughly. in other words, I lose near half of checkboxes randomly.

method2:
using checkbox name and template and send checkboxes directly to the controller got same issue. 

 

 

what can i do for this issue??
thanks

Martin
Telerik team
 answered on 19 Aug 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?