Questions on UI for ASP.NET MVC Forum

5 answers

2.5K+ views

Anyone get the kendo window to work with partial views? I really enjoy MVC partial views for code resuse and readability, but Kendo windows don't give control back when they are modal. Tried it two different ways: where the content is the partial view and where the partial view contains the kendo window.

It also seems to screw up the other window on the page. If I just have the one normal window, it works. If I have both, they are both broken. If I have just the partial view window, it doesn't work.

Window

answered on 20 Sep 2017

2 answers

294 views

[Solved] Refresh time

I am using custom AJAX binding on a MVC grid. I have paging enabled to show the refresh button at the bottom. Would it be possible to retrieve the refresh time and display somewhere? Not sure if possible inside of the grid control or somewhere else on the page. Basically I'd like to display to the user when the grid data was last updated (both on initial load and manually initiating a refresh).

Grid

answered on 19 Sep 2017

1 answer

433 views

Show conditional tooltip when selecting a row

I have some data in a grid that is just too wide; the number of columns pushes my custom edit and delete buttons off the side. So want I'd like to do is cut back on the number of columns in the grid, but when selecting a row, popup a tooltip with the rest of the data, if and only if it meets a certain criteria.

If they select a row where the visible column of Error is false, do nothing. If they select a row where the Error column is true, show a tooltip with the error.

How can I implement this?

BTW, I only use whole row select, never individual column selections, and I never use inline editing, always the popup editor. This makes hovering or selecting a whole row much easier.

Grid

answered on 19 Sep 2017

1 answer

382 views

Popup Editor - overriding Update

How can I intercept the Update button press on the popup editor?

I don't like using the Html Model "For" helpers, instead I'm a bit old school where I use javascript to populate my form before it shows. Because of this, when I Add or Edit a record, obviously the model isnt populated with the form field values. So how I can detect when the Update button was pressed for either an Add or Edit, and so I can collect the values programmatically to pass to the MVC action for Edit / Create?

Grid

answered on 19 Sep 2017

1 answer

808 views

Setting focus to an AutoComplete doesn't work

I have a popup dialog (Using Kendo Window), and the first form field in this window form is an autocomplete. When the dialog opens, the control does not have focus until the user clicks in it, which I want to eliminate. I'd like to set the focus there, but it doesn;t seem to work.

@(Html.Kendo().Window()

.Name("polciyEdit")

.Title("Add New Master Policy")

.Visible(false)

.Draggable()

.Position(p => p.Top(150))

.Width(700)

.Modal(true)

.Content(@<text>

<div id="PolicyEdit">

<table style="width: 100%;">

<tr>

<td style="text-align: right">

@Html.Label("Client:")

</td>

<td>

@(Html.Kendo().AutoComplete()

.Name("addClientId")

.DataTextField("ClientName")

.Filter("contains")

.HtmlAttributes(new { style = "width: 100%", placeholder = "Client ID or Client DBA Name", tabindex = 1 })

.DataSource(s => s.Read("GetClientList", "Policy").ServerFiltering(false))

.Events(e => e.Select("clientSelected"))

)

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Doing Business As: ")

</td>

<td>

<span id="clientDBA"></span>

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Location Code: ")

</td>

<td>

@Html.Kendo().TextBox().Name("addLocCode").HtmlAttributes(new { style = "width: 100%;", tabindex = 2 })

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("WC State: ")

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("addWCState")

.DataValueField("Abbreviation")

.DataTextField("Abbreviation")

.BindTo(new USA().States)

.OptionLabel(" -- Select State -- ")

.HtmlAttributes(new { style = "width: 100%;", tabindex = 3 })

)

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Provider: ")

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("providerCode")

.DataValueField("RecordId")

.DataTextField("ProviderName")

.BindTo((IEnumerable)ViewData["providers"])

.OptionLabel("-- Select Provider --")

.HtmlAttributes(new { style = "width: 100%;", tabindex = 4 })

)

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Policy Id: ")

</td>

<td>

@Html.Kendo().TextBox().Name("addPolicyId").HtmlAttributes(new { style = "width: 100%;", tabindex = 5 })

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Effective Date: ")

</td>

<td>

@(Html.Kendo().DatePicker().Name("addEffDate").HtmlAttributes(new { style = "width: 100%", tabindex = 6 }))

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Expiration Date: ")

</td>

<td>

@(Html.Kendo().DatePicker().Name("addExpDate").HtmlAttributes(new { style = "width: 100%", tabindex = 7 }))

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("PEO: ")

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("addPeo")

.DataValueField("Value")

.DataTextField("Text")

.OptionLabel("-- Select PEO --")

