Questions on UI for ASP.NET MVC Forum

1 answer

120 views

Grid / Checkbox selection in Grid in ClientDetailTemplate

Hello,

I am trying to implement the Grid / Checkbox selection feature in a grid which is inside a ClientDetailTemplate.

But I am in face of a disturbing issue since the selection is always done in the grid which belongs to the first detail template.

To be clear suppose that we have 2 master grids and 2 childs in their own detail template. Expand both the details of the 2 master grids. Then try to select all the rows of the 2nd nested grid by checking the header. The result is not the expected one because all the rows of the 1st nested grid are selected.

Hereafter my shortened view code:

@(Html.Kendo().Grid<SellerViewModel>()

.Name("SellersGrid")

.Columns(columns =>

{

columns.Bound(p => p.SellerId).Hidden();

columns.Bound(e => e.Name);

)

.Events(e => { e.DataBound("onHostSellersDataBound"); }) .Filterable() .Pageable(pager => pager.ButtonCount(3)) .Editable(editable => editable.Mode(GridEditMode.InCell)) .Sortable(sortable => sortable .AllowUnsort(true) .SortMode(GridSortMode.MultipleColumn)) .ClientDetailTemplateId("marketplaces_template") .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("GetHostSellers", "CompetitorGroup", new { competitorGroupId = Model.CompetitorGroupId })) .Sort(sort => sort.Add("IsSelected").Descending()) .PageSize(25) .Model(model => { model.Id(p => p.UniqueId); model.Field(p => p.SellerId).Editable(false); model.Field(p => p.IsSelected).Editable(true); model.Field(p => p.Name).Editable(false); model.Field(p => p.IsActive).Editable(false); }) .ServerOperation(false)) )

Grid

answered on 02 Mar 2018

1 answer

256 views

Editing event/column width depending on the amount of events

Hello,

I am trying to create a week view for the kendo scheduler, in which the week day columns adjust in width depending on the amount of events for particular major tick. Currently the issue is that if i have more than 1 event per tick the events widths shrink and i can no longer see any relevant information. when my system may produce 10 events per tick all the events are then reduced to thin coloured line.

I've tried setting fixed width and altering widths on data bound, extending the current week view and creating a custom week view from your Implement More Events Button in Week View of Scheduler.

Then i decided to pivot and try stack the events in a similar fashion to boostrap columns but

https://www.telerik.com/forums/horizontal-event-spacing-when-column-has-multiple-events

this thread stated that its not possible to alter events positioning or ordering, is this true?

Is there any direction you can point me in or any advise you can give me?

because im pretty stumped at this point

King regards

Andy

Scheduler

answered on 02 Mar 2018

2 answers

236 views

[Solved] Grid Pager

Hello,

i have updated to the latest version 2018.1.117 and using theme bootstrap v4

Now there are 2 pagers, see attachment. Is there a way to fix this?

Greetings, Oliver

Grid

answered on 02 Mar 2018

1 answer

132 views

Check box filter in ASP.NET MVC

Hi friends, I have got 4 records in the first filter (multi check boxes) attempt, now I want to filter in those 4 records for the second time.How to get this?Please help.

My code-

@(Html.Kendo().Grid(Model).Name("grid").Columns(column =>
                                                  {
                                                      column.Bound(x => x.ProductID).Filterable(ftb => ftb.Multi(true).Search(true));
                                                      column.Bound(x => x.RackID).Filterable(ftb => ftb.Multi(true).Search(true));
                                                      column.Bound(x => x.ProductName).Filterable(ftb => ftb.Multi(true).Search(true));
                                                      column.Bound(x => x.Price).Filterable(ftb => ftb.Multi(true).Search(true));
                                                  })
                     .Pageable().Sortable().Filterable().Resizable(resize => resize.Columns(true))
                     .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(p => p.ProductID))
                     )
                    )

Grid

answered on 02 Mar 2018

1 answer

296 views

[Solved] Kendo UI MVC Grid, column-cell subtracted with the previous column-cell

I have a child-grid where I want to to subtract the 'Value' column-cell with the previous 'Value' column-cell client-side, I tried using a ClientTemplate but I couldn't get it to work .

Ex, Let's say I am looking at the 'Value' with the 'SensorId' 3, I want the 'Change' column to be: 'Value' where 'SensorId' == 3 - 'Value' where 'SensorId' == 4, and so forth.

Thanks in advance.

