Telerik Forums
UI for ASP.NET MVC Forum
2 answers
82 views

I have a grid that I am editing InCell.  When I use the tab to navigate to the next cell it retains entered data and refocuses on the next cell as expected.   But, If I enter data in a cell and then click into another cell the data I entered is not retained and I don't get the warning message that the data was required.  I also have an issue where if I click off the cell with an active required warning it hangs up sometimes and won't refocus on the cell if I click on it.  I can get around this sometimes by tabbing twice which refocus on the cell with the warning.  Also, if I return to a cell to edit the contents the curser is positioned before the first character and I have to use the arrow keys to reposition within the text to make corrections.  I can't just click into the text to the position where I want to edit. Is this how it is supposed to work?  I have used IE, Firefox, and Chrome and it works the same way regardless of the browser. Any help would be greatly appreciated. 

Operating System - Windows 7 64bit 
.Net framework - Version 4.5.1
Visual Studio version - Visual Studio 2015
Preferred Language - C Sharp
MVC Version - MVC 5
View Engine - Razor
Version - 2016.3.1118
Product - Kendo UI Grid for ASP.NET MVC

JQuery - 2.2.0 as advised under ticket ID 1069790

Katharine
Top achievements
Rank 1
 answered on 27 Feb 2017
1 answer
97 views

I'm trying to use a grid with an existing db table that can't be altered.

There's no key, just a CAR_CD and CAR_DESC, both defined as strings.

In my datasource, when I don't specify a model.Id (like below), I get an error "There is no DataSource Model Id property specified."  in the Visual Studio debugger.  It's looking for an Id.

.DataSource(dataSource =>
        dataSource.Ajax()
        .PageSize(50)
        .Batch(true) // Enable batch updates
        .Model(model =>
        {
            model.Field(car => car.CAR_CD).Editable(true);
            model.Field(car => lob.CAR_DESC).Editable(true);
        })

 

SO... I change the CAR_CD to an Id (see below) and then get "CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type".

{
            model.Id(car => car.CAR_CD).Editable(true);
            model.Field(car => lob.CAR_DESC).Editable(true);
        })

 

Is there an easy way to use a natural key (CAR_CD + CAR_DESC)?  I can test them for uniqueness in the .net code, but I need to get the grid to function.

 

Thanks.

Duke
Top achievements
Rank 1
 answered on 27 Feb 2017
1 answer
3.9K+ views

I am trying to create a line chart binding to grouped data, but when I use the code below I get a "CS0411: The type arguments for method 'Kendo.Mvc.UI.Fluent.DataSourceGroupDescriptorFactory<object>.Add<TValue>(System.Linq.Expressions.Expression<System.Func<object,TValue>>)' cannot be inferred from the usage. Try specifying the type arguments explicitly." error when I run it and in Visual Studio it underlines the ".Add" for group.Add and all the property names of the model (see attached screenshot).

Any ideas why?

View:

@model IEnumerable<IntegrationLoader.Models.Application>
 
@(Html.Kendo().Chart()
        .Name("chart")
        .Title("Fatal Exceptions In Last 10 Days")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Line().Style(ChartLineStyle.Smooth)
        )
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("AppCounts_Read", "LogEntries"))
            .Group(group => group.Add(model => model.Name))
            .Sort(sort => sort.Add(model => model.Day).Ascending())
        )
        .Series(series =>
        {
            series.Line(model => model.FatalCount)
                .Name("#= group.value # (Count)");
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.Day)
            .Labels(labels => labels.Format("yyyyMMdd"))
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}"))
            .Line(line => line.Visible(false))
            .AxisCrossingValue(-10)
            .Title("Errors")
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}")
        )
)

 

Thanks,
Bill

Alex Hajigeorgieva
Telerik team
 answered on 27 Feb 2017
4 answers
186 views
Could someone provide or point me to a working example of how to popup add and edit a grid item that also contains a foreign key.
e.g.

ProductType:
ID
Name

Product:
ProductID
ProductName
ProductType

