Questions on UI for ASP.NET MVC Forum

3 answers

1.6K+ views

Importing Excel Data + Binding to Database

I'm working a project which will allow users to update several database tables with an Excel file. Using the Kendo Spreadsheet widget, I can import the file's information into the Kendo Spreadsheet widget, or I can create one with information bound to the tables I want to update and export that data, but I've yet to find a solution that will accomplish both.

Ideally, I'd like the user to be able to export a .xlsx file from the bound tables, edit that file to create new entries, and them import it back into the widget to view and save to the database. This would allow existing controllers to be utilized and provide a smooth one stop interface for the user.

Spreadsheet

answered on 11 Dec 2017

13 answers

2.1K+ views

KendoUI Grid Column Command :Custom Button Text for each row

Hello,

I need a custom text for each command button.

The label/text of the button depends on the data (E.g personal, name or DNI). It is different for every row

Please help me if you know the solution.

My source is:

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Command(command => command.Custom("Name").Text("CustomTextEachRow").Click("ShowRates")).Width(75);
//columns.Command(command => command.Custom("solicitud").HtmlAttributes(new { actionName = "Edit" }));
columns.Bound(p => p.ID_SOLICITUDSERVICIO).Visible(false);
columns.Bound(p => p.NOMBRE_CLIENTE).Title("Cliente");
columns.Bound(p => p.FECHA_SOLICITOSERVICIO).Format("{0: yyyy-MM-dd HH:mm:ss}").Title("Fecha");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("LeerExt_ControlInterno", "Consultas").Data("getParameter"))
.Model(model => { model.Id(p => p.ID_SOLICITUDSERVICIO); })
)
)

Grid

answered on 11 Dec 2017

1 answer

777 views

Refresh tooltip in grid

Hi,

I'm trying to refresh tooltip in grid but it's not working. Here's what I'm doing:

I have an MVC Grid and I initialize the tooltip like this:

var tooltip = $("#classesAvailableGrid").kendoTooltip({
filter: ".comment",
position: "top",
width: 180,
content: function (e) {
var dataItem = $('#classesAvailableGrid').data('kendoGrid').dataItem(e.target.closest('tr'));

var id = dataItem["Id"];

var text = $('#com-' + id).data('tooltiptext');

return text;
}
}).data("tooltiptext");

This works fine.

The functionality I'm seeking is when I click the cell where I have the tooltip I prompt the user with a popup input field where he can update the tooltip message. On success I save the new message to database but then I want to update the tooltip as well. I am able to update the data attribute but the actual message that is displayed on hover is still the same.

I have tried several things but none have worked. Any help would be appreciated!

Thank you,

Jokull

ToolTip

answered on 11 Dec 2017

3 answers

287 views

Relocate Export toolbar

Running ASP.NET MVC grid. Is there a way to reposition the export toolbar instead of always being located at the top? Either at the bottom or a way to invoke the export function from an external link/button?

Grid

answered on 11 Dec 2017

3 answers

558 views

"File type not allowed" - no localization

When using the validation configuration of Upload component and the user chooses a file that is not in the "AllowedExtensions" array, a short error message appears inside the upload component. While everything else is translated into German, this message is still in English. How can I provide a German translation to this?

Upload

answered on 11 Dec 2017

2 answers

987 views

Kendo grid column extends out of screen

Hello everybody.

As you can see here current grid I've made goes out of the screen only I apply "Filterable" property to it and only then. I need column filtering but without the grid extending out of my screen.

Here's the current code

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.ID);

columns.Bound(c => c.ErrorLevel);

columns.Bound(c => c.Time);

columns.Bound(c => c.Location);

columns.Bound(c => c.Data);

})

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")))

)

.Pageable(pager => pager.Refresh(false))

.Sortable(sortable => sortable.Enabled(true)).AutoBind(false)

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.AllowCopy(true)

.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Batch(false).PageSize(100)

