Questions on UI for ASP.NET Core Forum

9 answers

721 views

Grid No Longer Using Shared DataSource After Calling setOptions()

We have a page that use the Grid, Filter, and DataSource components (note that this is the newer Filter component that supports more advanced features such as grouping different conditions, and not the built-in grid filtering). We're using a shared "standalone" DataSource component so it only has to be setup once and both the Grid and Filter can reference the same thing.

Everything up to this point is working fine. The data is displayed in the grid, the filter can be used to filter the results, etc. However, we're also using getOptions()/setOptions() for both the Grid and Filter components to save the user's options when leaving the page and restore them again when they return. After setOptions() is called for the Grid, the Filter component no longer filters the results in the Grid. There aren't any errors or anything, but adding a filter that should change the results has no impact.

I'm guessing the problem is that setOptions() is changing the data source of the grid, so the Filter component is still applying the filter to the original data source, but that's no longer the same instance that the Grid component is using to display data. I tested this theory by getting a reference to the grid's original data source before calling setOptions(), then setting the grid's data source back to the original data source after calling setOptions(). Although this did fix the problem and I could apply new filters even after calling setOptions(), it also caused some other issues (ex. any previously-saved options related to the data source were now overwritten by replacing the original data source).

Is there a "right" way to do what I'm trying to accomplish here, or maybe some workaround? Is this a bug that I'm running into and it shouldn't really be this difficult? We basically just want to define a data source once, have a Filter and Grid component both reference that data source, and have everything continue to work after calling setOptions().

Grid

answered on 12 Jan 2021

1 answer

770 views

Applying filter to a grid from server-side

Kendo.Mvc, Version=2020.3.1118.0

I am trying to apply filter to a grid from server-side. Below is the implementation.

public static AjaxDataSourceBuilder<T> Configure<T>(this AjaxDataSourceBuilder<T> source, UserGridPreferenceVM userPreferences) where T : class

{

if (userPreferences.Filter?.Filters != null && userPreferences.Filter.Filters.Length > 0)

{

List<FilterDescriptor> filters = new List<FilterDescriptor>();

foreach (FilterElement filter in userPreferences.Filter.Filters)

{

filters.Add(new FilterDescriptor(filter.Field, GetFilterOperator(filter.Operator), filter.Value));

}

source.Filter(s =>

{

s.AddRange(filters);

});

}

return source;

}

I have 2 questions.

1. When the grid loads the filter condition is set but value of the filter is not set.

2. How we can apply Logic operator "And"/"Or" to the filter?

Really appreciated if you can help with this issue.

Grid

answered on 12 Jan 2021

6 answers

187 views

Grid Incorrectly Keeps Groupable Clue Visible After Grouping

Hi,

After grouping my grid, the clue stays visible erroneously after grouping is complete. See attached image for details. I've tried removing it through JavaScript but then the grouping stops working after that. This doesn't seem like standard behavior. Thoughts? Thanks!

01.@(Html.Kendo().Grid(Model.ServiceRequests)

02. .Name("grid")

03. .Columns(columns => {

04. columns.Bound(c => c.Number).Filterable(false)

05. .ClientFooterTemplate("Count: #=count#");

06. columns.Bound(c => c.Type).Filterable(f => f.Multi(true));

07. columns.Bound(c => c.RequestTitle).Filterable(false);

08. columns.Bound(c => c.Requester).Filterable(f => f.Multi(true));

09. columns.Bound(c => c.Priority).Filterable(f => f.Multi(true));

10. columns.Bound(c => c.Status).Filterable(f => f.Multi(true));

11. columns.Bound(c => c.EstimatedHours).Filterable(false);

12. })

13. .Resizable(r => r.Columns(true))

14. .Reorderable(r => r.Columns(true))

15. .Groupable(g => g.ShowFooter(false))

16. .Sortable()

17. .Filterable()

18. .Selectable()

19. .ToolBar(tools => tools.Excel())

20. .Excel(excel => excel

21. .FileName("ADEV - In Queue.xlsx")

22. .Filterable(true)

23. .ProxyURL(Url.Action("Export", "InQueue", new { Area = "Views" })))

24. .Events(events =>

25. {

26. events.DataBound("onDataBound");

27. events.Change("onChange");

28. })

29. .DataSource(dataSource => dataSource

30. .Ajax()

31. .Aggregates(aggregates =>

32. {

33. aggregates.Add(c => c.Number).Count();

34. })

35. .ServerOperation(false)

36. )

37.)

Grid

answered on 12 Jan 2021

3 answers

1.0K+ views

Custom filtering using a toolbar button based on child grid rows in Kendo Grid for .NET core

