Hi.  I'm trying to run very simple validation for the grid inline edit function. 

 - GridEditMode.InLine

 - Server binding

 - Trying to add "onsubmit" attribute to the "GridForm" form element (it does not work)

Or does DataAnnotation based validation works for this case?  If so, please let me know any sample code for that.  I could only see AJAX version or non-grid version.

Below is my cshtml file:

@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;
@model WebApp.Features.Vendor.Index.Result
@{
    ViewBag.Title = "Vendor Management";
}
<div class="jumbotron">
    <div id="clientsDb">
        @Html.ValidationDiv()
        @(Html.Kendo().Grid((IEnumerable<PayBy.WebApp.Features.Vendor.UiController.Vendor>)Model.Vendors)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.VendorName).Title("Name").Width(30);
            columns.Bound(c => c.IsInternal).Title("Internal").Width(30);
            columns.Bound(c => c.AccountName).Title("Account").Width(50);
            columns.Command(commands => commands.Edit()).Width(30);
        })
        .ToolBar(toolbar => toolbar.Create().Text("Add"))
        .Sortable()
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .HtmlAttributes(new { style = "height: 480px;" })
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Server()
            .Model(model =>
            {
                model.Id(p => p.Id);
                model.Field(f => f.AccountName).Editable(false);
            })
            .Create("Update", "Vendor")
            .Update("Update", "Vendor")
            .Sort(sort => sort.Add("VendorShortName").Ascending())
        )
        )
    </div>
</div>
<div class="row">
</div>
<script>
    var form = $('#GridForm');
    if (form != null) {
        form.attr('onsubmit', 'return ValidateForm();');
    }
    function ValidateForm()
    {
        alert('validate');
        if ($('#VendorName').val().length == 0) {
            alert('[Name] Required field.');
            return false;
        }
        if ($('#VendorName').val().length > 256) {
            alert('[Name] Maximum 256 letters.');
            return false;
        }
        return true;
    }
</script>

Hi,

I have a Kendo Grid that I am building dynamically from a `System.Data.DataTable`. I am having issues trying to lock the columns.

I am setting a few columns to locked based on their title as you will see in my code. The boolean check is coming back as true or false where expected and that value is correctly being set in the `.Locked()` property. But the grid is not locking that column, nor is it giving me the `Lockable` option in the column menu.

Please see my code below:

       @model MvcProject.UnitOfWork.ViewModels.Reports.FacilityEquipmentDistributionVm


       @(Html.Kendo().Grid<dynamic>()
       .Name("resultsGrid")
                       .Columns(columns =>
                            {
                                columns.Group(group => group
                                    .Title("Facility Equipment Distribution Report : Date run - " + DateTime.Now.ToShortDateString())
                                    .Columns(header =>
                                    {
                                       
                                        foreach (System.Data.DataColumn column in Model.CombinedTable.Columns)
                                        {
                                            string title = "";
                                            bool showColumn;
                                            
                                            if (Model.ColumnTitles.TryGetValue(column.ColumnName, out title))
                                            {
                                                
                                            }
                                            else
                                            {
                                                title = column.ColumnName;
                                            }

                                            if (Model.ColumnsToShow.TryGetValue(column.ColumnName, out showColumn))
                                            {

                                            }
                                            else
                                            {
                                                showColumn = false;
                                            }

                                            bool lockColumn = (title == "PropertyRef" || title == "PropertyName" || title == "Address" || title == "Prefix" || title == "Floor");
                                            
                                           header.Bound(column.ColumnName)
                                                .Title(title)
                                                .Visible(showColumn)
                                                .Locked(lockColumn)
                                                .Lockable(true)
                                                .Width(title.Length * 8);

                                        }

                                    })
                                );
                            })

                        .HtmlAttributes(new { style = "height: 900px;" })
                            .Pageable(p => p
                                .ButtonCount(5)
                                .PageSizes(true)
                                .Refresh(true)
                            )

                            .Scrollable(s => s.Height("auto").Enabled(true))
                            .Sortable()
                            .Reorderable(reorderable => reorderable.Columns(true))
                            .Filterable()
                            .Groupable()
                            .ColumnMenu()
                            .Resizable(r => r
                                .Columns(true)
                            )
                                .Excel(excel => excel
                                    .FileName("Facility Equipment Distribution.xlsx")
                                    .Filterable(true)
                                    .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                    .AllPages(true)
                                )
                            .DataSource(d => d
                                .Ajax()
                                
                                .Read(read => read.Action("_FacilityEquipmentDistributionResults_Read", "Reports").Data("Genesis.Reports.Space.Search.getPaginationData"))
                                    .ServerOperation(true)
                                    .PageSize(20)
                                )
                                .ToolBar(tools =>
                                {
                                    tools.Pdf();
                                    tools.Excel();
                                })
        //PDF removed for now until it is patched
                                .Pdf(pdf => pdf
                                     .AllPages()
                                    .FileName("FacilityEquipmentDistribution.pdf")
                                    .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                )
                                //.Events(events => events.DataBound("Genesis.Reports.Space.Search.loadTT"))

)

