Questions on UI for ASP.NET MVC Forum

3 answers

79 views

I'm having an odd issue.

I have a custom popup editor with an internal style section. The custom template is based on one I used earlier.

I have an Id selector for two of the fields. The value of this selector was originally set to 250px. If I change the setting to anything larger than 250px, a gray bar appears at the right hand side of the textbox. This only happens when I increase the size of the textbox.

I can't figure out why this is happening.

Has anyone else had this issue? If so, then how did you resolve it?

Thanks

General Discussions

answered on 20 Dec 2019

9 answers

3.0K+ views

accessing row data from custom command template

Hello,

I have a grid defined like this:

01.@(Html.Kendo().Grid(data)

02. .Name("Results")

03. .Pageable()

04. .Sortable()

05. .Events(e => e.DataBound("onSearchResultsDataBound"))

06. .Columns(columns =>

07. {

08. columns.Bound(r => r.Name).Title("The Name").Width(60);

09. columns.Bound(r => r.Publisher).Title("A Publisher").Width(60);

10. columns.Command(c => c.Custom("CustomButton").TemplateId("commandsTemplate")).Width(70);

11. })

12.)

13.

14.<script id="commandsTemplate" type="text/x-kendo-template">

15. <div class='dropdown'>

16. <button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><i class='fas fa-ellipsis-h'></i> </button>

17. <div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdownMenuButton'>

18. @(Html.ActionLink("Edit", "Details", "Blabla", new { id = "#: ID#" }, new { @class = "dropdown-item" }))

19. </div>

20. </div>

21.</script>

And I would like to be able to access the ID of the items in my template. This doesn't work at the moment and I'm unable to find an example that does what I'm trying to achieve.

Is there any way to achieve my requirement? So basically the command column contains a button with the ellipsis icon and when we click this button get a dropdown which contains some actions that are possible, such as edit, and if I click on edit, I should be redirected to the details action of the controller for the correct ID. You can see in attachment what it looks like. So the look and feel is fine, it's just being able to get the ID to create the action link correctly.

Thanks!

Grid

answered on 20 Dec 2019

6 answers

1.2K+ views

Parent Data Item to use in Detail Edit Template

Hi,

I'm having a problem in a parent/child grid. My parent grid displays summary-type information. The child grid is editable. When I go to create a new row in the child grid, I need several bits of information from the parent grid row dataitem to display in my popup form template. I was searching around and found an example that accomplished the task this way:

function OnRequirementEdit(e) {

debugger;

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

var detailGridId = "#requirementsgrid_" + e.model.IdString;

var detailGrid = $(detailGridId).data("kendoGrid");

var parentGridDataItem = parentGrid.dataItem(detailGrid.element.closest("tr"));

//Do stuff with the data from parentGridDataItem

}

The only problem is, I realized later that the data item was not from the detail grids parent row, but rather from the NEXT parent row down. So closest tr is actually finding the next one down. I tried to compensate by using detailGrid.element.prev("tr") but then I'm getting null for parentGridDataItem.

I should note, my client detail template is a tab control with 2 tabs and a grid on each tab (the second grid isn't of consequence because it's display only) but I'm not sure if that is causing issues navigating the DOM to get the parent tr.

Grid

answered on 20 Dec 2019

15 answers

1.9K+ views

Problems editing numeric values in the grid

I have been trying out the Kendo UI MVC Grid and have now faced a problem I could use some help with while trying to implement the batch editing functionality:

1. Data that is displayed in the grid has dots as decimal separators while the culture setting would use commas. Regardless of the culture setting, any model data that the grid passes to the update method is invalid because the decimal values are validated incorrectly.
2. For some reason, the grid doesn't allow me to edit numeric fields (nullable double) at all. Clicking the cell clears the field but doesn't show me a real editor or allow me to change the value.

Thank you.

View:

@(Html.Kendo().Grid<ExpakV2.Models.GridViewResult>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.ItemID).Width("10%").Title(i18n.s("itemCode"));

columns.Bound(p => p.Code).Width("10%").Title(i18n.s("itemCode"));

columns.Bound(p => p.Name).Width("25%").Title(i18n.s("itemName"));;

columns.Bound(p => p.ItemGroup1).Width("10%").Title(i18n.s("itemGroup1"));

columns.Bound(p => p.ItemGroup2).Width("10%").Title(i18n.s("itemGroup2"));

columns.Bound(p => p.ItemGroup3).Width("15%").Title(i18n.s("itemGroup3"));

columns.Bound(p => p.AbcClass).Width("5%").Title(i18n.s("abcClass"));

columns.Bound(p => p.MinBalance).Width("5%").Title(i18n.s("minBalance")).Format("{0:0.####}");