Hi,

I'd like to implement custom filtering based on rows of child grid.

The attached image shows the layout of my grid.

My questions are as follows:

Q1. How to filter the 'company' rows based on the 'customers' who sold more than 100 items?
For eg: After I click 'Customers Selling > 100 Items 4 months' button, I only should show 'Company1' row with 'Customer12' row in its child grid.
Q2. If I want to clear the filter, I should be able to do so as well. (How do I do that in a button? Maybe show active button when used? I'd like your opinion on that.)
Q3. To fetch these data, the server needs to do some expensive calculations, so how can I reuse the dataSource when the customer navigates through different pages instead of doing full fetch from controller while navigating to different pages?

My code looks like this:

The data models:

public class CompanyData

{

public string CompanyId { get; set; }

public int CustomersCount { get; set; }

public List<CompanyCustomer> Customers { get; set; }

}

public class CompanyCustomer

{

public string CustomerId { get; set; }

public string CustomerName { get; set; }

public int TotalSoldItems { get; set; }

}

The grid containing the child grid as well:

@(Html.Kendo()

.Grid<ProjectName.Models.CompanyData>()

.Name("CompanyDataSummary")

.Columns(columns =>

{

columns.Bound(e => e.CompanyId).Title("Company Name").Width(60);

columns.Bound(e => e.CustomersCount).Title("Customers Count").Width(50);

})

.Sortable()

.Pageable()

.Scrollable()

.Filterable()

.ClientDetailTemplateId("CustomerDetails")

.HtmlAttributes(new { style = "height:450px;" })

.AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch

.ToolBar(toolbar => toolbar.ClientTemplateId("CustomerDetailsToolBarTemplate"))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(true)

.PageSize(10)

.Model(model =>

{

model.Id("CompanyId");

model.Field("CustomerCount", typeof(int));

})

.Read(read => read.Action("GetCompanyDataAsync", "Reporting").Data("passArguments"))

)

.Events(events => events.DataBound("dataBound").DetailExpand("onExpand"))

)

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

