Questions on UI for ASP.NET MVC Forum

2 answers

844 views

Find Column Names during Edit Event with Frozen Locked Columns

As I understand it, when you have locked column in the grid there will be two separate table elements for the data items - one for locked columns and one for the regular ones. I haven't stumbled across how to address the two separate table elements separately. The code below works beautifully until you start locking columns. If any columns are locked, the fieldName will wind up containing the name of an adjacent column.

I need to determine how to get the correct column names during edit regardless of their locked/unlocked condition. Any help or suggestions are greatly appreciated. -Darron

var currentItem;
var currentColumn;

function grid_edit(e) {
var grid = this;
var model = grid.dataItem(grid.current().closest("tr"));
currentItem = model;
var fieldName = grid.columns[e.container.index()].field;
currentColumn = fieldName;
if (currentColumn == "Contact" || currentColumn == "ShipFrom" || currentColumn == "ShipTo")
{
showModalPopUp(currentColumn);
}

} </script>

Grid

answered on 22 Jan 2018

1 answer

379 views

Q1 2018 - Support for jQuery 3.x, jQuery 1.12.4

Hi,

The recent version has a dependency on jQuery 1.12.4. This is strange for me as previous versions were including 1.12.3. The version 1.12.4 has a serious security vulnerability https://snyk.io/test/npm/jquery/1.12.4?severity=high&severity=medium&severity=low . On the other hand 1.12.3 does not have it https://snyk.io/test/npm/jquery/1.12.3?severity=high&severity=medium&severity=low.

So my questions:

1) Why the version was upgraded?

2) Is it save to replace jquery.min.js content with the 1.12.3 version ?

3) Is it save to replace jquery.min.js content with the 3.x version ? I have found the compatibility list for UI for jQuery (https://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions) - I hope MVC is the same code with additional MVC wrappers.

General Discussions

answered on 22 Jan 2018

1 answer

318 views

Grid edit popup scrolls page

I have a grid on a page, and when the user double clicks one of the rows, it opens the popup editor for the selected record. But if the user had scrolled down the page to select the record, when the popup opens, it re-scrolls to the top of the page. Very disconcerting for the user.

I'm using a custom template, and not setting the top position anywhere. Is there anyway to change how this behaves?

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

.Name("policyGrid")

.Columns(cols =>

{

cols.Bound(c => c.ClientId).Title("ID").Width(75);

cols.Bound(c => c.ClientLegalName).Title("Legal Name");

cols.Bound(c => c.ClientDBAName).Title("DBA Name");

cols.Bound(c => c.LocationCode).Title("Location").Width(100);

cols.Bound(c => c.LocationWCState).Title("WC State").Width(100);

cols.ForeignKey(f => f.ProviderId, (IEnumerable) ViewData["providers"], "RecordId", "ProviderName").Title("Provider");

cols.Bound(c => c.PolicyId);

cols.Bound(c => c.EffectiveDate).Format("{0:d}").Title("Effective").Width(100);

cols.Bound(c => c.ExpirationDate).Format("{0:d}").Title("Expiration").Width(100);

cols.Bound(c => c.PEO).Width(75);

cols.Bound(c => c.IsError).Title("Error").ClientTemplate(

"<div style='text-align: center'>" +

"# if (IsError) { # " +

"<img src='" + Url.Content("~/Content/redcircle.png") + "' height='16' width='16'/>" +

"# } else { # " +

"<img src='" + Url.Content("~/Content/greencircle.png") + "' height='16' width='16'/>" +

"# } #" +

"</div>").HtmlAttributes(new { style="padding: 0 0 0 0 !important;"}).Width(75);

cols.Command(c =>

{

c.Edit();

c.Destroy();

});

})

.Resizable(r => r.Columns(true))

.Scrollable(s => s.Height("auto"))

.Sortable()

.Pageable(p => p.PageSizes(new List<object> { 10, 20, 30, 40, 50, 100, 250, 500 }).Refresh(true).ButtonCount(10))

.Filterable(f => f.Enabled(true))

.Selectable(s => s.Mode(GridSelectionMode.Single))

.Events(ev =>

{

ev.DataBound("gridBound");

ev.Edit("setMode");

ev.Change("selectionChanged");

})

.AutoBind(true)

.DataSource(ds => ds

.Ajax()

.Group(g =>

{

g.Add(c => c.ClientId);

})

.PageSize(25)

.ServerOperation(true)

.Model(m =>

{

m.Id(d => d.RecordId);

m.Field(d => d.ClientId);

m.Field(d => d.ClientLegalName);

m.Field(d => d.ClientDBAName);

m.Field(d => d.LocationCode);

m.Field(d => d.LocationWCState);

m.Field(d => d.ProviderId);

m.Field(d => d.PolicyId);

m.Field(d => d.EffectiveDate);

m.Field(d => d.ExpirationDate);

m.Field(d => d.PEO);

m.Field(d => d.IsError);

m.Field(d => d.Notes);

})

.Update(u => u.Action("SavePolicy", "Policy"))

.Read(r => r.Action("GetPolicies", "Policy").Type(HttpVerbs.Get))

.Destroy(c => c.Action("DeletePolicy", "Policy"))

.Events(ev =>

{

ev.RequestEnd("requestEnd");

ev.RequestStart("requestStart");

})

)

.ToolBar(tb =>

{

tb.Custom().Text("Add New Policy").HtmlAttributes(new {id = "addNewPolicy", style = "float:left"});

tb.Custom().Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" });

tb.Custom().Text("Collapse Groups").HtmlAttributes(new { id = "gridCollapseGroups", style = "float:right;" });

tb.Custom().Text("Expand Groups").HtmlAttributes(new { id = "gridExpandGroups", style = "float:right;" });

tb.Custom().Text("Run Integrity Check").HtmlAttributes(new {id = "checkIntegrity", style = "float:right;"});

// tb.Custom().Text("DEV Save Settings").HtmlAttributes(new { id = "gridSaveSettings", style = "float:left;" });

})

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("PolicyEdit").Window(w => w.Title("Edit Master Policy").Width(700)))