columns.Bound(p => p.MaxBalance).Width("5%").Title(i18n.s("maxBalance")).Format("{0:0.####}");

columns.Bound(p => p.MinBalanceRate).Width("5%").Title(i18n.s("minBalanceRate")).Format("{0:0.####}");

columns.Bound(p => p.MaxBalanceRate).Width("5%").Title(i18n.s("maxBalanceRate")).Format("{0:0.####}");

columns.Bound(p => p.sum_of_quantities).Width("5%").Title(i18n.s("sum_of_quantities")).Format("{0:0.####}");

columns.Bound(p => p.avg_of_quantities).Width("5%").Title(i18n.s("avg_of_quantities")).Format("{0:0.####}");

columns.Bound(p => p.sum_of_value).Width("5%").Title(i18n.s("sum_of_value")).Format("{0:0.####}");

columns.Bound(p => p.avg_of_value).Width("5%").Title(i18n.s("avg_of_value")).Format("{0:0.####}");

columns.Bound(p => p.Unit).Width("5%").Title(i18n.s("itemUnit"));

columns.Bound(p => p.AvgPrice).Width("5%").Title(i18n.s("avgPrice")).Format("{0:0.####}");

columns.Bound(p => p.Location).Width("5%").Title(i18n.s("location"));

})

.Pageable()

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

.Scrollable()

.Filterable()

.Sortable()

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

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetDataForKendoGrid", "Sale"))

.Model(model => { model.Id(p => p.ID); })

.Update("EditItemInKendoGrid", "Sale")

.PageSize(100)

)

.ToolBar(toolbar => { toolbar.Save(); })

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

Controller actions:

public ActionResult GetDataForKendoGrid([DataSourceRequest] DataSourceRequest request)

{

int page = request.Page;

int pageSize = request.PageSize;

Report report = userDb.Reports.Find((int)HttpContext.Session["ReportID"]);

IQueryable<GridViewResult> tempdata = AdditionalDataProvider.GetGridViewItemDataSource(report);

System.Collections.IEnumerable data = tempdata.OrderBy(t => t.ID).Skip((page-1)*pageSize).Take(pageSize).ToList();

int total = tempdata.Count();

var result = new DataSourceResult()

{

Data = data,

Total = total

};

return Json(result);

}

[HttpPost, ValidateInput(false)]

public ActionResult EditItemInKendoGrid([DataSourceRequest] DataSourceRequest request, GridViewResult editable)

{

if (ModelState.IsValid)

{

// update code, the state is always invalid

}

else

{

ViewData["EditError"] = "Invalid model state";

}

return Json(ModelState.ToDataSourceResult());

}

Model:

public class GridViewResult

{

public int ID { get; set; }

public string ItemID { get; set; }

public string Code { get; set; }

public string Name { get; set; }

public string Supplier { get; set; }

public string AbcClass { get; set; }

public double? MinBalance { get; set; }

public double? MaxBalance { get; set; }

public double? MinBalanceRate { get; set; }

public double? MaxBalanceRate { get; set; }

public string Unit { get; set; }

public double? AvgPrice { get; set; }

public int? Location { get; set; }

public string ItemGroup1 { get; set; }

public string ItemGroup2 { get; set; }

public string ItemGroup3 { get; set; }

public double? sum_of_quantities { get; set; }

public double? avg_of_quantities { get; set; }

public double? sum_of_value { get; set; }

public double? avg_of_value { get; set; }

}

Grid

answered on 19 Dec 2019

1 answer

1.2K+ views

Grid Editing Custom MVC - DateTime column doesn't turn into "Kendo DatePicker"

Hi everyone,
I used "Grid - Editing Custom", when I click DateTime column "(columns.Bound( p => p.myDate)" , my code not covered by;

<span class="k-widget k-datepicker" style>
<span class="k-picker-wrap k-state-default">
<input class="text-box single-line" data-val="true" type="date" value="1.01.0001" ..... />

Here this is my case;
my result only <input class="text-box single-line" data-val="true" type="date" value="1.01.0001" ..... />
not covered picker spans.

When I used also "dropdown" in grid column, when I click my column, my code not covered by;

I checked my all css and javascript files.

Please help me.
Thank you.

Grid

answered on 18 Dec 2019

2 answers

366 views

DateRangePicker Not Recognized

