Questions on UI for ASP.NET MVC Forum

2 answers

899 views

Grid button client template - change width

Trying without success to alter the width of the button rendered in a grid using client template -

columns.Template(c => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-ManageCompany' href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a

>").HtmlAttributes(new { @class = "customGridRowStyle", title = "Edit Company Profile" }).Width(50); //.Filterable(filterable => filterable.UI("nameFilter"));

When rendered, the code is as follows -

<td class="customGridRowStyle" title="Edit Company Profile" role="gridcell"><a class="k-button k-button-icontext k-grid-ManageCompany" href="/Portal/Search/ManageCompanies/344"><span class="k-icon k-i-edit"></span></a></td>

Min-width seems to be defined as :

k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 64px;
}

I've tried seeting the style within the page itself as -

.k-button .k-button-icontext .k-grid-ManageCompany {

min-width: 30px;

width: 30px;

}

But it seems to have no effect.

Ive also tried adding the style to the HtmlAttributes with no success either.

Any help appreciated.

Terry.
.

Grid

answered on 23 Jun 2017

7 answers

810 views

Need to pass string param to grid ajax bound in partial page

I have a main page "JLO" that accepts user input using a kendo text box. User then clicks a button that is handled by a jquery script that opens the partial page. I am stuck on passing the param [textbox value] to the partial page and rendering the grid.

this is my basic code.

main view

<div id="userinput" class="row">

<ul class="userrentry">

<li>

@Html.Label("User ID")

@Html.Kendo().TextBox().Name("searchuserid")

</li>

<li>

@Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })

</li>

</ul>

</div>

<div id="sessionsfound" class="row grid-centered" style="display:none">

</div>

<div id="success" class="row grid-centered" style="display:none">

</div>

<script type="text/javascript">

$('#findUser').click(function () {

var userid = $('#searchuserid').val();

$("#userinput").css("display", "none");

$('#sessionsfound').css("display", "block");

//alert(userid)

$("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');

})

</script>

Partial view for Grid

@model string

<div>

@(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()

.Name("VSM_Grid")

.AutoBind(false)

.DataSource(data => data

.Ajax()

.Model(model =>

{

model.Id(m => m.id);

})

.Read(read => read.Action("sessions_read", "Home", new { userid = Model }))

.Data("readuser")

)

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))

.Columns(c =>

{

c.Bound(i => i.id).Title("ID").Width(10);

c.Bound(i => i.farmName).Title("Farm").Width(25);

c.Bound(i => i.domainName).Title("Domain").Width(25);

c.Bound(i => i.applicationName).Title("App Name").Width(75);

c.Bound(i => i.serverName).Title("Server").Width(25);

c.Bound(i => i.sessionID).Title("Session ID").Width(10);

})

))

</div>

<div class="kbutton-centered">

@Html.Kendo().Button().Name("endselected").Content("End Sessions").HtmlAttributes(new { @class = "k-button" })

</div>

<script type="text/javascript">

debugger;

var userID = @Model ;

var grid = $("#VSM_Grid").data("kendoGrid");

grid.dataSource.read();

function readuser() {

debugger

return {

userid: userID

};

}

</script>

Grid

answered on 23 Jun 2017

1 answer

100 views

autoselect proble using filterrow

I’m using the telerik mvc grid with a filterrow as in this demo http://demos.telerik.com/aspnet-mvc/grid/filter-row

My column is defined like below, using a contains suggestion operator

columns.Bound(p => p.ArticleNumber).Filterable(ftb => ftb.Cell(cell => cell.SuggestionOperator(FilterType.Contains)));

The problem that sometimes occurs is when a user enter a search value, the first item is automaticcaly selected in the dropdown. (see screenhot)
This causes the problem, if the user hits enter, he will search on 101250xxxx where his intention was to search on values containing 10125.
How can it be avoided that the first item is automatically selected?

Grid

answered on 23 Jun 2017

1 answer

339 views

Editable Mode InLine event lifecycle and triggers

Looking to implement a combination of functionality while using the Grid in InLine mode. Thus far searches have not brought up directly applicable examples or details on the event lifecycles for the grid.

Is there anywhere that shows an event lifecycle for the Grid?