.Groupable())

Grid

answered on 19 Jan 2018

4 answers

1.5K+ views

[Solved] Fixed width columns with scroll

Hi,

I would like to set the widths of my columns and display a horizontal scrollbar since width exceeds container. When I try my code the columns get compressed with no horizontal scrollbar. If I resize a column, the scrollbar does appear. Is there a way to honor the fixed widths and have a horizontal scrollbar appear below instead of shrinking the widths?

@(Html.Kendo()
.Grid(Model.MyData)
.Name("myData")
.Columns(column =>
{
column.Bound(s => s.Col1).Width(60);
column.Bound(s => s.Col2).Width(80).Title("Col2");
column.Bound(s => s.Col3).Width(30).ClientTemplate("<span>#= Col3 != null ? Col3 : '' #</span>");
... several others
column.Bound(s => s.ColX).Width(100).ClientTemplate("<span>#= ColX != null ? ColX : '' #</span>");
})
.ColumnMenu()
.Scrollable(s => s.Enabled(true).Height("auto"))
.Pageable(builder => builder.PageSizes(new List<object> { 20, 50, "all" }))
.Filterable()
.Sortable()
.Groupable()
.Resizable(resize => resize.Columns(true))
.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.Read(read => read.Action("MyReadAction", "MyController")
)
))

Grid

answered on 18 Jan 2018

1 answer

403 views

Using a tabstrip with datasource help

I am pulling in a tabstrip to show details within a template on the kendo grid. I do my initial pull for the grid, but would like to use a separate datasource for the tabstrip. I only have one tab that holds all these detail. Is there a better way of achieving this? I do want to show everythign in teh table like the HTML shows, but want to pull it from its own datasource when the detail table is displayed.

I do it elsewhere successfully but thats with using a grid within the template.

Below is the grid code and the template code

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(i => i.DarwinInvoiceNumber).Title("Invoice").ClientTemplate("<a href='" + Url.Action("Current", "PayrollInvoices", new { i = "#: DarwinInvoiceNumber#" }) + "' >#: DarwinInvoiceNumber#</a>").Width(100);

columns.Bound(i => i.DivisionID);

//columns.Bound(i => i.Date).Format("{0:MM/dd/yyyy}");

//columns.Bound(i => i.CheckDate).Format("{0:MM/dd/yyyy}");

columns.Bound(i => i.DateDisplay).Title("Date"); //09/26/2017 DS TFS # 2798

columns.Bound(i => i.CheckDateDisplay).Title("Check Date"); //09/26/2017 DS TFS # 2798

columns.Bound(i => i.Total).Format("{0:C}");

columns.Bound(i => i.Employees);

columns.Bound(i => i.Employees).Title("Checks").Width(100);

columns.Bound(i => i.TotalGross).Title("Gross Wages").Format("{0:C}");

})

.Sortable()

// .Selectable()

.Scrollable()

.ToolBar(tools => tools.Excel())

.Excel(excel => excel

.FileName("PayInvoices.xlsx")

.Filterable(true)

)

.Groupable()

.ColumnMenu()

.Pageable()

.Filterable()

.ClientDetailTemplateId("template")

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

.Reorderable(reorder => reorder.Columns(true))

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(15)

.Read(read => read.Action("Get_InvoicesRead", "PayrollInvoices"))

)

.Excel(excel => excel

.FileName("InvoiceList.xlsx")

.Filterable(true)

.AllPages(true)

//.ProxyURL(Url.Action("Excel_Export_Summaries_Save", "Reports"))

)

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

)

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