@(

Html.Kendo().Grid<ErvinBeta.Models.ViewModels.ValueViewModel>().Name("ValueGrid#=SensorId#")

.DataSource(ds => ds.Ajax()

.Model(m => m.Id(sv => sv.SensorId))

.PageSize(15)

.Read(read => read.Action("ReadValue", "Home", new { SensorId = "#=SensorId#" }))

.Sort(sort => sort.Add(sv => sv.Timestamp).Descending()))

.Columns(columns =>

{

columns.Bound(sensorValue => sensorValue.ValueId).Visible(false);

columns.Bound(sensorValue => sensorValue.SensorId).Visible(false);

columns.Bound(sensorValue => sensorValue.Value).Title("Value")

.HtmlAttributes(new { @class = "valueColumn" }).Width(150)

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))

.Cell(cell => cell.ShowOperators(false)));

columns.Bound(sensorValue => sensorValue.Category.Unit)

.Title("Unit").Width(200).Filterable(false);

columns.Bound(sensorValue => sensorValue.Timestamp).Title("Timestamp")

.Format("{0:yyyy-MM-dd}").Filterable(ftb => ftb.Cell

(cell => cell.Operator("contains")).Cell(cell => cell.ShowOperators(false)));

})

.Scrollable()

.Pageable()

.Sortable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.HtmlAttributes(new { style = "height: 600px;", @class="valueTable"})

.ToClientTemplate()

)

Grid

answered on 02 Mar 2018

2 answers

3.2K+ views

How to create Menu Vertical Left Side with expand to bottom like AdminLTE template.

I am new to Telerik and pretty new to Javascript or css as well. Wanting to build a website that uses the Kendo.Menu() it can be responsive. and want to achive like as
Menu dropdown view on this template https://adminlte.io/themes/AdminLTE/pages/UI/general.html
I thought I would find a sample app that does part of what I need to do, like dropdown menu expand, left side menu lexpandable. It doesn't look like any of the sample apps do this sort of thing. or if anyone achive to create sample dropdown menu and LeftSide collapse /expand navigation menu from this template

https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app/ , please share to me.

Does anyone know of a sample application that I could use to learn Telerik and help with my application that I would like to create? If it used the Kendo.Menu() as the base, that would be fantastic.

Thanks in advance

Menu

answered on 01 Mar 2018

8 answers

1.1K+ views

Using template with different values on Excel Export

So I have this model with these 2 property

public DateTime DateTimeChangeDate //  a date time object, with a UTC value, so kendo grid will provides me a date picker for filtering

and

public string ChangeDate //is an UTC date in iso 8601 format that I pass to moment.js in my view to format the date

So in my view it works fine. I have the column defined as like this

columns.Bound(m => m.DateTimeChangeDate)<br> .Title("Date and Time")<br> .ClientTemplate("#= formatUtcDateToLocal(ChangeDate)#")<br> .Width("12%");

and I am listening to the excel export as well

.ExcelExport("modifyFormatForExcel")

where modify excel is defined like this

I also have looked at how to use template as mentioned here, but becuase all my template does is call a js function it did not make sense for me to write code to grab the template to only run the js function.

modifyFormatForExcel = function (e) {

var sheet = e.workbook.sheets[0];

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

if (i === 0) {

sheet.columns[i].width = 200;

} else {

sheet.columns[i].autoWidth = true;

}

try {

// By grouping we shift the column to the right so we need to keep track of how many time it has been shifted

// in order to find out when the cells with actual data will start

var dataColumnStart = sheet.filter.from;

for (var j = 0; j < sheet.rows.length; j++) {

var row = sheet.rows[j];

//only apply formatting to excel rows that contains data

if (row.type === "data") {

console.log(dataColumnStart);

console.log(e.data);

row.cells[dataColumnStart].value = formatUtcDateToLocal(HOW DO I GET CHANGE DATE HERE);

}

} catch (exception) {

logJavascriptError(exception.message, exception.fileName, exception.lineNumber, exception.columnNumber, exception.stack);

notification.error("An error occurred while exporting to excel", true);

}

};

I also looked at using e.data but the array becomes nested as I group and sort the grid before I export to excel.

Is there a simple way for me to gracmodifyFormatForExcel

Grid

answered on 28 Feb 2018

9 answers

825 views

Calculating Server Side Aggregates

I'm absolutely stuck trying to create a server side aggregate. I can't find any examples or documentation that describes how to do this.

I've seen posts that recommend using AggregateFunction but I think that may be for Telerik grids or changed. I've tried using an AggregateResult but that won't let me set the member.

Any help or working examples would be very much appreciated.

Grid