Telerik Forums
UI for ASP.NET MVC Forum
17 answers
1.6K+ views
Hi,

I have a kendo grid that can be sorted, filtered, grouped, etc. via bound columns. I have action links in each row. If the user wants to filter the grid (sort, group, etc), then perform an edit action (navigates to another view), and then return back to the index page, the filtered records need to be preserved. I have tried the coding that is presented in the demo, but those are for situations within the index page (Save & Load buttons). I want to navigate from the index page and return back and keep the grid state preserved.

Thanks,
Suresh
Alex Hajigeorgieva
Telerik team
 answered on 05 Jul 2017
3 answers
376 views

Hi,

I am looking to use a bar chart with both positive and negative values.

This seems to work however the Labels for the Category Axis is obscured by the bars (see image "chart-wrong").

I have found a workaround to the issue by adding a Right Margin to the Labels (see image "chart-correct").

However this is not a solution. When the data set changes (which will be on a regular bases) the Labels go back to not being left aligned.

Is there a permanent solution to this issue?

 

Stefan
Telerik team
 answered on 05 Jul 2017
1 answer
525 views

I've set up a ForeignKey column with dropdown editor that works fine in GridEditMode.InLine but does not work at all in GridEditMode.PopUp

<div>
    Season ID
</div>
<div>
    @(Html.Kendo().DropDownListFor(model => model.Season)
        .Name("SeasonId_#=Season_ID#")
        .DataValueField("SId")
        .DataTextField("Name")
        .Value("#=SId#")
        .Events(e => e.Change("onChange"))
        .BindTo((System.Collections.IEnumerable) ViewData["seasons"])
        .ToClientTemplate().ToHtmlString()
    )
    @Html.ValidationMessageFor(model => model.Season_ID)
</div>

 

It creates a functioning dropdown Inline, but in PopUp the input field does not render, but rather shows the HTML:

 