Looking to know what events are available to work with (Grid/javascript/JQuery all valid) for controlling what happens when a row enters into EditMode AND if a new row is Added (Which therefore is automatically opened into edit mode but no datasource command has fired yet.

The functionality looking to implement:

Setting which cell in the row focus is set to when the row opens up int InLine edit mode
Selecting all contents of cell clicked that is in the row in edit mode
When a new row is added (Automatically opened); set the following column dropdown values to some defaults. This is so it is visually already selected for the user and they can still change it if need be.

Columns:

c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(200).Hidden(Model.Locations_ColumnInitHidden); //Display UIHint in Dropdown through LocationsList ClientTemplate with just the LocationNumber value behind
//c.ForeignKey(vm => vm.State, (System.Collections.IEnumerable)ViewData["StateList"], "Value", "Text").Width(120);
c.Bound(vm => vm.State).HtmlAttributes(new { @class = "locationLinkedState" }).Width(80);

The Datasource Create command already can set a default value if left blank; though that would not matter to a user till they sent the row through by clicking on the row Update command. So the aim in 3. is to have the default already selected for the user.

Any information on the available event lifecycles and the implementation of the mentioned functionality will be greatly appreciated.

Grid

answered on 22 Jun 2017

3 answers

2.8K+ views

How to reset Kendo Upload via Javascript

How can I reset a Kendo Upload control based upon a button click event?

Upload

answered on 22 Jun 2017

1 answer

7.4K+ views

Set filter programatically?

Hi, I want to set a default filter value for a column on the grid but only if the application is not already persisting state. My question is how do I set a filter programmatically in this scenario? There is a Boolean column called "Enabled" that I am trying to default to TRUE when no pervious grid state can be found on client.

var localStorageKey = "UserAdministrationUserGridOptions";

$(function () {

// pull client grid state and apply to grid (filters, current page, sorts, etc).

setGridOptions();

});

function setGridOptions() {

var options = localStorage[localStorageKey];

if (options) {

$("#UserAdministrationUserGrid").data("kendoGrid").setOptions(JSON.parse(options));

}

else

{

// set initial enabled filter to true

// HOW DO I DO THIS IN JAVASCRIPT

// server: .Filter(f => f.Add(m=> m.Enabled).IsEqualTo(true))

}

Grid

answered on 21 Jun 2017

6 answers

389 views

PDF Export issue

hello,

Recently I updated my Kendo version from 2014 to 2017 r2

I try to implemented the pdf export on my Scheduler but when I click on export I got a blank pdf file.

I have a view with style and script:

<style>

/*

Use the DejaVu Sans font for display and embedding in the PDF file.

The standard PDF fonts have no support for Unicode characters.

*/

.k-scheduler {

font-family: "DejaVu Sans", "Arial", sans-serif;

}

/* Hide toolbar, navigation and footer during export */

.k-pdf-export .k-scheduler-toolbar,

.k-pdf-export .k-scheduler-navigation .k-nav-today,

.k-pdf-export .k-scheduler-navigation .k-nav-prev,

.k-pdf-export .k-scheduler-navigation .k-nav-next,

.k-pdf-export .k-scheduler-footer {

display: none;

}

</style>

<script src="@Url.Content("~/Scripts/pako.min.js")"></script>

<h1 class="titrePlanning">Planning Electro</h1>

@Html.Partial("ControlPanel")

<div class="wrapper">

<div id="divScheduler">

@(Html.Kendo().Scheduler<Ubaldi.Logisttique.PlanningRDV.Web.Controllers.EventViewModel>()

.Name("scheduler")

.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>")

.Selectable(false)

.Timezone("Etc/UTC")

.Width(1200)

.Pdf(pdf => pdf

.FileName("Export_PlanningRDV.pdf")

.ProxyURL(Url.Action("Pdf_Export_Save", "Scheduler"))

)

.Toolbar(t => t.Pdf())

- I also imported Deja Vus font in \Content\fonts\DejaVu

In my contoller:

public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)

{

var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);

}

I try with and without ProxyUrl and I'm getting the same issue.Do I miss something ?

Scheduler

answered on 21 Jun 2017

3 answers

120 views

Is there an MVC equivalent to StyleSheetManager?

With Kendo ASP.Net Ajax there is a style sheet manager that can be used to switch between several styles for the Kendo controls. Is there an equivalent in the MVC?

General Discussions

answered on 21 Jun 2017

6 answers

206 views

ComboBox not working when acquired through Ajax Actionlink

Hi,

I have an Ajax action link which GETs a partial view and insert it after a certain div on my page. That partial view contains a Kendo ComboBox which is bound to a SelectList in my model. But the ComboBox doesn't work at all when the partial has been inserted. None of the styling and functionality is there at all. In fact, all the kendo html is gone. There are no elements with the "k-combobox" and "k-widget" stuff. Everything is gone, and all I'm left with is

<input data-val="true" data-val-number="Feltet Prosjekt må være et tall." id="Sections_8fcdf2f0-53c3-45e3-9498-41aeaccf3ad4__ProjectId" name="Sections[8fcdf2f0-53c3-45e3-9498-41aeaccf3ad4].ProjectId" type="text" value="1">

<script>

jQuery(function(){jQuery("#Sections_8fcdf2f0-53c3-45e3-9498-41aeaccf3ad4__ProjectId").kendoComboBox({"dataSource":[{"Text":"Testprosjekt","Value":"1"},{"Text":"asd","Value":"2"},{"Text":"Ttest","Value":"3"},{"Text":"asd","Value":"4"},{"Text":"Best Project Ever","Value":"5"},{"Text":"test2000","Value":"6"},{"Text":"asdiasd","Value":"7"},{"Text":"ghghj","Value":"8"},{"Text":"sdfsd","Value":"9"},{"Text":"rtrtfgh","Value":"10"}],"dataTextField":"Text","dataValueField":"Value","placeholder":"Velg prosjekt...","suggest":true});});

</script>

ComboBox