Questions on UI for ASP.NET MVC Forum

1 answer

549 views

Rich Text Formating of cell contents using editor

I'm using a Kendo grid and want to be able to edit cell contents and apply Text Coloring and Strike-Through to the text within any given grid cell.

"some initial text" to be changed to "some altered initial text" with the word "altered" being red and the word "initial" being red and strike-though.

Any ideas how to achieve functionality like this?

See attached image for example.

Thanks,

John

Grid

answered on 15 Dec 2016

1 answer

459 views

Pass Dynamic value into Save async declaration

Hi there,

I need to pass an upload point into the path to be able to successfully post my files:

@(Html.Kendo().Upload()
.Name("file")
.Multiple(false)
.Events(e => e
.Error("onError")
.Success("onSuccess")
.Select("onSelect")
)
.Async(a => a
.Save("UploadFile", "Storage", new { uploadpoint = "4FE69113-B190-49B4-ADDC-EB2371C6119A" })
.Batch(false)
.AutoUpload(true)
)
)

I want to make the GUID dynamic based off the selected value of a dropdown. Is there any way to make that route param dynamic either using a function:

new { uploadpoint = GetUploadPoint() }

Or by using javascript to read the selected value of my dropdown?

Upload

answered on 15 Dec 2016

2 answers

139 views

Add separator rows with some title

Hi,

I need to separate the data I recieve from the database when I'm showing it in the grid but I don't know how to do it. I was wondering if it's possible to do something like the attached file.

Thanks a lot.

Grid

answered on 15 Dec 2016

1 answer

476 views

Variable decimal places based on another field

I've inherited an application with a detail template which allows in-line editing of financial and other numerical data.

Currently the grid is set up to use an editor template that shows a numeric textbox which allows 2 decimal places. The users have requested that only records of a certain type (where the finance type name contains WTE) should allow 2 decimal places, every other line should only allow whole numbers.

Is this possible whilst still showing all the rows in the same grid?

The detail template is:-

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

<div style="font-size:x-small;">

@(Html.Kendo().Grid<CIPAndRecovery.Models.vFinancialDetail>()

.Name("Data_#=Id#")

.HtmlAttributes(new { style = "font-weight:normal" })

//.TableHtmlAttributes(new { style = "padding:0px;margin:0px;", @class="TemplateGrid" })

.Events(e => e.DataBound("GetGroupName"))

.Events(e => e.DataBound("onFinDetailColour_Databound"))

.Events(e=>e.DataBound("onFinDetail_Databound"))

.Columns(c =>

{

c.Bound(o => o.Id).Title("Id").Hidden(true);

c.Bound(o => o.AccountDetail_Id).Title("AccountDetail Id").Hidden(true);

c.Bound(o => o.FinanceGroup).Title("FinanceGroup").Hidden(true);

c.Bound(o => o.FinanceGroupNo).Title("Finance Group No")

.ClientGroupHeaderTemplate("\\#=GetGroupName( value )\\# ").Hidden(true);

c.Bound(o => o.FinanceType).Title("Type").Width(60);

c.Bound(o => o.M1).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M1)\\#");

c.Bound(o => o.M2).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M2)\\#");

c.Bound(o => o.M3).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M3)\\#");

c.Bound(o => o.M4).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M4)\\#");

c.Bound(o => o.M5).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M5)\\#");

c.Bound(o => o.M6).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M6)\\#");

c.Bound(o => o.M7).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M7)\\#");

c.Bound(o => o.M8).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M8)\\#");

c.Bound(o => o.M9).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M9)\\#");

c.Bound(o => o.M10).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M10)\\#");

c.Bound(o => o.M11).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M11)\\#");

c.Bound(o => o.M12).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M12)\\#");

c.Bound(o => o.Total).Title("Total").ClientTemplate("\\#=onFinDetailColour_Databound(Total)\\#");

c.Bound(o => o.FYE).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(FYE)\\#");

//c.ForeignKey(o => o.RoleId, (System.Collections.IEnumerable)ViewData["roles"], "Id", "RoleName").Title("Role")

// .EditorTemplateName("GridForeignKey");

c.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); }).Title("Edit").Width(90);

//c.Group(e => e.HeaderTemplate("<span> #=GetGroupName(FinanceGroupNo)# </span>"));

})

//.ToolBar(toolbar =>

//{

// toolbar.Create();

// //toolbar.Save().SaveText(" ").Text(" ").CancelText(" ");

