Hi, we use a kendo grid with a popup editor.

@(Html.Kendo().Grid<OrderViewModel>()
            .Name("orderGrid")
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderDialog"))
            .ToolBar(x => x.Create().Text("Add Order"))
            .Columns(columns =>
            {
                columns.Bound(column => column.OrderID);
                columns.Bound(column => column.Name);
                columns.Command(column =>
                {
                    column.Edit();
                    column.Destroy();
                }).Width(230);
            })
            .Events(x => x.Edit("onGridEdit"))
            .DataSource(ds => ds.Ajax()
                .Read(r => r.Url("/Orders/Index?handler=ReadOrder"))
                .Update(u => u.Url("/Orders/Index?handler=UpdateOrder"))
                .Create(c => c.Url("/Orders/Index?handler=CreateOrder"))
                .Destroy(d => d.Url("/Orders/Index?handler=DestroyOrder"))
                .Model(m =>
                {
                    m.Id(id => id.OrderID);
                })
                .PageSize(10)
            )
            .Pageable()
        )

The OrderDialog looks something like this

@model Models.OrderViewModel

<div class="k-edit-label">
    @Html.LabelFor(m => m.Name)
</div>
<div class="k-edit-field">
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>

...

We would like to be able to hide some fields in the editor if the entity being edited is new (which can be determined by the OrderID). This can be achieved by using the edit event of the grid, but we would rather like to do it based on a model property, like this:

@model Models.OrderViewModel

@if(Model.OrderID == 0)

{

<div class="k-edit-label">
    @Html.LabelFor(m => m.Name)
</div>
<div class="k-edit-field">
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>

}

Is this possible? When debugging, it seems the editor is initialized with a null model, so that the line above crashes.

Hi guys, im trying to read network path saved in the database to read an image.

i have the path saved as \\TP-amk-camp02\somefolder\somefolder\2022-01-21 \ Data\ in the database. How can i read the network path to display it on the grid?

see below html markup

  columns.Bound(c => c.ThumnailPath).Title("Thumbnailscan").Width(249).Encoded(false).ClientTemplate(
                        "<div style='text-align:left;'>#=FolderGUID ? FolderGUID : '' #  </div> " +
                            "<div id='ExampleBox_#=FolderGUID ? FolderGUID : -1#' data='#=FolderGUID#' class='Example_Box'>" +
                                "<img  class='Example_Image' id='ExampleImage_#=FolderGUID#' src=' " + Url.Content("#:data.ThumnailPath#") + "thumbnails.jpg'/> " +

kind regards

Tony

Hi, 

?EGood Day,

I am new to kendo ui and we are having an issue due to the upgrade of Jquery (1.x.x->3.6.0). The issue is "Syntax error, unrecognized expression: .field-validation-valid[data-valmsg-for=], .field-validation-error[data-valmsg-for=]" once the validation on the screen fires. Correct me if I am wrong, kendo ui should not be dependent on any Jquery versions. We are also checking if we need to change the validation process instead of using the said kendo validator. We are still hoping that there is still a way to fix this issue.
Below is the kendo version we are currently using.

Kendo Version: 2012.3.1114.340
Platform: ASP.NET MVC

Found the cause _findMessageContainer it is on the kendo.web.js, will just comment this to fix the issue

Today I upgraded one of our web apps to the latest version of UI for ASP.NET MVC and since then the DropDownList component doesn't appear to be rendering/styled correctly. I recreated the theme using the Progress Sass Theme Builder tool to eliminate the stylesheet itself as the issue. I've included screenshots below of what the DropDownList component looks like before and after the upgrade. Can anyone advise? Thanks in advance.

Before upgrade:-

After upgrade:-

Implementation:-

@(Html.Kendo().DropDownListFor(model => model.AssetSubTypeId)
                      .OptionLabel("Asset Type/Subtype...")
                      .BindTo(new SelectList(Lookups.AssetTypeSubType, "Key", "Value"))
                      .Events(events =>
                      {
                          events.Change("onChange_AssetSubTypeDropDownList");
                      }))

I'm having an issue getting the selected item from the passed event, mostly because the demo uses "e.dataitem"

like this:

function onSelect(e) {
        if ("kendoConsole" in window) {
            var dataItem = e.dataItem;
            kendoConsole.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
        }
    }

@(Html.Kendo().MultiSelect()
                              .Name("JobIds")
                              .HtmlAttributes(new { style = "Width:700px; height:60px; overflow-y:scroll;", aria_label = "editor" })
                              .DataTextField("job_name")
                              .DataValueField("job_id")
                              .HeaderTemplate("<div class=\"dropdown-header\">" +
                                        "<span style=\"width=350px\">Job Name</span>" +
                                        "<span style=\"width=350px\">Parent Name</span>" +
                                        "</div>\n <table>")
                              .ItemTemplate("<span class = \"namespan\">#: data.job_name #</span> <span class=\"parentspan\">#: data.job_parent #</span >")
                              .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("JobSearch", "SupportEditor");
                                    })
                                    .ServerFiltering(true);
                                })
                              .Events(e =>
                              {
                                  e.Select("Job_onSelect")
                                  })