Any help would be much appreciated.

Kind Regards,
Gareth

Is there a demo of how to connect a chart to the selected row(s) of a grid?  Basicly I have a grid and when the user selects a row(s) I want to have the selected data update a chart on the page.

Thanks,

Erik

I am trying to use a datepicker in a grid column that utilizes InCell editing.  The problem I am having is that the datepicker appears to revert back to the specified default value after I remove the focus from the datepicker cell into another cell.  Another interesting thing to note is that I can click back into the datepicker cell that I changed and the datepicker will once again show the correct date that I changed the cell too.  Any ideas what causes this behavior?

Here is the date snippet from my viewmodel:

 

Here is my Date.cshtml code:

 

And here is my view that contains the grid:

 

 

 

 

Hi,
is there a way to use a Kendo Grid with polymorphic items and Popup editing?

I'd like to define a base class BaseViewModel with some common properties and subclasses FirstViewModel and SecondViewModel with more specific properties. The Grid is bound to BaseViewModel, but in the Popup Editor I'd like to edit the subclasses. The controller produces an IEnumerable containing FirstViewModels and SecondViewModels.

I have defined EditorTemplates for FirstViewModel and SecondViewModel but the Model which is passed to when editing is always of type BaseViewModel.
Any suggestions?

Kind regards,
Thomas

I have a grid control which is bound to the model I have passed it in the view (local data):

 HireReport.cshml

 

    @model ReportingPortalWeb.Models.HireReportViewModel

     @(Html.Kendo().Grid(Model.StockReport)
          .Name("grid")
           .Columns(columns =>
                     {
                              columns.Bound(p => p.SohQty).Title("Quantity").Visible(Model.StockReport.Sum(t => t.SohQty) > 0);

                              ...

 

I want to add the export to excel function but this seems limited to remote data

     .ToolBar(tools => tools.Excel())

    ...

Is there no way to bind this to the local model data?

 

 ​

 

I would like to implement a drill through type action on a bar charts series.

Here is what i have so far:

 

Javascript/JQuery

Kendo Window

Oh and yes i know that the window is displaying static text... i will eventually be putting in a Grid to display the detail records (and question #2 relates to it) 

 

Here are my 2 issues/questions:

1. The window does pop up when i click on a series.  However the page behind it goes white and only the contents of the window appear.  Is there a way to allow the calling web page still appear (and not go blank).

2. In the javascript call to open the window is it possible to pass the contents of e to it (e contains parameter values that i want to use in the pop up window).

Thanks,

Corey

I have a kendo grid that gets data remotely (because I use the export to excel functionality). The column headers are bound to my model which is passed as empty before the data source request gets the populated one.

    @model ReportingPortalWeb.Models.HireReportViewModel

     @(Html.Kendo().Grid<StockReport>()
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.SohQty).Title("Quantity");
                      columns.Bound(p => p.StockName);
                      ​...
                      columns.Bound(p => p.SiteAddress3);
                      columns.Bound(p => p.PostCode);
                  })
                  .ToolBar(tools => tools.Excel())
                  .Groupable()
                  .Excel(excel => excel
                      .FileName("Kendo UI Grid Export.xlsx")
                      .Filterable(true)
                      .ProxyURL(Url.Action("CustomReport_Data", "Reports"))
                  )
                  .DataSource(dataSource => dataSource
                      .Ajax()
                                        .Read(read => read.Action("CustomReport_Data", "Reports").Data("GetData")))
                  .Pageable()
                  .Sortable()
                  .Scrollable()
                  .Filterable()
                  .HtmlAttributes(new {style = "height:550px;"})
                  )

Before having to use the excel export I passed the data when the gird was created and I could hide a column easily by doing something like 

     columns.Bound(p => p.PrCode).Visible(Model.StockReport.Count(t => t.PrCode.Any()) > 0);

 

now that I am remotely fetching the data instead, is there a data on load event that I can use to hide the columns in my report that don't have any data in them?

 

 

Hello,

I have seen examples of confirmation boxes applied to inline / cell editing.

How can I display a confirmation ("saved successfully" or "not saved successfully" using something like notification widget if the grid batch editing mode is used?

The Save command is calling the controller action for Save and returns a JSON request as a response. But I don't know yet to get the additional notifaction displayed.

Yours

Stephan

 

Hi,

I want to display customised tooltip on hover in one of the column in grid.
My requirement is:
I have Person's grid where I am displaying first name, last name, birth date details. There is an another column say "Go To". When user mousehover on that particular column's cells, I want to display tooltip template. In which there will be few links (addresses, emails, phones etc.) with person id.
Based on the person's Id the link in tooltip should be constructed, So clicking on it navigates to person details.

How to do this? I have searched on net but couldn't find exact or nearer example.
Need help.

Thanks,
Nirav