//})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.RequestEnd("onFinDetailChange"))

//.Batch(true)

.PageSize(16)

.Group(group => group.Add(p => p.FinanceGroupNo))

//.Sort(s=>s.Add(p=>p.SortOrder))

.Model(m =>

{

m.Id(p => p.Id);

m.Field(e => e.FinanceType).Editable(false);

m.Field(e => e.Total).Editable(false);

//m.Field(e => e.SpecificSystemsApprover).DefaultValue(new List<SystemsFormsMVC.Models.GenericLookup>());

})

.Read(read => read.Action("GetFinancials", "PlanActions", new { AccDetailId = "#= Id #" }))

.Create(create => create.Action("InsertFinancial", "PlanActions", new { AccDetailId = "#= Id #" }).Type(HttpVerbs.Post))

.Update(update => update.Action("UpdateFinancial", "PlanActions").Type(HttpVerbs.Post))

.Destroy(delete => delete.Action("DeleteFinancial", "PlanActions"))

)

//.Pageable()

//.Groupable()

.ToClientTemplate()

)

</div>

</script>

The editor template is:-

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m)

.HtmlAttributes(new { style = "width:100%" })

.Spinners(false)

.Decimals(2)

)

<script>

$(function () {

$("input[type=text]").bind("focus", function () {

var input = $(this);

clearTimeout(input.data("selectTimeId"));

var selectTimeId = setTimeout(function () {

input.select();

});

input.data("selectTimeId", selectTimeId);

}).blur(function (e) {

clearTimeout($(this).data("selectTimeId"));

});

})

</script>

Thanks

Grid

answered on 15 Dec 2016

1 answer

5.6K+ views

How to do Server Side filtering?

how I can perform server side filtering in grid.
need help.

Grid

answered on 15 Dec 2016

2 answers

299 views

EditorTemplateName results in empty cell for view

I have the following grid:

@(Html.Kendo().Grid(Model.Items)

.Name("Items")

.Columns(columns =>

{

columns.Command(command => command.Custom("-").Click("deleteNominalInvoiceRowItem").HtmlAttributes(new { @class = "button-small", id = "deleteId" })).Width(40);

columns.Bound(c => c.Id).Hidden(true).FormClientTemplate("Items", "Items");

columns.Bound(c => c.NominalCode)

.ClientTemplate("#=NominalCode#")

.EditorTemplateName("NominalInvoiceItemAccountCodeTemplate")

.FormClientTemplate("Items", "Items");

columns.Bound(c => c.Description).FormClientTemplate("Items", "Items");

columns.Bound(c => c.NetAmount).HtmlAttributes(new { style = "text-align: right;" })

.ClientFooterTemplate("#= gridItemsFooterNetAmount() #").Format("{0:c}").FormClientTemplate("Items", "Items");

columns.Bound(c => c.VatAmount).HtmlAttributes(new { style = "text-align: right;" })

.ClientFooterTemplate("#= gridItemsFooterVatAmount() #").Format("{0:c}").FormClientTemplate("Items", "Items");

columns.Bound(c => c.TotalAmount).HtmlAttributes(new { style = "text-align: right;" })

.ClientFooterTemplate("#= gridItemsFooterTotalAmount() #").Format("{0:c}").FormClientTemplate("Items", "Items");

})

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

.Scrollable()

.Navigatable()

.Selectable(x => x.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell).Enabled(true))

.Editable(x => x.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))

.ToolBar(x =>

{

x.Create().Text(RCdisplay.Add_Nominal_Invoice_Item);

x.Custom().Text(RCdisplay.Clear_All).HtmlAttributes(new { id = "clearItems" });

})

.Events(x => x.Edit("onNominalInvoiceItemsGridEdit").Change("onNominalInvoiceItemsGridEdit").Save("onNominalInvoiceItemsGridSave"))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("InvoiceItemsGrid_Read", "Invoicing", new { Area = "Invoicing" }))

.Create(create => create.Action("InvoiceItemsGrid_Insert", "Invoicing", new { Area = "Invoicing" }))

.Update(update => update.Action("InvoiceItemsGrid_Update", "Invoicing", new { Area = "Invoicing" }))

.Model(m =>

{

m.Id(p => p.Id);

m.Field(p => p.NominalCode);

m.Field(p => p.Description);

m.Field(p => p.NetAmount);

m.Field(p => p.VatAmount);

m.Field(p => p.TotalAmount);

})

)