Season ID
<input id="SeasonId_#=Season_ID#" name="SeasonId_#=Season_ID#" type="text" value="#=SId#" /><script>    kendo.syncReady(function(){jQuery("#SeasonId_#=Season_ID#").kendoDropDownList({"change":onChange,"dataSource":[{"SId":5,"Name":"1971-1972"},{"SId":6,"Name":"1972-1973"},{"SId":7,"Name":"1973-1974"},{"SId":8,"Name":"1974-1975"},{"SId":9,"Name":"1975-1976"},{"SId":10,"Name":"1976-1977"},{"SId":11,"Name":"1977-1978"},{"SId":12,"Name":"1978-1979"},{"SId":13,"Name":"1979-1980"},{"SId":14,"Name":"1980-1981"}......

 

Thanks.

Alex Hajigeorgieva
Telerik team
 answered on 04 Jul 2017
2 answers
1.5K+ views

Hi,
I'm really starting to doubt my coding skills but I am also starting to doubt if it was a good decision to buy Kendo UI, because until now I could not come up with something that worked from beginning.

I'm having this sample Model structure:
Persons -> have Orders -> have Products

The Orders model has a VAT Property. value of this property can be "Intra" or "Extra". On my Order Editor Template, I added a DropDownList to select the corresponding value:

01.@(Html.Kendo().DropDownList()
02.    .Name("VAT")
03.    .DataTextField("Text")
04.    .DataValueField("Value")
05.    .Events(e => e.Change("changeType"))
06.    .BindTo(new List<SelectListItem>() {
07.        new SelectListItem() {
08.            Text = "Intra EU",
09.            Value = "Intra"
10.        },
11.        new SelectListItem() {
12.            Text = "Extra EU",
13.            Value = "Extra"
14.        }
15.    })
16.    .Value(Model.VAT)
17.    .HtmlAttributes(new { style = "width: 100%", @class = "k-input" })
18.)

 

When I delete the the following line from the code, it works without problem.

1..Events(e => e.Change("changeType"))

 

As soon as I add the line and the following corresponding JavaScript, the Editor window does not show up anymore and the error below is thrown:
Javascript:

1.<script>
2.    function changeType() {
3.        var selectedType = $("#VAT").val();
4.    };
5.</script>

 

1.Uncaught Error: Invalid template:'<div class="k-edit-label">    <label for="Id">Id</label></div><div class="k-edit-field">    <input class="k-textbox k-input" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" value="0" /></div><input class="k-input" id="VAT" name="VAT" style="width: 100%" type="text" /><script> kendo.syncReady(function(){jQuery("\#VAT").kendoDropDownList({"change":changeType,"dataSource":[{"Text":"Intra EU","Value":"Intra"},{"Text":"Extra EU","Value":"Extra"}],"dataTextField":"Text","dataValueField":"Value"});});</script><script>    function changeType() {        var selectedType = $("#VAT").val();    };</script>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<div class="k-edit-label">    <label for="Id">Id</label></div><div class="k-edit-field">    <input class="k-textbox k-input" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" value="0" /></div><input class="k-input" id="VAT" name="VAT" style="width: 100%" type="text" /><script>\tkendo.syncReady(function(){jQuery("#VAT").kendoDropDownList({"change":changeType,"dataSource":[{"Text":"Intra EU","Value":"Intra"},{"Text":"Extra EU","Value":"Extra"}],"dataTextField":"Text","dataValueField":"Value"});});</script><script>    function changeType() {        var selectedType = $("';VAT").val();    };</script>;$kendoOutput+=;}return $kendoOutput;'
2.    at Object.compile (kendo.all.js:198)
3.    at Object.d [as template] (jquery.min.js:2)
4.    at init._createPopupEditor (kendo.all.js:49618)
5.    at init.editRow (kendo.all.js:49540)
6.    at HTMLAnchorElement.<anonymous> (kendo.all.js:49297)
7.    at HTMLDivElement.dispatch (jquery.min.js:3)
8.    at HTMLDivElement.r.handle (jquery.min.js:3)

 

I really do not have any idea why I'm having so many problems implementing the grids and editor templates. Could you please help me or point me in the right direction? Unfortunately, the project zip file is too large to upload here in the forum.

Thank you,
Sascha

José
Top achievements
Rank 1
 answered on 04 Jul 2017
1 answer
190 views

I want to hide the full screen button on the media player.  Can you please tell me how to do that?

Thanks,

Mark

Georgi
Telerik team
 answered on 04 Jul 2017
5 answers
400 views

Hi all,

I've got a new Grid question for you guys. I'm using a grid with Ajax Binding. For editing, I want to use a custom editor template. The problem is that the editor window is not opening when clicking on edit in the grid. Here is the code of my grid:

01.@(Html.Kendo().Grid<ServiorInventaire.Shared.Models.Dynamic.ColumnDescription>()
02.    .Name("Columns")
03.    .NoRecords(Language.NoRecords)
04.    .Columns(columns =>
05.    {
06.        columns.Bound(p => p.ColumnName).Title(Language.ColumnsColumnName).Width(250);
07.        columns.Bound(p => p.Type).Title(Language.ColumnsType).Width(250);
08.        columns.Command(command => { command.Edit(); }).Width(250);
09.    })
10.    .ToolBar(toolbar =>
11.    {
12.        toolbar.Create().Text(Language.Create);
13.    })
14.    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ColumnDescription").Window(w => w.Title(Language.ItemsPageTitle)))
15.    .DataSource(dataSource => dataSource
16.        .Ajax()
17.        .Model(m =>
18.        {
19.            m.Id(p => p.ColumnName);
20.        })
21.        .PageSize(20)
22.        .Read(read => read.Action("ReadColumnDescriptions", "Item").Data("getTableName"))
23.        .Create(create => create.Action("EditingPopup_Create", "Grid"))
24.        .Update(update => update.Action("EditingPopup_Update", "Grid"))
25.        )
26.)

 

Here is my custom template:

01.@using Kendo.Mvc.UI;
02. 
03.@model ServiorInventaire.Shared.Models.Dynamic.ColumnDescription
04. 
05.<div class="k-edit-label">
06.    @Html.LabelFor(model => model.ColumnName)
07.</div>
08.<div class="k-edit-field">
09.    @Html.Kendo().TextBoxFor(model => model.ColumnName).HtmlAttributes(new { @class = "k-input" })
10.</div>
11. 
12.<div class="k-edit-label">
13.    @Html.LabelFor(model => model.Type)
14.</div>
15.<div class="k-edit-field">
16.    @Html.Kendo().TextBoxFor(model => model.Type).HtmlAttributes(new { @class = "k-input" })
17.</div>

 

So you see, there is nothing special in my template and in my grid. Still the window is not opening. If I remove ".TemplateName("ColumnDescription")" to specify a custom template, the default editor template opens without problem. Could anybody help me with this?

Thank you very much,

Sascha

Pavlina
Telerik team
 answered on 04 Jul 2017
1 answer
166 views

Is there a way to add a ComboBox in the toolbar to customizing it ?

Best regards.

Ivan Danchev
Telerik team
 answered on 04 Jul 2017
3 answers
392 views
Hi!

 

I need to have a button in my group header rows. Added ClientGroupHeaderTemplate but button is not displayed (in fact nothing has changed at all). What's wrong in my code?

 

Thank you!

@(Html
    .Kendo()
    .Grid<ClientSearchResultModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.Type)
            .ClientGroupHeaderTemplate("<button class='myButton'>Select Items</button>");
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .Groupable()
    .PersistSelection()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetDataModels", "Client"))
    )
)

 

Side question: is it possible to define common group header template for all collumns?

Viktor Tachev
Telerik team
 answered on 03 Jul 2017
2 answers
131 views

Hello, 

 

We have some tasks in out gantt and the duration of the tasks is zero. No template is rendered, but we still want to display a template even in this case. Is this possible? If yes, how?

 

Thank you, 

Iuliana

Ivan Danchev
Telerik team
 answered on 03 Jul 2017
1 answer
371 views

I have a application that has a kendo grid.

I can filter the grid using several dropdownlists that are outside the grid.

When I click on search, I add filters to the datasource filter list. For example,

    var dataSource = $("#grid").data("kendoGrid").dataSource;
                var dataSourceFilterQuery = new Array();
   
        if ($("#something").data("kendoDropDownList").value() !== null) {
                        dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
                }
   
                dataSource.filter(dataSourceFilterQuery);    

Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.

     const filtersObject = {
                    Something: whatever.value(),
                    ...
                };
   
                this.storage.setItem("Filter", JSON.stringify(filtersObject));

When I restart the application, the dropdownlists are populated with whatever is in localStorage

    const filter =  JSON.parse(localStorage.getItem("Filter"));
   
                    $("#something").data("kendoDropDownList").value(filters.whatever || "");               
                }

The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.

So, what I want is to do apply this

    var dataSource = $("#grid").data("kendoGrid").dataSource;
                var dataSourceFilterQuery = new Array();
   
        if ($("#something").data("kendoDropDownList").value() !== null) {
                        dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
                }
   
                dataSource.filter(dataSourceFilterQuery);

before the grid is displayed.

Is this possible?

Tks in advance.

Preslav
Telerik team
 answered on 30 Jun 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?