Questions on UI for ASP.NET MVC Forum

1 answer

351 views

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

745 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

165 views

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

697 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.1K+ 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.7K+ views

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

667 views

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

});

}).Value( Model.SelectedOwnersPreload)

)

Regards,

Erwin

MultiSelect

answered on 18 Sep 2017

1 answer

97 views

make description visible in Day View

In Day View only the "Title" field is visible. Without creating a custom view, is it possible to also make the "Description" field visible in Day View?

Thanks

Scheduler

answered on 18 Sep 2017

1 answer

136 views

Cant remove whitespace from line graph

Hi

I have got an issue where there is a 35px wide gap at the left hand side of all my line graphs.

Please see here for a demo

http://vsdash-test.azurewebsites.net/

I would like the line graph to display the full width of the blue area, and remove the blank space to the left.

When i expect the code, I am inside the markup used to create the SVG file.

Is there anyway I can remove this space at the left side?

Thank you for your time.

Chart

answered on 18 Sep 2017

2 answers

202 views

Different PopUps for Editing vs Adding

Is it possible to setup a different popup for use when editing records versus when adding new records? When editing, there are certain fields we don;t want the user to edit, whereas when adding a new record, there are fields that do have to be set. I was hoping I could set different templates for adding versus editing. I suppose I could do it dynamically via javascript, but I was hoping there was a less intrusive method.

Grid

answered on 15 Sep 2017