or
1 answer
807 views
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.
var request = $.ajax({
url: '/Controller/ActionMethod',
type: 'POST',
data: JSON.stringify(msg),
contentType: 'application/json; charset=utf-8'
}).success(function (data) {
if (0 >= data.error.length) {
if (data.icon) {
if (el.find('i').length) {
el.find('i').attr('data-tooltiptext', inputValue);
/*console.log(selectedTooltip);
selectedTooltip.tooltip.options.content = inputValue;
selectedTooltip.tooltip.refresh();*/
//$("#classesAvailableGrid").data('tooltiptext').refresh();
}
else {
var i = '<i id="com-' + el.data('rid') + '" class="fa fa-comment comment" data-tooltiptext="' + inputValue + '" aria-hidden="true"></i>';
el.find('div').append(i);
}
}
else {
el.find('div').empty();
}
swal({
title: data.title,
text: data.success,
type: "success",
timer: 1000,
});
}
else {
swal(data.title, data.error, "error");
}
}).error(function (data) {
});
I have tried several things but none have worked. Any help would be appreciated!
Thank you,
Jokull
Dimitar
Telerik team
answered
on
11 Dec 2017
3 answers
300 views
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?
Konstantin Dikov
Telerik team
answered
on
11 Dec 2017
3 answers
574 views
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?
Ivan Danchev
Telerik team
answered
on
11 Dec 2017
2 answers
1.0K+ views
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!
Stefan
Telerik team
answered
on
11 Dec 2017
4 answers
415 views
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?
5 answers
2.9K+ views
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 errorThe 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
5 answers
626 views
I have a TabStrip in the Index view for a controller:
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:
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.
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?
@{ 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></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?
1 answer
148 views
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?
Stefan
Telerik team
answered
on
08 Dec 2017
6 answers
2.4K+ views
Hi,
I've have to use Kendo Grid in several languages but in the same decimal and dates format (fr-FR). I managed to change Kendo language.
I also add the script and add the routine to change kendo culture.
<head>... <script src="~/Scripts/Kendo/cultures/kendo.culture.fr-FR.min.js"></script> <script> kendo.culture('fr-FR'); </script></head>I also add in web.config;
<system.web> <globalization culture="fr-FR" /> </system.web>If I put a breakpoint and examine kendo variable, i have kendo.cultures.current = 'fr-FR'. The culture file is correctly included in page sources.
Yet, the display format remains incorrect and when I edit a grid inline, I also have problems with validation.
Am I missing something?
Stefan
Telerik team
answered
on
08 Dec 2017
4 answers
248 views
I have a kendoGrid initialized in cshtml. It uses ajax binding.
The grid model looks like { int id, int typeId, string name, string value }.
The grid has 2 columns Name and Value and Value is editable InCell. For now grid works well with using by default usual textbox as editor. I have to improve the grid to have possibility of using different controls in the "value" field depending of the value of "typeId". I tried to use custom EditorTemplate for that but I cannot find a way to pass typeId to the template (the column is bound to "value"). Is it possible to pass there an extra parameter from the grid model or reach it out from the template somehow?
Regards, Alexey
Here is the link to the same post on Stackoverflow:
https://stackoverflow.com/questions/47577527/using-different-controls-in-a-editable-column