Product            Product Type
Peas                Vegetable
Melon               Fruit

Konstantin Dikov
Telerik team
 answered on 27 Feb 2017
4 answers
449 views
I've incorporated a custom editor by using a project found on a forum post.  I needed to add custom controls.  When you don't use a custom editor the built in editor hides the recurrence section when you select Edit Current Occurrence.  How can determine if the user selected Edit Current Occurrence so I can hide the recurrence section?

Here is my template:

@model GIS.Services.Pulse.Types.Models.TaskAsset
@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}
 
@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {
 
        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();
 
        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";
 
        return datePickerAttributes;
    }
}
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.Title))
</div>
<div data-container-for="Title" class="k-edit-field">
    @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.Start))
</div>
<div data-container-for="Start" class="k-edit-field">
 
    @(Html.Kendo().DateTimePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes(
        "startDateTime",
        "start",
        "value:start,invisible:isAllDay")))
 
    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes(
        "startDate",
        "start",
        "value:start,visible:isAllDay")))
 
 
    <span data-for="Start" class="k-invalid-msg"></span>
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.End))
</div>
<div data-container-for="End" class="k-edit-field">
 
    @(Html.Kendo().DateTimePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end,invisible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
 
    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDate",
            "end",
            "value:end,visible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
 
 
    <span data-for="End" class="k-invalid-msg"></span>
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-for="isAllDay" class="k-edit-field">
    <input id="is-all-day" data-bind="checked: isAllDay" data-val="true" id="isAllDay" name="isAllDay" type="checkbox" />
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.RecurrenceRule))
</div>
<div data-container-for="RecurrenceRule" class="k-edit-field">
    @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
        .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.Description))
</div>
<div data-container-for="description" class="k-edit-field">
    @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
</div>
 
<div class="k-edit-label">
    Asset
</div>
<div data-container-for="AssetID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.AssetID)
        .HtmlAttributes(new { data_bind = "value:AssetID", style = "width: 400px" })
        .DataTextField("Name")
        .DataValueField("AssetID")
        .OptionLabel("Select")
        .ValuePrimitive(true)
        .DataSource(ds => ds.Read("Assets", "Asset"))
        .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Owner
</div>
<div data-container-for="OwnerID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.OwnerID)
          .HtmlAttributes(new { data_bind = "value:OwnerID", style = "width: 400px" })
          .DataTextField("DisplayName")
          .DataValueField("UserID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Users", "Users"))
          .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Work Type