The EditorTemplateName causes the grid to have an empty cell (it actually contains a hidden field with the value selected) when not in edit mode.

From what i read, the ClientTemplate as I have it should display the value selected.

Is there anything else I need to do to get the selected value displayed as a span when not in edit more?

Thanks

Grid

answered on 14 Dec 2016

1 answer

160 views

Cell Formatting

Is there a way to format the cell contents with strike-through and coloring where only the highlighted text gets the applied format and not the whole text string within the cell?

Spreadsheet

answered on 14 Dec 2016

1 answer

526 views

Grid Not Displaying Data

Here is my grid:

@(Html.Kendo().Grid<tpnconnect.com.Models.Hub.ForkLiftTruck>()

.Name("ForkLiftTruckGrid")

.Columns(columns =>

{

columns.Bound(f => f.ForkLiftTruckID).Title("ID").Hidden(true);

columns.Bound(f => f.Deleted).Title("Deleted");

columns.Bound(f => f.HubDepotNumber).Title("Depot Number").Locked(true);

columns.Bound(f => f.HubID).Title("Hub ID").Hidden(true);

columns.Bound(f => f.TruckNumber).Title("Truck Number");

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.ToolBar(toolbar => toolbar.Create())

.Pageable()

.Sortable()

.Filterable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("FLT_Grid_error_handler"))

.Model(model => model.Id(d => d.ForkLiftTruckID))

.PageSize(16)

.ServerOperation(false)

.Create(update => update.Action("AddForkLiftTruck", "Warehouse"))

.Read(read => read.Action("GetForkLiftTrucks", "Warehouse").Type(HttpVerbs.Get))

.Update(update => update.Action("EditForkLiftTruck", "Warehouse"))

)

Here's my ForkLiftTruck definition:

namespace tpnconnect.com.Models.Hub

{

public class ForkLiftTruck

{

public int ForkLiftTruckID { get; set; }

public int TruckNumber { get; set; }

public int HubID { get; set; }

public string HubDepotNumber { get; set; }

public bool Deleted { get; set; }

}

Here's my controller code:

[HttpGet]

public ActionResult GetForkLiftTrucks([DataSourceRequest]DataSourceRequest request)

{

int depotID = Utilities.GetUserDepotID();

List<Models.Hub.ForkLiftTruck> flts = new List<Models.Hub.ForkLiftTruck>();

using (WarehouseService.WarehouseServicesClient ws = new WarehouseService.WarehouseServicesClient())

{

var serviceFLTs = ws.GetForkLiftTrucks(depotID);

foreach (var serviceFLT in serviceFLTs)

{

Models.Hub.ForkLiftTruck flt = new Models.Hub.ForkLiftTruck()

{

Deleted = serviceFLT.Deleted,

ForkLiftTruckID = serviceFLT.ForkLiftTruckID,

HubDepotNumber = serviceFLT.HubDepotNumber,

HubID = serviceFLT.HubID,

TruckNumber = serviceFLT.TruckNumber

};

flts.Add(flt);

}

var data = flts.ToDataSourceResult(request);

return Json(data, JsonRequestBehavior.AllowGet);

}

Attached files:

1. screenshot of Chrome's network traffic inspector for the response to the grid's read request

2. screenshot of the Kendo UI listener seeing the data bind event

Grid

answered on 14 Dec 2016

1 answer

232 views

Set TemplateName in TreeList edit-mode "PopUp"

How can i apply an TemplateName or TemplateId to the Edit-Popup-Window of an TreeList?
I've got a partial-view named: MotivTreeViewViewModelEdit and i i want to set it to the Popup Window like in ASP.NET MVC Grid

....Editable(editable => editable.Mode("popup").TemplateName("MotivTreeViewViewModelEdit"))

The HtmlHelper supports the feature but i think it is not renderd.

Kind regards!

TreeList

answered on 14 Dec 2016

1 answer

637 views

Grid Export to Excel - All Pages - Not Working

I have a grid with around 20,000 items in it and when I click export to excel with .AllPages set to true, I get an unresponsive script error. I've traced the SQL query and that is quick, taking only 1 second to complete but I can see the ajax call taking far too long and ultimately failing after around 15-20 seconds. What are my options for this? Is there an alternative approach involving server-side?
I would guess this is because there are a lot of items in the grid and your example on your demo page only does the current page ?

Grid

answered on 13 Dec 2016