@(Html.Kendo()

.Grid<ProjectName.Models.CompanyCustomer>()

.Name("CustomerDetails_#=CompanyId#")

.Columns(columns =>

{

columns.Bound(o => o.CustomerName).Title("Customer Id").Width(60);

columns.Bound(o => o.TotalSoldItems).Title("Total Sold Items").Width(60);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model =>

{

model.Id("CustomerId");

model.Field("CustomerName", typeof(string));

model.Field("TotalSoldItems", typeof(int));

})

.ServerOperation(false)

)

.AutoBind(false)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

The toolbar template:

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

<div class="inlineBtn">

@(Html.Kendo().Button()

.Name("allYTDCustomers")

.HtmlAttributes(new { type = "button", @class = "k-button" })

.Content("All Customers YTD")

.Events(e => e.Click("allYTDCustomersFetch"))

.ToClientTemplate()

)

</div>

<div class="inlineBtn">

@(Html.Kendo().Button()

.Name("CustomersGT100ItemsYTD")

.HtmlAttributes(new { type = "button", @class = "k-button" })

.Content("Customer selling > 100 items YTD")

.Events(e=>e.Click("CustomersGT100ItemsYTDFetch"))

.ToClientTemplate()

)

</div>

<div class="inlineBtn">

@(Html.Kendo().Button()

.Name("allCustomersLast4Mths")

.HtmlAttributes(new { type = "button", @class = "k-button" })

.Content("Customers selling > 100 items last 4 months")

.Events(e => e.Click("allCustomersLast4MthsFetch"))

.ToClientTemplate()

)

</div>

</script>

The script that loads the child grid and the handler for toolbar button:

<script>

function onExpand(e) {

var companyId = e.sender.dataItem(e.masterRow).CompanyId;

var customerData = e.sender.dataItem(e.masterRow).Customers;

//Initialize the child grid as well

var childGridName = "#" + "CustomerDetails_" + companyId;

var childGrid = $(childGridName).data("kendoGrid");

if (childGrid !== undefined) {

childGrid.dataSource.data(customerData);

}

//Example function:

function CustomersGT100ItemsYTDFetch() {

// How to filter the company rows based on the customers who sold more than 100 items?

// For eg: After I click that button, I only should show Company1 row with Customer12 in its child grid.

}

</script>

The controller action method:

public

async Task<ActionResult> GetCompanyDataAsync([DataSourceRequest] DataSourceRequest request, DateTime start, DateTime end)

{

IEnumerable<CompanyData> companySummary = await _reporting.GetCompanyReportInformationAsync(start, end);

return Json(companySummary.ToDataSourceResult(request));

}

Grid

answered on 08 Jan 2021

1 answer

219 views

Save image to absolute server path

Instead of saving file locally is it possible save image to absolute server path.

ImageEditor

answered on 08 Jan 2021

3 answers

360 views

Change language for the data range picker placeholder

I want to change the language of the placeholder from "day/month/year" to "día/mes/año".

Any way, how it can be done?

Greetings

DateRangePicker

answered on 07 Jan 2021

3 answers

614 views

Get Data Item from Button in Template

I have a ListBox with a Row Template that contains a Button. There is no guarantee that the user will press the button for the "selected" item in the ListBox. So, I need to capture the Data Item in the ListBox that is related to the button that was pressed. How do I accomplish this?

Thanks for your help,

Joel

Note: My goDetail script currently just grabs the listBox control and posts for the selected item. It doesn't post based on the Row that contained the Button that fired the event.

<div class="container">

@(Html.Kendo().ListBox()

.Name("listBox")

.DataTextField("Name")

.DataValueField("Id")

.DataSource(source =>

source.Read(read =>

read.Action("IndexJson", "SessionOptionTemplates").Data("gridGetData"))

)

.TemplateId("item-template")

.Toolbar(toolbar =>

{

toolbar.Position(ListBoxToolbarPosition.Right);

toolbar.Tools(tools => tools

.MoveUp()

.MoveDown()

.Remove()

);

})

.Events(events => events

.Reorder("onReorder")

.Remove("onRemove"))

.HtmlAttributes(new { style = "height:550px;width:530px" })

.BindTo(new List<SessionOptionTemplate>()))

</div>

<script id="item-template" type="text/x-kendo-template">

<span><input type="submit" value="Details" class="btn" onclick="goDetail()" style="margin:5px" /></span>

<span class="k-state-default" style="margin-left:10px"><h5>#: data.Name #</h5><p>#: data.Description != null ? data.Description : '' #</p></span>

</script>

function goDetail(e) {

//alert("goDetail");

var listbox = $("#listBox").data("kendoListBox");

var element = listbox.select();

var dataItem = listbox.dataItem(element[0]);

var url = '@Url.Action("Details", "SessionOptionTemplates")?id=' + dataItem.Id + '@Model.GetUrlParameters()';

// Replace & with & as the above encoding step changes & to &.

window.location.href = url.replace(/&/g, "&");

}

ListBox

answered on 07 Jan 2021

1 answer

121 views

Grid incorrectly truncates long integral types when parsing

I have a long variable.

Normally, there are no problem displaying this value on the grid.
However, when the value gets very large, it gets truncated.

Original value: 144254210960752435
Truncated value: 144254210960752420

The original value is still within the max range of long, so the truncation shouldn't happen.
https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/integral-numeric-types

At the moment, the only workaround I can think of, is to create a string variable to store the long value, and have grid display that string variable instead.

Is there a better way to resolve this problem?

Grid

answered on 06 Jan 2021

1 answer

136 views

Kendo Window Error while deploying to IIS

We are using window component (Telerik UI for ASP.Net Core) in our ASP.Net core project and the code is provided below

in View

win.center().open();
win.refresh({
url: "/DocumentProperties/Publish",
data: { documentID: id}
});

Controller function

public ViewResult Publish(Int32 documentID)
{

}

The code is working as expected while testing with visual studio in local machine. The contoller funciton is called and correct parameters are being passed. How ever when we publish the package and deploy to the Dev and QA Server( IIS 10) the conroller function is not getting called. while inspecting via developer toolbar we can see 404 not found. The issue is that an unwanted parameter gets added to the end of the call for example

the resulting call as part of the refresh method is

/DocumentProperties/Publish?documentID=7&_=1609286664558

while the acutal/expected call should be

/DocumentProperties/Publish?documentID=7

This parameter gets appended to all the other instances in the page (other functions) where refresh method is used

/Search/Details?id=7&param2=a&_=1609286664557:1 Failed to load resource: the server responded with a status of 404 (Not Found)

We have tested in both our IIS servers (Dev/QA) and behavior is same. Please provide a fix for the same,

Window

answered on 01 Jan 2021

3 answers

146 views

tab navigate muliple inputs in EditorTemplate

Hi

I have a navigable in-cell edit grid with a particulate column using EditorTemplate.

There are 3 inputs in this template, but I cannot tab navigate through this 3 inputs.

When I enter tab key, it will close this cell and jump to next column edit.

I need to be able to tab edit through all columns and also tab through all inputs in this particular column.

Please advice how i can achieve this.

Thanks in advance!

Grid

answered on 30 Dec 2020