Questions on UI for ASP.NET MVC Forum

1 answer

97 views

Need to have values populated after initial submit

I am making a page with two html forms, The first has two kendo comboboxes in which the user selects some options and then presses submit on the first section. I then look in the database to see if the user inputted a duplicate value. If a entry is found it returns it. I need the information from the returned entry to populate in the corresponding fields. Is this possible?

ComboBox

answered on 20 Sep 2017

5 answers

2.5K+ views

Partial View and model kendo window

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

302 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

444 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

389 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

817 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

201 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

728 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