</div>
<div data-container-for="WorkTypeID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.WorkTypeID)
          .HtmlAttributes(new { data_bind = "value:WorkTypeID", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("WorkTypeID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("WorkTypes", "MaintenanceSchedule"))
          .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Duration Freq
</div>
<div data-container-for="DurationFreq" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.DurationFreq)
          .HtmlAttributes(new { data_bind = "value:DurationFreq", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("ID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
          .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Duration UOM
</div>
<div data-container-for="DurationUomId" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.DurationUomId)
          .HtmlAttributes(new { data_bind = "value:DurationUomId", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("UnitOfMeasureID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
          .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Grace Period Freq
</div>
<div data-container-for="GraceFreq" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.GraceFreq)
          .HtmlAttributes(new { data_bind = "value:GraceFreq", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("ID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
          .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Grace Period UOM
</div>
<div data-container-for="GraceUomId" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.GraceUomId)
          .HtmlAttributes(new { data_bind = "value:GraceUomId", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("UnitOfMeasureID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
          .ToClientTemplate()
    )
</div>
 
<div class="k-edit-label">
    Color
</div>
<div data-container-for="Color" class="k-edit-field">
    @(Html.Kendo().ColorPicker()
        .Name("Color")
        .Value("f0d0c9")
        .HtmlAttributes(new { data_bind = "value:Color" })
        .TileSize(s => s.Width(34).Height(19))
        .Palette(new string[] {
            "f0d0c9", "e2a293", "d4735e", "65281a",
            "eddfda", "dcc0b6", "cba092", "7b4b3a",
            "fcecd5", "f9d9ab", "f6c781", "c87d0e",
            "e1dca5", "d0c974", "a29a36", "514d1b",
            "c6d9f0", "8db3e2", "548dd4", "17365d"
        })
     )
</div>
 
@{
    ViewContext.FormContext = null;
}
Ivan Danchev
Telerik team
 answered on 27 Feb 2017
2 answers
285 views

I have a Bar Chart using a DateTime as a series group.  Everything works as I expected, but the legend values appear as the long UTC format as shown in the attached screenshot.  How to I get this to format to a short date (i.e. Thu Feb 16 2017).

<div class="panel panel-default">
    <div class="demo-section k-content wide">
        @(Html.Kendo().Chart<CBECloudBO2.ViewModels.ChartHourlySales7Day>()
                .Name("chartHourlySales7Days")
                .Title("Hourly Sales 7-day Comparitive")
                .DataSource(datasource => datasource
                    .Read(read => read.Action("Chart_HourlySales7Day", "Home"))
                    .Group(group => group.Add(model => model.SaleDate))
                    .Sort(sort => sort.Add(model => model.Hour).Ascending())
                    )
                .Legend(legend => legend.Visible(true))
                .ChartArea(chartArea => chartArea.Background("transparent"))
 
        .Series(series =>
        {
            series.Column(model => model.Value).Name("#= group.value #").CategoryField("Hour");
        })
        .CategoryAxis(axis => axis
            .Name("series-axis")
            .Title("Store Hour")
            .Categories(p => p.Hour)
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Title("Sale Totals")
            .AxisCrossingValue(0, int.MinValue)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
            .Template("#= series.name #: #= value #")
        )
        )
    </div>
</div>

 

Regards,

Shawn

Shawn
Top achievements
Rank 1
 answered on 24 Feb 2017
3 answers
526 views

Hi,

we are using TreeView with on demand loading of nodes. There is case when we need to select specific node that possibly wasn't loaded yet. So we get all needed IDs and use .expandPath expand one by one parent node of the target node. This was working fine with old 2014 kendo for mvc version. However, after switching to newest 2017.1 we are having a problem.

When .expandPath is called, we expect Expand event is called first - where we set up some values that will be used in reading of data. Then, expand would call reading of data where this prepared values are used. However, with new 2017.1 it always happens that .Data function of Read is called before Expand, which doesn't make sense for me, but could be I'm not understanding how it works.

Here are the code samples.

@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataTextField("Name")
    .DataImageUrlField("image")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("GetFolderDefinitionsProjectsAndActs", "ProjectsCrud").Data("additionalData")
        )
    ).Events(events => events
    .Expand("onExpand").Select("onNodeSelected").DataBound("onTreeViewDataBound")
    )
)

 

function additionalData(e) {
    return {
        id: startFolderID,
        nodeType: expandLevel,
        folderDefinitionID: folderDefinitionID
    };
}

   

function onExpand(ex) {
        var tree = $('#treeview').data('kendoTreeView');
        var dataItem = tree.dataItem(ex.node);
        expandLevel = dataItem.levelName;
        folderDefinitionID = dataItem.FolderDefinitionID;
        return true;
    }

 

So, at some point we call

var treeview = $("#treeview").data("kendoTreeView");
treeview.expandPath(returnData);

and we would expect function onExpand to be called before additionalData, but instead additionalData is called before onExpand.

Is this expected behavior?

Ivan Danchev
Telerik team
 answered on 24 Feb 2017
3 answers
600 views

Hi all:

Can I get aggregates result in ClientTemplate?

I tried  columns.Bound(c => c.idno).ClientGroupHeaderTemplate("# (Count: #= count#)");

with DataSource(DataSourceResult from MVC Action)

added .Aggregates(aggregates => { aggregates.Add(c => c.idno).Count(); }).Group(g => g.Add(c => c.idno))

The "count" value can be shown in Row.

But I want to create new a column with "count" value in each row,

columns.Bound(c => c.idno).ClientTemplate("#= count#"); and columns.Template(e => { }).ClientTemplate("#= count#");

It will get an error : Uncaught ReferenceError: count is not defined

 

Is it possibale to get aggregates result in ClientTemplate?

 

Thanks

Ram
Top achievements
Rank 1
 answered on 24 Feb 2017
3 answers
615 views

I am loading the content of an MVC Window

@(Html.Kendo().Window()
.Name(modalWindowName)
.Visible(false)
.Title("Loading...")
.Modal(true)
.Actions(actions => actions
    .Maximize()
    .Close()    
)
.Scrollable(true)
.Pinned(true)
//.Draggable(true)
.Resizable()
.Animation(false)
.Height(600)
.Width(navbarWindowWidth)
.Events(events => events.Refresh(onWindowRefresh))
)

 

via url, so I can re-use the window

var navbarWindow = $("#@(modalWindowName)");
var navbarWindowData = navbarWindow.data("kendoWindow");

 

var  navbarWindowURL = "@Html.Raw(@Url.Action("actionName", "controllerName")

navbarWindowData.refresh({
    url: navbarWindowURL
}).center();

 

But, I'm having trouble coming up with a way to put a toolbar or group of buttons in a footer at the bottom of the window. 

Below is a brief example of what the view from the URL (navbarWindowURL) will look like. You can I created a panel with a footer and such, but if the body of the panel is very large I have to scroll through the window to get to the footer, which is not a very pleasing UI for the end-user. Is there some way I can create a footer that will always stick to the bottom of the window or something so the end-user can always see the button? It also has to be able to re-adjust if the size of the window changes.

@using (Ajax.BeginForm("Update", "Settings", FormMethod.Post,
        new AjaxOptions
        {
            HttpMethod = "POST",
            OnBegin = "saving();",
            OnSuccess = "saved();",
            OnFailure = "failed();",
 
        }
        ))
{
 
 
 
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row" id="settingsResults"></div>
        </div>
        <div class="panel-body">
            <div>
                @(Html.EditorFor(m => Model.Settings))
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSave" class="btn btn-primary" type="submit">Save</button>
        </div>
    </div>
}

Are there any examples of windows with a toolbar or footer that contains buttons?

Veselin Tsvetanov
Telerik team
 answered on 24 Feb 2017
1 answer
311 views

Hello,

we use Kendo MVC Grid to display some documents. We have column for actions on document with dropdown of actions. Code of the column looks like this:

columns.Bound(p => p.ID).ClientTemplate(Html.Kendo().DropDownList().DataTextField("Text")
            .Events(e => e.Change("actionsDDLChange").Open("actionsDDLDataBound"))
            .HtmlAttributes(new { docID = "\\#=ID\\#", @lock = "\\#=Lock\\#", documentName = "\\#=DocumentName\\#", lockedBy = "\\#=ChangedBy\\#" })
            .DataValueField("Value").Name("ddl\\#=ID\\#").BindTo(ViewBag.DocActionsDDL)
            .ToClientTemplate().ToString()).Title("Actions").HtmlAttributes(new { @class = "templateCell" }).Sortable(false).Filterable(false);

 

Everything works fine in normal Grid. Then we tried to use the same code to be ClientDetailTemplate of another Grid and it doesn't work. We had to change this column to be like:

columns.Bound(p => p.ID).ClientTemplate("<button class=\"k-button\" >Download</button>"

This is just part of new code with buttons for other actions following. In other words, we had to lose .DropDownList approach. We get "Script error" in appgui.js if we try dropdown approach.

Is there a way to make this work with .DropDownList as tempalte for column, because we want this grid to look the same? We will probably want to reuse it as ClientDetailTemplate in other grids as well, or have Tab control as ClientDetailTemplate with this grid for documents in one of tabs, so we would use it as partial view. But we want to solve this problem first and we are out of ideas.

 

Konstantin Dikov
Telerik team
 answered on 24 Feb 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?