I am trying to use the DateRangePicker in Telerik for ASP.NET MVC. I am using the latest version of Telerik and ASP.NET MVC. However, I get the following error, both in the editor and at runtime (so it's not an Intellisense issue):

Kendo.Mvc.UI.Fluent.WidgetFactory<System.Collections.Generic.List

<KPIView_MVC.Models.KPIData>> does not contain a definition for 'DateRangePicker' and no extension method 'DateRangePicker' accepting a first argument of type Kendo.Mvc.UI.Fluent.WidgetFactory<

System.Collections.Generic.List<KPIView_MVC.Models.KPIData>> could be found

How can I get it to work correctly?

DateRangePicker

answered on 17 Dec 2019

1 answer

59 views

Pasting text via jquery, hilighting text, and tabbing within the editor

Hi,

I have a need to paste text containing template fields into the editor via jquery with the user be able to tab between the template fields with the template field being "selected" when they are on that field

For example, the user may choose to have the following text pasted into the editor: "Please enter the {{date}} and {{time}}.". The template fields are {{date}} and {{time}}. After the data is pasted, the cursor needs to be positioned in the first template field with the template field selected (hilighted). In this example, {{date}} would be selected allowing the user to replace the template text with data that they type in. The user could then press the tab key to move to the next template field - in this example, it would be the {{time}} template field. The goal, for example, is to be able to paste in 20 lines of boilerplate code and simply tab to the items that need to be changed.

I have this working for a simple TextEdit field, but I now need similar functionality for a Editor field.

I know how to paste the template string via $('#Content').data('kendoEditor').value(results.Content) but I don't know how to trap the tab key and "select" fields.

Thanks in advance,

Scott

Editor

answered on 17 Dec 2019

5 answers

501 views

TreeList with dynamic binding

Hi!

I want to create TreeList with custom columns count. There is my code:

@(Html.Kendo().TreeList<dynamic>()

.Name("treelist")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

var c = columns.Add().Field(column.ColumnName);

}

})

.Filterable()

.Sortable()

.DataSource(dataSource => dataSource

.Read(read => read.Action("Read", "Home"))

.Model(m =>

{

var id = Model.PrimaryKey[0].ColumnName;

m.Id(id);

//m.ParentId(); what i should do here???

foreach (System.Data.DataColumn column in Model.Columns)

{

var field = m.Field(column.ColumnName, column.DataType);

if (column.ColumnName == id)

{

field.Editable(false);

}

})

)

HomeController returns:

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

DataTable products = DataCache.FullTable;

if (request.Aggregates.Any())

{

request.Aggregates.Each(agg =>

{

agg.Aggregates.Each(a =>

{

a.MemberType = products.Columns[agg.Member].DataType;

});

}

return Json(products.ToDataSourceResult(request));

}

I see examples on GutHub, but i don't find anything about dynamic binding.

TreeList

answered on 16 Dec 2019

1 answer

107 views

Url.Action in Column Template

Is there a way I can use a Url.Action in a column template so the can appear similar to the foreign key function in the grid.

Class TimeFrame

{

}

columns.Add().Field(e => e.TimeFrameId).Template("@Url.Action("GetTimeFrame","TimeFrame", new {Id = #:TimeFrameId#})");

TreeList

answered on 16 Dec 2019

1 answer

147 views

Convert to Telerik Application Exception

Failed to execute command.

System.ArgumentException: Illegal characters in path.
at System.IO.Path.CheckInvalidPathChars(String path, Boolean checkAdditional)
at System.IO.Path.Combine(String path1, String path2)
at Telerik.VSX.Internal.ProjectManagement.ProjectFileLocator.GetProjectItemPathsRecursive(String projectItemName, ProjectItems projectItems, String pathSoFar, IList`1 accumulatedResults)
at Telerik.VSX.Internal.ProjectManagement.ProjectFileLocator.GetProjectItemPaths(String projectItemName)
at Telerik.VSX.Web.MasterPageProcessing.Locator.RazorMasterPageLocator.GetMasterPagePresent()
at Telerik.KendoUI.Mvc.VSX.MasterPageProcessing.ProjectSettingsReader.EnsureMasterPageDetectedInitialized()
at Telerik.KendoUI.Mvc.VSX.ProjectConfigurators.ProjectConfigurationTypeSelector.GetConvertProjectPreWizardData(IScenarioDef template)
at Telerik.KendoUI.Mvc.VSX.ProjectConfigurators.ProjectConfigurationTypeSelector.ProjectConversion()
at Telerik.KendoUI.Mvc.VSX.ProjectConfigurators.StreamlinedProjectConfiguration.StartConvertWizard()
at Telerik.KendoUI.Mvc.VSPackage.CommandExecutor.Execute(UInt32 commandId)
at Telerik.VSX.VSPackage.PackageBase.CommandCallback(Object sender, EventArgs e)

Trying to figure out why I'm getting this illegal path exception, I'm not sure if it's related to my master page or what. Is there any way to do this manually?

General Discussions

answered on 16 Dec 2019