.BindTo(new List<SelectListItem>()

{

new SelectListItem() { Text = "10", Value = "10" },

new SelectListItem() { Text = "40", Value = "40" },

new SelectListItem() { Text = "60", Value = "60" }

})

.HtmlAttributes(new { style = "width: 100%;", tabindex = 8 })

)

</td>

</tr>

<tr><td colspan="2"><hr class="info"/></td></tr>

<tr>

<td colspan="2" style="text-align: right">

<a id="btnAddPolicy" role="button" class="k-button k-button-icontext k-primary k-grid-update" href="#" tabindex="9"><span class="k-icon k-i-check"></span>Update</a>

<a id="btnCancelAdd" role="button" class="k-button k-button-icontext k-grid-cancel" href="#" tabindex="10"><span class="k-icon k-i-cancel"></span>Cancel</a>

</td>

</tr>

</table>

</div>

</text>))

The code that opens the window is:

$("#addNewPolicy").click(function(e) {

e.preventDefault();

$("#polciyEdit").data("kendoWindow").open();

$("#addClientId").data("kendoAutoComplete").focus();

});

But the control still isn;t given focus unless the user clicks in the form field. So how do I programmatically set the focus to the first control (the autocomplete control) when the dialog opens?

AutoComplete

answered on 19 Sep 2017

3 answers

193 views

[Solved] Prevent Shape Editing but not Moving (Dragging)

How do I turn off editing and deletion of shapes in a diagram, but still allow them to be repositioned by dragging? I can turn off editing for shapes, connectors and the whole diagram, but then I can't move them.

Diagram

answered on 19 Sep 2017

6 answers

724 views

How to using ClientTemlate with custom class()

Hi, i'm trying to render the value in class.

a.Bound(p => p.Username)

.Title("User Picture")

.ClientTemplate("<span>#=Username#</span><img src='" + CustomClass.GetPicture("#=Username#") + "'>");

#=UserUsername# not getting a value. But <span>#=Username#</span> working with rendered value (john.smith).

when i write name as string in class, it's working and i'm getting the user picture;

a.Bound(p => p.Username)

.Title("User Picture")

.ClientTemplate("<span>#=Username#</span><img src='" + CustomClass.GetPicture("john.smith") + "'>");

Thank You

Grid

answered on 19 Sep 2017

1 answer

1.2K+ views

Kendo Grid- Web Api Consume in MVC application

Hello all,

Package id: Telerik.UI.for.AspNet.Mvc5.Trial, version="2017.2.621", targetFramework="net461"

OS: Windows 7 Professional

browser version: Google Chrome, Version 60.0.3112.113 (Official Build) (64-bit)

Environment: Visual Studio Professional 2017, Asp.Net mvc 5

This is probably a simple question, but I can't seem to find an answer for it. In a nutshell, I would like to create a a Kendo UI grid in an Asp.net MVC 5 application that receives data from a WebApi without having any WebApi (server side) kendo code.

For example, this is my current implementation (that works).

(1) I have an Asp.net Mvc 5 web application that has the client side code:

Index.cshtml

@(Html.Kendo().Grid<DataManager.Models.CommodityCodesViewModels.IndexViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.CommodityCodeId);

columns.Bound(c => c.CommodityCode).Width(100);

columns.Bound(c => c.Description).Width(100);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.HtmlAttributes(new { style = "height: 700px;" })

.Scrollable(s => s.Height(700))

.Groupable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(m =>

{

m.Id(c => c.CommodityCodeId);

m.Field(c => c.CommodityCodeId).Editable(false);

m.Field(c => c.CommodityCode);

m.Field(c => c.Description);

})

.Events(events => events.Error("error_handler"))

.Create(create => create.Action("CommodityCodes_Add", "CommodityCodes"))

.Read(read => read.Action("CommodityCodes_Read", "CommodityCodes"))

.Update(update => update.Action("CommodityCodes_Edit", "CommodityCodes"))

.Destroy(destroy => destroy.Action("CommodityCodes_Delete", "CommodityCodes"))

)

CommodityCodesController.cs

public class CommodityCodesController : Controller