function Job_onSelect (e) {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
    }

event :: select (undefined : undefined)

function Job_onSelect(e) {
console.log($("#JobIds").data("kendoMultiSelect").value().toString());
}

Hi there! In the code below when i reach $("#bans-grid").kendoGrid() function i get the type of error i've mentioned in the title. I don't understand why. Any help will be appreciated!

 $("#saveButton").kendoButton({
              click: function() {

                  var channelsData = $("#bans-grid").data().kendoGrid.dataSource.view();
                  var channelsDataJson = JSON.stringify(channelsData);

                      $("#bans-grid").kendoGrid({
                          dataSource: {
                                 transport: {
                                     update: {
                                         data: channelsDataJson,
                                         url: "/bg/NotosPrime/Bans/BanChannels",
                                         type: "PUT"
                                       }
                                     },
                                     schema: {
                                         model: {
                                             id: "Id"
                                         }
                                     }
                                }
                             });
                             $("#bans-grid").dataSource.sync();
                }
            });

public JsonResult InsertWithImage([DataSourceRequest]DataSourceRequest request, HttpPostedFileBase Picture)
        {
            var item = repository.CreateNew();
            try
            {
                UpdateModel(item);
                if (Picture != null)
                {
                    Picture.InputStream.Read(item.Image, 0, (int) Picture.InputStream.Length);
                    item.Image_Ext = Picture.ContentType;
                }
                repository.Add(item);
                unitOfWork.SaveChanges();
            }
            catch (Exception err)
            {
                ...
            }
            return
                Json((new[] { item }.ToDataSourceResult(request, ModelState)));
        }

<fieldset>
    ...
    <div class="row">
            @Html.LabelFor(model => model.Image)<br />
            @(Html.Kendo().Upload().Name("Picture").Multiple(false)
                .HtmlAttributes(new Dictionary<string, object>{
                                                                  {
                                                                      "style", "width: 100%"
                                                                  }}))
            @Html.ValidationMessageFor(model => model.Image)
        </div>
</fieldset>

When activating the editable.mode in a checkbox it makes the UI control non clickable.

Details: When the mouse hover the checkbox it activates the editable mode on the checkbox but right after that when I try to click it the UI does not response.

Kendo UI version: '2016.1.112'

Hello,

I'm having a strange problem with a cascading dropdown. I have an in cell edit grid for a list in my model. I have two dropdowns in editor templates. CustomerContact cascades from Customer. Both dropdowns are bound to a SelectListItem object on my model with properties "Text" and "Value". Both dropdowns function normally on initial selection and the value of both dropdowns is successfully set as an object. I'm able to use #= data.Text # in a ClientTemplate to display the text of the selected item.

This is where it gets weird. If I click to focus the cell containing my cascaded CustomerContact dropdown, and then click off without actually expanding the dropdown, the value changes from being the whole object to just the DataValueField ("Value" in my case). I've checked and sure enough the datasource change event is triggered when i click off of the cell for the CustomerContact dropdown even though I haven't opened it. This doesn't happen to the Customer dropdown, so it must be something with the cascade but I really can't understand what is causing it. Code below and some screenshots of before and after click my second dropdown's cell. Any help would be appreciated!