@(Html.Kendo().TabStrip()

.Name("tabStrip_#=DarwinInvoiceNumber#")

.SelectedIndex(0)

.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))

.Items(items =>

{

items.Add().Text("Details").Content(

"<div class='invoice_details sub-table-background'>" +

"<table class='table table-bordered'><tr><td><label>Pay Period Begin:</label></td><td>#=kendo.toString(StartDate,'MM/dd/yyyy')#</td><td><label>FICA Med</label></td><td>#= kendo.toString(TotalFicaM,'c') #</td><td><label>Total Benefits</label></td><td>#= kendo.toString(TotalBenefits,'c') #</td></tr>"

+

"<tr><td><label>Pay Period End:</label></td><td>#= kendo.toString(EndDate,'MM/dd/yyyy') #</td><td><label>FICA SS</label></td><td>#= kendo.toString(TotalFicaSS,'c') #</td><td><label>Credits</label></td><td>#= kendo.toString(TotalCredits,'c') #</td></tr>"

+

"<tr><td><label>Net Wages:</label></td><td>#= kendo.toString(NetWagesPayRun,'c')#</td><td><label>FUTA</label></td><td>#= kendo.toString(TotalFUTA,'c') #</td><td><label>Fees </label></td><td>#= kendo.toString(TotalFees,'c') #</td></tr>"

+

"<tr><td><label>Sales Tax:</label></td><td>#= kendo.toString(Tax,'c')#</td><td><label>SUTA</label></td><td>#= kendo.toString(TotalSUTA,'c') #</td><td><label>Amount Due</label></td><td>#= kendo.toString(AmountRemaining,'c') #</td></tr>"

+

"<tr><td><label>Non Gross:</label></td><td>#= kendo.toString(TotalNonGross,'c') #</td><td><label>Worker's Comp</label></td><td>#= kendo.toString(TotalWC,'c') #</td><td></td><td></td></tr>"

+

"</table></div>"

);

})

.ToClientTemplate()

)

</script>

Grid

answered on 18 Jan 2018

1 answer

1.4K+ views

Cannot use Kendo within areas

Hi,

Hope someone can help me out with this.

I have created a new project in which I have successfully added Telerik UI ASP.Net MVC. I can use the following code in the index view of my project:

@(Html.Kendo().DatePicker().Name("datepicker"))

However my issue is that I have split my project into areas, and for some reason the code above doesn't work in the index views in these areas. I get an Compilation error that reads:

"HtmlHelper<dynamic>' does not contain a definition for 'Kendo' and no extension method 'Kendo' accepting a first argument of type 'HtmlHelper<dynamic>' could be found (are you missing a using directive or an assembly reference?"

Do I need to add additional references somewhere in these areas?

Appreciate any help, thanks.

General Discussions

answered on 18 Jan 2018

2 answers

176 views

Javascript Error "Error: Invalid template:'"

Hi,

At the moment I am converting an application with Telerik MVC To Kendo UI.

a lot of stuff I already migrated, but this one it troubling me for a couple of days now.
The structure I have is as following.
- I have a tabsptrip and whithin the items I have grids.
- those grids contain a "DetailView" or as in the new situation "ClientDetailTemplateId"

- the clientTemplate inself contains a tabstrip as well.

and untill here everything is ok.
I can add a tabstrip Item with only HTML.
but as soon as I add an other grid to the tabstrip of the lowest item I get a Javascript Error: "Error: Invalid template:'"

and I don't know why, I tried a lot of different ways of adding the grid.

is there someone who can help me? I'm using version "2017.3.1026" of Kendo UI.
thank you

TabStrip

answered on 18 Jan 2018

1 answer

6.5K+ views

DropDownList with enums

I am trying to use a DropDownList with an enum.

@Html.Kendo().DropDownListFor(model => model.Program) where Program is of type RecyclingProgram which is an Enum.

How do I get the enum values to:

Display in the drop-down list?
Update the model when it is posted back to the server?

DropDownList

answered on 18 Jan 2018

9 answers

957 views

Scheduler weeks in year view on timeline

Hello,

There doesn't seem to currently be a year view for the scheduler that would display time in weeks in a timeline, am I correct in this? On the other hand, is there any detailed documentation for implementing your own views. I mean documentation on what functions to overwrite in TimelineMonthView / what they do exactly and what the different timeslots and groups are.

Scheduler

answered on 17 Jan 2018

1 answer

114 views

Show New Resource Data In New Column

hello telerik.

i'm using telerik gantt chart mvc.

i have added one more button and dialog box to handle one more ResourceAssignment in my chart control. the 2nd one is all the customized dialog box to show new resource assignments.

now i'm facing an issue in showing the new ResourceAssignments data in New Column side by the original ResourceAssignment column at treeview side.

i want to show both resource assignments data in two separate columns. currently both resource's data is showing in the same column that is not what i want.

i've attached images for clarification

Gantt

answered on 17 Jan 2018