Questions on UI for ASP.NET MVC Forum

1 answer

109 views

Hi, I would like to know if there is a way to get a sql db column MS_Description as a column name tooltip from the standard object used to describe a grid element:

columns.Bound(p => p.Country).Title("Country").Visible(true);

Grid

answered on 13 Nov 2020

8 answers

303 views

Badge Placement missing

I've just upgraded to version 2020.3.915 of the framework, from version 2020.2.513, and the button badges have broken.

The original code was:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Value((string)ViewBag.NoToReview).Type("error").Visible((bool)ViewBag.ReviewBadge).Shape(BadgeShape.Circle)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

This now throws an error:-

ButtonBadgeSettingsBuilder' does not contain a definition for 'Value' and the best extension method overload 'ValueExtensions.Value(HtmlHelper, string)' requires a receiver of type 'HtmlHelper'

I have modified the code to:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Text((string)ViewBag.NoToReview).Visible((bool

)ViewBag.ReviewBadge).Shape(BadgeShape.Circle).ThemeColor(BadgeColor.Warning).Position(BadgePosition.Outside)).HtmlAttributes(

new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

However the badge colour isn't red (this doesn't seem to change whatever the ThemeColor setting), and the badge placement is within the button, and not on the upper right corner as before.

The documentation and other forum posts mention a button placement option, but this is missing from the intellisense options shown, and the documentation entry for this is now missing.

I need the badges to be red, and overlapping the top-right button corner as before. How can I achieve this?

Button

answered on 12 Nov 2020

1 answer

1.2K+ views

How to load web api json data into kendo grid

how to load external epi data into kendo grid. am getting empty grid using below code. but in api it shows it is returning json data.

here is my code.

@(Html.Kendo().Grid<TimeControlReportEnhancements.Models.TimeControlGrid>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.EMPNAME);
columns.Bound(p => p.COMPANY).Width(150);
columns.Bound(p => p.PROJECTNAME).Width(150);
columns.Bound(p => p.CHARGEDESC).Width(150);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(tools =>
{
tools.Create();
})
.Sortable()
.Pageable()
.Filterable()
.DataSource(dataSource =>
dataSource
.WebApi()
.Model(model =>
{
model.Id(p => p.EMPNUMBER);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Url("https://localhost:44376/api/Home/DBA"))

)

Grid

answered on 12 Nov 2020

2 answers

352 views

losing selection while changing pages !

Hello,
i have a variable that get the names and IDs from the selected Rows, so if i select like one Row or more on the first page, and then changed the page, the selected Rows aren't in the variable anymore.

so I'm checking the Variable in the Console and in first page, after selecting few Rows : for every selection I'm pushing the new selected values to old one.

So this is my Grid Widget:

@(Html.Kendo().Grid<WebCalendar_09K.Models.UserViewModel>()

.Name("gridMitarbeiter")

.HtmlAttributes(new { style = "height: 100%;width:100%;padding:0px;" })

.Events(eve =>

{

eve.Change("onChange_Grid_Mitarbeiter");

})

.Columns(columns =>

{

columns.Select().Width(75).HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align, headerGrid" });

columns.Bound(c => c.Vorname).HeaderHtmlAttributes(new { @class = "headerGrid" });

columns.Bound(c => c.Name).HeaderHtmlAttributes(new { @class = "headerGrid" });

columns.Bound(c => c.Crmusername).HeaderHtmlAttributes(new { @class = "headerGrid" });

})

.Scrollable()

.Sortable()

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Multiple)

.Type(GridSelectionType.Row)

)

.Pageable(pageable => pageable

.Info(true)

.Input(true)

.Numeric(false)

.ButtonCount(5)

.Responsive(true)

)

.ToolBar(t => t.Search())

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Mitarbeiter_Read", "User"))

.PageSize(20)

)

and this is the on change Grid_function :

function onChange_Grid_Mitarbeiter(e) {

Global_Array_Grid_mitarbeiter_Selected = new Array();

var msInterne = $("#MS_Interne").data("kendoMultiSelect");

var grid = $("#gridMitarbeiter").data("kendoGrid");

var rows = e.sender.select(); // all the selected values from the grid

rows.each(function (e) {

var dataItem = grid.dataItem(this);

// the variable i need

Global_Array_Grid_mitarbeiter_Selected.push(dataItem);

console.log(Global_Array_Grid_mitarbeiter_Selected);

});

}

so every Time i change the page it starts with no value in rows and push the first row selected from the second page into the array Global_Array_Grid_mitarbeiter_Selected.

So how to change the page without loosing the selection ?

Thanks in advance

K.Ramadan

Grid

answered on 11 Nov 2020

5 answers

4.2K+ views

Server side Paging Kendo grid mvc

I am developing a server side grid page ,i have googled it and did not find the correct behavior for me,

I need to each page size change dynamically and also the total number be set not via result len because i want to show user that we have for example 10000 pages but each time send him only 100 when i do so if my page size is 100

.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.ServerPaging(true)
.ServerSorting(true)
.ServerFiltering(true)
.Transport(transport => transport

.Read(read => read.Action("GetTodaysSalesList", "Sales")
.Data("filterData"))

)