Grid:

@(Html.Kendo().Grid(Model.ScheduledInteractions)
     .Name("scheduled-interactions-grid")
     .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
           {
                    model.Id(p => p.Id);
                    model.Field(p => p.Customer).DefaultValue(new SelectListItem() { Text = "- Select -", Value = "-1" });
                    model.Field(p => p.CustomerContact).DefaultValue(new SelectListItem() { Text = "- Select -", Value = "-1" });
             })
            .ServerOperation(false))
            .Columns(c =>
            {
                c.Command(cmd => cmd.Destroy()).Width(100);
                c.Bound(x => x.Customer).EditorTemplateName("CustomerDropdown")
                    .ClientTemplate("#= data.Customer ? data.Customer.Text : '' #" +
                    "<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].Customer' value='#= data.Customer #' />"
                );
                c.Bound(x => x.CustomerContact).EditorTemplateName("CustomerContactDropdown")
                .ClientTemplate("#= data.CustomerContact ? data.CustomerContact.Text : '' #" +
                    "<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].CustomerContact' value='#= data.CustomerContact #' />"
                );
                c.Bound(x => x.InteractionType).EditorTemplateName("InteractionTypeDropdown")
                .ClientTemplate("#= InteractionType #" +
                    "<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].InteractionType' value='#= InteractionType #' />"
                );
                c.Bound(x => x.Description).ClientTemplate("#= Description #" +
                    "<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].Description' value='#= Description #' />"
                );
            })
            .ToolBar(tb => {
                tb.Create();
            })
            .Navigatable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
        )

Editor Templates:

@model SelectListItem
    @(Html.Kendo().DropDownListFor(m => m)
        .Name("customer-select")
        .HtmlAttributes(new { @class = "form-control", name = Html.NameFor(m => m) })
        .OptionLabel("- Select -")
        .DataTextField("Text")
        .DataValueField("Value")
        .Filter("contains")
        .DataSource(ds =>
        { 
            ds.Read(read =>
            {
                read.Action("CompanyOptions", "Common", new { Area = "API" }).Data("filterCustomersInGrid");
            }).ServerFiltering(true);
        })
    )
    @Html.ValidationMessageFor(m => m, "", new { @class = "text-danger" })

@model SelectListItem
    @(Html.Kendo().DropDownListFor(m => m)
        .Name("customer-contact-select")
        .HtmlAttributes(new { @class = "form-control", name = Html.NameFor(m => m) })
        .OptionLabel("- Select -")
        .DataTextField("Text")
        .DataValueField("Value")
        .Filter("contains")
        .DataSource(ds => 
        { 
            ds.Read(read => 
            {
                read.Action("ContactOptions", "Common", new { Area = "API" }).Data("filterContactsInGrid");
            }).ServerFiltering(true);
        })
        .AutoBind(false)
        .CascadeFrom("customer-select")
    )
@Html.ValidationMessageFor(m => m, "", new { @class = "text-danger" })

Javascript:

function getCurrentGridRow() {
    var grid = $("#scheduled-interactions-grid").data("kendoGrid");
    var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
    return grid.dataItem(editRow);
}

function filterCustomersInGrid() {
    var row = getCurrentGridRow();
    return { contains: '', currentId: row.Customer ? row.Customer.Value : null };
}

function filterContactsInGrid() {
    var row = getCurrentGridRow();
    return { companyId: row.Customer ? row.Customer.Value : null, contains: '', currentId: row.CustomerContact ? row.CustomerContact.Value : null };
}

function getIndex(dataItem) {
    var data = $("#scheduled-interactions-grid").data("kendoGrid").dataSource.data();
    return data.indexOf(dataItem);
}

Value of Dropdowns After Initial Selections

After Cell Click:

Hi guys,

we been using Kendo version 2020.1.406.545. is it a must to upgrade to the latest?

kind regards

Tony