Questions on UI for ASP.NET Core Forum

1 answer

403 views

dynamically set treeview and grid height

Hi,

I have a treeview and a grid side by side on a page with bootstrap 4 layout. When the user selects a node in the treeview, the grid datasource refreshes. This works ok.

Now I'd like to size the grid and the treeview dynamically to the size of the browser window minus the header of the page, so that the treeview and the grid display a scrollbar (if needed) independently. The tree is load on demand and can contain a lot of elements.

Im struggling with setting the treeview and the grid height in the window resize handler.

Currently the grid is not paging, it maybe a requirement to have the grid paging then I would have to set the pagesize dynamically to display as much rows as possible within the available space..

Thanks for your help

Erwin

TreeView

answered on 19 Jan 2021

2 answers

105 views

Placing data at a specific row/cell

Hi Experts,

I'm loading data from a DB and want to begin placing it at row 7...is this possible?

Spreadsheet

answered on 18 Jan 2021

13 answers

3.3K+ views

Adding Action to Custom toolbar button

I am trying to figure out how i can add an action event to my custom toolbar button in the .net core grid. I noticed that both the PDF and excel options have an available .ProxyUrl property but custom toolbar does not.

I have something like this......

.Toolbar(toolbar=>toolbar.Custom().Text("CSV Export")

I did see that something like this could be done, but that does not give me the same look and feel. It essentially looks like a hyperlink and nothing more...

toolbar.ClientTemplate("<a href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>");

Grid

answered on 14 Jan 2021

4 answers

92 views

Update Data Method being called too early

I have a grid that has the following code as the update action in its datasource.

This is being called before the grid is rendered so I get an error that the datasource is null. Meaning I dont think the grid has initialized on the front end so the '#Grid' isnt there for the returnDirtyFields method to get. Why is this update action data method being run when the grid is not updating?

The .Data() method I want with the update action below it.

function returnDirtyFields(gridId) {

var id = '#' + gridId;

var dataSource;

var data;

var changedModels;

dataSource = $(id).data("kendoGrid").dataSource;

data = dataSource.data();

if (dataSource.hasChanges()) {

for (var i = 0; i < data.length; i++) {

if (data[i].dirty) {

changedModels = data[i].dirtyFields

}

var temp = $.extend(true, {}, { dirtyFields: JSON.stringify(changedModels) });

return temp;

}

.Update(update => update.Action("Entry_Update","Entry").Data("returnDirtyFields('Grid')"))

Grid

answered on 13 Jan 2021

9 answers

712 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

758 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

133 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

213 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

353 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