{

public CommodityCodesController()

{

}

public ActionResult Index()

{

return View();

}

public async Task<ActionResult> CommodityCodes_Read( [DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

return Json(await new CommodityCodeHelpers().ApiGetAll(request, model) );

}

[HttpPost]

public async Task<ActionResult> CommodityCodes_Add([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

if (model != null && ModelState.IsValid)

{

HttpResponseMessage message = await new CommodityCodeHelpers().ApiPost(request, model);

}

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public async Task<ActionResult> CommodityCodes_Edit([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

if (model != null && ModelState.IsValid)

{

HttpResponseMessage message = await new CommodityCodeHelpers().ApiPut(request, model);

}

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public async Task<ActionResult> CommodityCodes_Delete([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

if (model != null && ModelState.IsValid)

{

HttpResponseMessage message = await new CommodityCodeHelpers().ApiDelete(request, model);

}

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

}

CommodityCodeHelpers.cs

public class CommodityCodeHelpers

{

private string _uriBase = System.Configuration.ConfigurationManager.AppSettings.Get("CommodityCodesUriBase");

private string _uriPath = System.Configuration.ConfigurationManager.AppSettings.Get("CommodityCodesUriPath");

public async Task<DataSourceResult> ApiGetAll([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

List<IndexViewModel> modelList = new List<IndexViewModel>();

using (var client = new HttpClient()) // does this support socket reuse?

{

client.BaseAddress = new Uri(_uriBase);

client.DefaultRequestHeaders.Clear();

client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

HttpResponseMessage Res = await client.GetAsync(_uriPath);

if (Res.IsSuccessStatusCode)

{

//Storing the response details recieved from web api

var response = Res.Content.ReadAsStringAsync().Result;

modelList = JsonConvert.DeserializeObject<List<IndexViewModel>>(response);

}

return modelList.ToDataSourceResult(request);

}

public async Task<HttpResponseMessage> ApiPost([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

using (var client = new HttpClient()) // does this support socket reuse?

{

client.BaseAddress = new Uri(_uriBase);

client.DefaultRequestHeaders.Accept.Clear();

client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

HttpResponseMessage response = await client.PostAsJsonAsync(_uriPath, model);

if (response.IsSuccessStatusCode)

{

// maybe a redirect?

}

return response;

}

public async Task<HttpResponseMessage> ApiPut([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

using (var client = new HttpClient()) // does this support socket reuse?

{

client.BaseAddress = new Uri(_uriBase);

client.DefaultRequestHeaders.Accept.Clear();

client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

HttpResponseMessage response = await client.PutAsJsonAsync(_uriPath + "//" + model.CommodityCodeId, model);

if (response.IsSuccessStatusCode)

{

// maybe a redirect?

}

return response;

}

public async Task<HttpResponseMessage> ApiDelete([DataSourceRequest] DataSourceRequest request, IndexViewModel model)

{

using (var client = new HttpClient()) // does this support socket reuse?

{

client.BaseAddress = new Uri(_uriBase);

client.DefaultRequestHeaders.Accept.Clear();

client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

HttpResponseMessage response = await client.DeleteAsync(_uriPath + "//" + model.CommodityCodeId);

if (response.IsSuccessStatusCode)

{

// maybe a redirect?

}

return response;

}

So, right now the grid is created in my Index view, and is handled in my MVC controller. My MVC controller builds an HttpClient and then consumes my WebApi, and everything works fine.

Is there a way to use the Kendo().Grid HTML helper to consume the Web Api, while still using my Asp.net MVC controllers. Essentially, I would like to eliminate the need for me to build an Http Client to consume the Web Api, and instead have Kendo().Grid do it for me.

Thanks for all the help!

RC

Grid

answered on 19 Sep 2017

1 answer

3.8K+ views

[Solved] Multi-line header row

Is it possible to have a multiple lines in the header row for the column names? I am migrating an existing HTML table to use the MVC grid (see attached). I have tried placing a new line character ('\n') in the Title field but it does nothing.

Grid

answered on 18 Sep 2017

5 answers

699 views

[Solved] Multiselect deferred binding question

Hello

I have a multiselect widget working in AutoBind mode. To speed up display, as long as the field is not changed, I would like to load the selected values using Autobind(false) and load the selected Items in .Value() as per the docs.

I have verified that Model.SelectedOwners contains the DataValues and Model.SelectedOwnersPreload contains a List of Items with Name / Id with the same DataValues.

If I set Autobind(true), the widget works as expected but is slow to read the full list of available items from the datasource.

If I set Autobind(false) the widget works correctly on first load of the page. However, when the Form posts back and is rendered again, the selected Values are no longer shown, even though I render the page through the same code as on initial load and in the View, both the Value List (Model.SelectedOwners) and the Item List (Model.SelectedOwnersPreload) provide the expected Values.

What am I missing?

Currently the Code is:

@(Html.Kendo().MultiSelectFor(m => m.SelectedOwners)

.DataTextField("Name")

.DataValueField("Id")

.Placeholder(StringResource.SoftwareItemOwnersPlaceholder)

.AutoBind(true)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetAvailableOwners", "SoftwareItem");