Questions on UI for ASP.NET MVC Forum

1 answer

1.0K+ views

TabStrip passing content from one tab to another

I have a tabstrip that I am using as a "Wizard" and as you step through the different steps, data is entered and I am trying to figure a way to pass entered content from tab 1 to tab 2 etc. I know what the problem is but don't know how to solve it. So the tab is constructed as follows, initially just a modal window:

@(Html.Kendo().Window()

.Name("actionWindow")

.Title("(STEP 1 of 3)")

.Width(650)

.Height(300)

.Visible(false)

.Modal(true)

)

Then javascript loads the tabstrip

// this opens the cashManagement dialog action box

function cashManagement()

{

if (selectedResult.hasOwnProperty("account")) {

//debugger;

var id = selectedResult.account;

var window = $("#actionWindow").data("kendoWindow");

window.refresh({

url: '/Accounts/CashManagement/' + id,

data: { id: id }

});

window.open().center();

}

else {

}

CashManagement view:

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Animation(animation =>

{

animation.Enable(false);

animation.Open(open =>

{

open.Fade(FadeDirection.In);

open.Duration(AnimationDuration.Fast);

});

})

.HtmlAttributes(new { @class = "no-tab-tabstrip" })

.Items(tabstrip =>

{

tabstrip.Add()

.Text("")

.Selected(true)

.Content(m => Html.Partial("~/Views/CashManagement/_stepOne.cshtml", inputModel));

tabstrip.Add()

.Text("")

.Selected(false)

.Content(m => Html.Partial("~/Views/CashManagement/_stepTwo.cshtml", inputModel));

tabstrip.Add()

.Text("")

.Selected(false)

.Content(m => Html.Partial("~/Views/CashManagement/_stepThree.cshtml", inputModel));

}))

Then each of the steps gets input from the user and then the last step needs to use the data to do some server side "task".

The problem is that the tabs are all loaded when rendered so when data is entered it's after the fact and the last step is already "done". I have tried storing the input data in cookies and then attempting to reload the last tab so that it can grab the cookie data but the reload does nothing. Have tried a few attempts of reload, none error and none have any effect. The select of the last tab works so I know I have the right element. Code for reload below:

function raiseCashStepThree() {

$('#actionWindow').data("kendoWindow").title("(STEP 3 of 3)");

var tabstrip = $("#tabstrip").data("kendoTabStrip");

tabstrip.select(2);

//tabstrip.reload(tabstrip.items()[2]);

debugger;

tabstrip.reload();

//bstrip.reload(2);

$("#tabstrip").data("kendoTabStrip").select(2);

}

TabStrip

answered on 20 Dec 2019

3 answers

84 views

Bootstrap(?) Issue

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.3K+ 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

2.0K+ 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

383 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

64 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