Questions on UI for ASP.NET MVC Forum

1 answer

1.1K+ views

Kendo multiselect Select event and dataItem

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 + ")");
        }
    }

My attempt to recreate this failed, dataItem has no such members:

@(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 + ")");
    }

The console reads:

event :: select (undefined : undefined)

The only way i have managed to pull data is with direct reference to the multiselect like below:

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

But this does not provide the values of selected item value as it is selected; instead it only gives the full value of the multiselect before the change occurs (e.g. if 3 items are selected it only returns items 1 and 2, and when the first item is selected it returns nothing).

MultiSelect

answered on 25 Jan 2022

1 answer

381 views

Ungaught TypeError. Can not read properties of undefined (reading 'data')

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();
}
});

Button

Grid

answered on 25 Jan 2022

8 answers

1.1K+ views

Grid with upload in custom editor template popup

Hi,

I've been trying to set a grid in popup edit mode, with an upload in a custom editor template, but can't get this to work, the doesn't have a value. Here's my editor template and controller, the view only have a grid set with ajax CRUD operations and popup edit mode. If this possible (a sync upload in editor template), or I need to set async save for the upload?

Controller:

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)));
        }

EditorTemplate:

<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>

Eduardo

Upload

answered on 24 Jan 2022

1 answer

197 views

Bug in Safari Browser

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'

Checkbox

Grid

answered on 20 Jan 2022

0 answers

163 views

In Cell Edit Grid - Value of Cascading Dropdown in Editor Template Gets Reset from Object to DataValueField After Edit

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:

Grid

updated question on 19 Jan 2022

0 answers

308 views

is it a must to always upgrade Telerik Kendo versions?

Hi guys,

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

kind regards

Tony

General Discussions

asked on 19 Jan 2022

1 answer

415 views

[Solved] How can I hide the "Add Task" button but still keep the Gantt Chart editable?

I am attempting to keep the Gantt Chart editable, but remove the ability to create new tasks/child entries.

I have tried adding this CSS and it did not work:

  .k-gantt-actions .k-button {
            visibility: hidden;
        }

The button still shows.

Any help?

Gantt

answered on 19 Jan 2022

1 answer

173 views

How can I disable automatic default filtering on the Grid?

In the grid control I want to do GridFilterMode.Row filtering but to increase performance I want to remove the auto complete and default filtering. How can I disable that option and just make it a manual filter only?

Filter

answered on 19 Jan 2022

1 answer

389 views

Best practices for source files added via the NuGet package

We've added the Telerik.UI.for.AspNet.Mvc4.2021.3.1207 NuGet package to our project and I was wondering what the best practices are for excluding unneeded content from publishing. There is a folder called 2021.3.1207-source which by default is published with all the other content that the NuGet package has added. So far we have manually marked the content to not be included when published in our build pipelines, but we're wondering if there is a more standard way of doing this? Is there a NuGet package which excludes the source folder?

In addition to this, is there a preferred method of excluding themes from a project? Again we can manually remove them or mark them to not be published, but I was wondering if there is a suggested way to configure what is and isn't included.

Many thanks

General Discussions

answered on 19 Jan 2022

1 answer

159 views

Grid edit drop-down default to current cell value

I'm using a kendo UI grid for MVC and I've managed to create a dropdown for a field in the grid using an editor template. The only problem is that the drop-down does not default to the value that is currently in the field. Can someone explain how to do this or point me to a demo? Thanks.

Grid

answered on 18 Jan 2022