.Model(model =>{

model.Field(gridMainAlias => gridMainAlias.ID).Editable(false);

model.Field(gridMainAlias => gridMainAlias.ErrorLevel).Editable(false);

model.Field(gridMainAlias => gridMainAlias.Time).Editable(false);

model.Field(gridMainAlias => gridMainAlias.Location).Editable(false);

model.Field(gridMainAlias => gridMainAlias.Data).Editable(false);

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

)

Thanks for help in advance!

Grid

answered on 11 Dec 2017

4 answers

388 views

Handling duplicate ids in different tabs

My use case calls for forms that may be duplicated across multiple TabStrip tabs as editors for different entities of the same type.

So tab 1 calls for Entity1 editor, tab 2 calls for Entity1 editor also.

This introduces possibility of duplicate IDs on the same page.

At the moment I have a super clunky prefix system utilizing ViewData.TemplateInfo.HtmlFieldPrefix. This is hardly intuitive nor easy to use.

One idea i had about managing this issue is to "unload" tabs as they get placed in the background. Essentially bundling up the html/data and storing it until the tab is selected again, where it'll unbundle and load into the tab.
I got as far as grabbing the contents of the tab via jQuery's .html() function, but reinserting the html doesn't do anything script-wise, i.e. no widgets are widgetizing.
Running into that, I'm not sure if there's any way to proceed with this idea.

Another idea I had is dumping the contents of a tab into an iframe. I haven't implemented anything like this yet, nor do I know if its a good idea.

Anyone else having to deal with this type of issue?
Any suggestions/comments on the ideas above?
What are your solutions?

TabStrip

answered on 09 Dec 2017

5 answers

2.8K+ views

TabStrip - how to pass model to partial views using LoadContentFrom

I'm trying to pass the model from my parent view through to the partial views that are being loaded in the tabstrip. At this point, what seems to be passed is a List<string> containing the type of the model rather than the model itself, which is a List<string> containing the words "Hello" and "Goodbye". Here's some sample code that demonstrates the issue.

The controller:

public ActionResult TabStrip()

{

ViewBag.Message = "TabStrip Test";

List<string> details = new List<string>();

details.Add("Hello");

details.Add("Goodbye");

return View(details);

}

public ActionResult TabA(List<string> details)

{

return PartialView(details);

}

public ActionResult TabB(List<string> details)

{

return PartialView(details);

}

The main View:

@model List<string>

@{

ViewBag.Title = "TabStrip";

}

<h2>TabStrip</h2>

@Model[0], @Model[1]

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Items(tabstrip =>

{

tabstrip.Add().Text("Tab A")

.Selected(true)

.LoadContentFrom("TabA", "Home", new { details = Model });

tabstrip.Add().Text("Tab B")

.Selected(true)

.LoadContentFrom("TabB", "Home", new { details = Model });

}))

The Partial Views:

Tab A:

@model List<string>

<p>Welcome to TabA!</p>

@Model[0]

Tab B:

@model List<string>

<p>Welcome to TabB!</p>

@Model[1] -- causes error

The result upon first loading the page is attached. The first item in the list shows up in the partial view as "System.Collections.Generic.List`1[System.String]" rather than "Hello." Upon clicking Tab B, an exception is thrown because there is no second item in the list.

So clearly the model is not being passed correctly to the partial views. Any ideas on this?

Thanks!

Laurie

public ActionResult TabStrip()

{

ViewBag.Message = "TabStrip Test";

List<string> details = new List<string>();

details.Add("Hello");

details.Add("Goodbye");

return View(details);

}

public ActionResult TabA(List<string> details)

{

return PartialView(details);

}

public ActionResult TabB(List<string> details)

{

return PartialView(details);

}

TabStrip

answered on 09 Dec 2017

5 answers

609 views

Action filled Tabs can't find scripts from partial views

I have a TabStrip in the Index view for a controller:

@{

ViewBag.Title = "My Index";

}

<div id="portal" class="k-content">

<div class="wrapper">

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Items(tabstrip =>

{

tabstrip.Add().Text("Information")

.Selected(true)

.LoadContentFrom("Information", "MyController");

tabstrip.Add().Text("Schedule")

.LoadContentFrom("Calendar", "MyController");

tabstrip.Add().Text("Plan")

.LoadContentFrom("Plan", "MyController");

tabstrip.Add().Text("Pending")

.LoadContentFrom("Pending", "MyController");

})

)

</div>

@section Scripts{

}

And the initial level of 'Action' result is a view from the controller:

For example, for the Plan action, the controller definition for that is:

public ActionResult Information()

{

//get model data....

model = blaw blaw

return View("Information", model);

}

I return a View because then I can define a Layout file to load required javascript files. Somehow the tab has NO knowledge of the scripts loaded via the containing razor view of the TabStrip!

My 'Information' view looks like a normal view with a specific minimal layout file to load scripts

However, even with this manner of getting scripts to load, only the data-load scripts run. For example, the event scripts to handle the selected Kendo ComboBox item do not fire.

The combo box is in a partial view loaded by the view (loaded in the tab): In the example below, the language combo box loads languages, but the Select event does not fire.

@(Html.Kendo().ComboBox()

.Name("languagesDdf")

.Placeholder("Select Language...")

.DataTextField("LanguageValue")

.DataValueField("LanguageId")

.Suggest(true)

.AutoBind(false)

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

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetLanguages", "Language");

}).ServerFiltering(true);

})

.Events(e =>

{

e.Select("onSelectLanguage");

})

)

So why can't the tabs see scripts loaded by the parent razor view/layout files?

Do I need to do something different with the tabstrip definition?

TabStrip

answered on 09 Dec 2017

1 answer

140 views

Grid input disappearing with Kendo Sortable

I am using the Kendo Sortable widget with my grid. My grid is using in-cell editing and when I am finished editing a cell and click into another editable cell the input I just entered disappears from the previous cell. It only does this when I am using the Sortable widget, if I turn the Sortable off the grid in-cell editing works normal.

I am using the Sortable as it is shown in this demo: http://demos.telerik.com/kendo-ui/sortable/integration-grid

The only difference is that the grid in the demo isn't an editable grid, so is that what could be causing the issue?

Grid

answered on 08 Dec 2017