Questions on UI for ASP.NET MVC Forum

2 answers

137 views

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

462 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

296 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

155 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

519 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

227 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

630 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

4 answers

265 views

Advanced grouping and empty line

Hi!

I'm using a scheduler in cshtml:

@(Html.Kendo().Scheduler<ITSV6.Areas.CoreApp.Models.SchedulerModel>()

.Name("scheduler")

.Date(new DateTime(2013, 6, 13))

.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))

.MajorTick(60)

.Views(views =>

{

views.TimelineView(timeline => timeline.EventHeight(50));

views.TimelineWeekView(timeline => timeline.EventHeight(50));

views.TimelineWorkWeekView(timeline => timeline.EventHeight(50));

views.TimelineMonthView(timeline =>

{

timeline.StartTime(new DateTime(2013, 6, 13, 00, 00, 00));

timeline.EndTime(new DateTime(2013, 6, 13, 00, 00, 00));

timeline.MajorTick(1440);

timeline.EventHeight(50);

});

})

.Timezone("Etc/UTC")

.Group(group => group.Resources("SchedulerName", "Employees").Orientation(SchedulerGroupOrientation.Vertical))

.Resources(resource =>

{

resource.Add(m => m.Type)

.Title("Type")

.Name("Type")

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "Pay Code", Value = 1},

new { Text = "Day Off", Value = 2},

new { Text = "Shift", Value = 2}

});

resource.Add(m => m.SchedulerName)

.Title("Scheduler Group")

.Name("SchedulerName")

.DataTextField("sg_name")

.DataValueField("sg_group")

.DataColorField("Color")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("getScheduleGroups", "Scheduler");

});

resource.Add(m => m.Employees)

.Title("Employees")

.Name("Employees")

.Multiple(true)

.DataTextField("FullNM")

.DataValueField("emp_id")

.DataColorField("Color")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetEmployees", "Scheduler");

});

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.SchedulerId);

m.Field(f => f.Title).DefaultValue("No title");

m.RecurrenceId(f => f.RecurrenceId);

m.Field(f => f.Title).DefaultValue("No title");

})

//.Read("Read", "Scheduler")

.Create("Create", "Scheduler")

.Destroy("Destroy", "Scheduler")

.Update("Update", "Scheduler")

)

The "Employee" and the "RuleName" are associated by a field called "schedulerId".

I need to group "Employees" with a "SchedulerName" only if the Employee is associated to the SchedulerName just like the attached image.

Also, I need to add an empty line as "Empty Template" for add a new "Schedule Rule" like the first line in the attached image.

Its posible to do that with the scheduler?

Thanks a lot!

Best regards!

Scheduler

answered on 13 Dec 2016

3 answers

141 views

Setting recurrance messages from variable

Hi Guys

I'm sure this is just a syntax issue.. but I'm stuffed if I can work it out.

If I set my messages ( for testing only) like this in the editor template it works fine.

<div data-container-For="recurrenceRule" Class="k-edit-field">

<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor" data-frequencies="['never','daily','weekly']" data-messages="{'frequencies':{'never':'Nie','daily':'Täglich','weekly':'Wöchentlich','monthly':'Monatlich','yearly':'Jährlich'}}"></div>

</div>

But if I try to set the data-messages to a javascript variable I can't get it to work. ( I wan't to do this as I want to be able to change the language based on the browser language.. so I want to have an externally defined message object.)

I've tried all sorts of ways to define the variable.. but it never works

var rmessages = {'frequencies':{'never':'Nie','daily':'Täglich','weekly':'Wöchentlich','monthly':'Monatlich','yearly':'Jährlich'}};

// var rmessages  = {frequencies:{never:"Nie",daily:"Täglich",weekly:"Wöchentlich",monthly:"Monatlich",yearly:"Jährlich"}};

//-------------------------------

<div data-container-For="recurrenceRule" Class="k-edit-field">

<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor" data-frequencies="['never','daily','weekly']" data-messages="rmessages"></div>

</div>

When I run , it seems that the data-messages are set to 'rmessages' ( as per the attached image) however is other parts of the same template I refer to javascript variable and this works. ( e.g setting the 'data-source' for this drop down which is on the same template.

<div id="selectsg" style="display:none;">

<div Class="k-edit-label"><label for="SGIDId">Queue</label></div>

<div data-container-For="SGID" Class="k-edit-field">

<input name="SGIDId" type="text" id="SGIDId" data-role="combobox" data-source="sgdataSource" data-text-field="name" data-value-field="id" data-bind="value:SGID" data-placeholder="Select Queue..." data-value-primitive="true" />

</div>

Can someone please point out my stupid error in syntax or thinking!

Many thanks

Rob

asdad

Scheduler

answered on 13 Dec 2016