.Schema(schema => schema.Model(model =>
{
model.Id(p => p.RowID);
model.Field(p => p.InvestorID).Editable(true);
model.Field(p => p.LoanNumber).Editable(false);
model.Field(p => p.LoanStatus).Editable(false);
model.Field(p => p.LoanCategory).Editable(false);
model.Field(p => p.CRBFundedDate).Editable(false);
model.Field(p => p.NoteDate).Editable(false);
model.Field(p => p.LoanAmount).Editable(false);
model.Field(p => p.NetFunding).Editable(false);
model.Field(p => p.Rate).Editable(false);
model.Field(p => p.XIRR).Editable(false);
model.Field(p => p.DateOfSale).Editable(false);
model.Field(p => p.DaysOutstanding).Editable(false);
model.Field(p => p.AccruedInterest).Editable(false);
model.Field(p => p.CRBOriginationFee).Editable(false);
model.Field(p => p.ImputedInterest).Editable(false);
model.Field(p => p.Platform).Editable(false);
}).Data("Data").Total("Total"))

this controller side i have tried some options

option one:

var test = _loans.ToDataSourceResult(request);
test.Total = 1000;
return Json(test, JsonRequestBehavior.AllowGet);

option two

return Json( new {Data=loans.ToDataSourceResult(request) Total=10}, JsonRequestBehavior.AllowGet);

the total has no influnce

Grid

answered on 10 Nov 2020

4 answers

1.3K+ views

Bind value to Url.Action

Hello friends. My second day with Kendo UI for ASP.NET MVC (newbie questions):

tl;dr version:

This:

@Html.HiddenFor(model => model.ProjectID)

... lines ommitted for brievity

.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='" + Url.Action("Index", "PurchaseInvoice/#= ProjectID #")+"'>#= kendo.format('{0:C}',sum)#</a></div>");

generates this:

<a href="/PurchaseInvoice/[object HTMLInputElement]">$191,449.65</a>

which shows the amount as a link (great). But what I need to be generated is this:

<a href="/PurchaseInvoice/259">$191,449.65</a>

... where 259 is the ProjectID.

Note that ProjectID is part of the model, but not of the grid's data. That's likely my problem here.

What am I missing? Is there an easier way to do this?

Long version:

@(Html.Kendo().Grid<DataLibrary.ProjectCost>()

.Name("CostGrid")

.Columns(columns =>

{

columns.Bound(c => c.Month)

.Width(100)

.Title("Mois")

.Hidden();

columns.Bound(c => c.SupplierName)

.Width(300)

.Title("<div style='text-align:left;'>Fournisseur </div>")

.HtmlAttributes(new { @style = "text-align:left;" })

.ClientFooterTemplate("<div style='text-align:right;'>TOTAL: </div>");

columns.Bound(c => c.OrderAmount)

.Format("{0:C}")

.Width(100)

.Title("Commandé")

.HtmlAttributes(new { @style = "text-align:right;" })

.ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#")

.ClientFooterTemplate("<div style='text-align:right;'>#= kendo.format('{0:C}',sum)#</div>");

columns.Bound(c => c.InvoiceAmount)

.Format("{0:C}")

.Width(100)

.Title("Facturé")

.HtmlAttributes(new { @style = "text-align:right;" })

.ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#")

.ClientFooterTemplate("<

div style='text-align:right;color:blue;'><a href='" + Url.Action("Index", "PurchaseInvoice/#= projectID #")+"'>#= kendo.format('{0:C}',sum)#</a></div>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates =>

{

aggregates.Add(c => c.OrderAmount).Sum();

aggregates.Add(c => c.InvoiceAmount).Sum();

})

.Group(groups =>

{

groups.AddDescending(c => c.Month);

})

.Read(read => read.Action("CostSummary", "Project", new { ID = Model.projectID }))

)

.Events(events => events.DataBound("collapseGroupRows"))

)

I've tried many variations:

.ClientFooterTemplate("<div style='text-align:right;color:blue;'>#= kendo.format('{0:C}',sum)#</div>");

.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#'>#= kendo.format('{0:C}',sum)#</a></div>");

.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#>#= kendo.format('{0:C}',sum)#</a></div>");

.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null).ToHtmlString());

.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#=projectID#" }, new { @style = "text-align:right;color:blue;" }).ToHtmlString());

.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null ).ToHtmlString());

.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null ).ToHtmlString());

Perhaps one of these is a (almost) better implementation (none of these work as-is though).

Thanks

Grid

answered on 10 Nov 2020

3 answers

652 views

show image in viewer

hi

I try to show my image instead of the icon of image in viewer.

i use

.Views(v=>v.List(a=>a.TemplateId("template")))

bot it dose not show any things.

i upload two image show with template and without template.

thank you.

FileManager

answered on 10 Nov 2020

6 answers

148 views

Muti Filter on grid

Hi all,

I need to do a Multi Filter on a column that can has more that one value. For example the value in the column contains the values Blue and Green. When a user selects blue in the multi select as a option I would like for any row that has blue in that that column to be returned. For further explanation see this dojo I created to explain what I am trying to do.

I am also looking to create a custom filterable ui widget that uses the kendoMultiSelect and a custom filter on the data source that will make use of my custom filterable ui widget. I am not sure if this will work. Any help on this would be great.

Grid