Questions on UI for ASP.NET MVC Forum

7 answers

785 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

92 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

331 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.3K+ 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

379 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

107 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

193 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

answered on 21 Jun 2017

3 answers

126 views

Generate static sparkline server side

Is there a way to generate a static sparkline chart on the server? I'd like to include a sparkline in a system-generated email.

Sparkline

answered on 21 Jun 2017

1 answer

175 views

Pass Model with DataSource to MVC Method using Angularjs

I have a dropdownlist on the Add Record template on a detail Grid. I need to pass details of the parent model with the read method of the dropdownlist datasource. Here is my code:

$scope.detailGridOptions = function (dataItem) {
return {
dataSource: {
type: 'aspnetmvc-ajax',
transport: {
read: "/SSQV4/SSQV5/Operator/GetTaggedContractorsByMajor"
,
create: "/SSQV4/SSQV5/Operator/AddContractorToTag"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
data: "Data",
total: "Total",
model: {
id: "CompanyID",
fields: {
CompanyID: { editable: true, nullable: false, type: "number" },
TagID: { editable: true, nullable: true, type: "number" },
vchCompanyName: { editable: false, nullable: false, type: "string"},
Date: { editable: false, nullable: false, type: "date" },
AddedBy: { editable: false, nullable: false, type: "string" }
}
}
},
pageSize: 5,
filter: { field: "TagID", operator: "eq", value: dataItem.TagID }
},
scrollable: false,
sortable: true,
pageable: true,
editable: "popup",
edit: function (e) {
var grid = $scope.tagsGrid;
var uid = e.model.uid;
var selector = kendo.format("tr[data-uid='{0}']", uid);
var currentGridElement = $(selector).closest("[data-role=grid]");
var parentRow = currentGridElement.closest(".k-detail-row").prev();
var parentModel = grid.dataItem(parentRow);
e.model.TagID = parentModel.TagID;
},
toolbar: ["create"],
columns: [
{
field: "TagID"
, hidden: true
}
,
{
field: "CompanyID",
title: "CompanyID"
, editor: companyDropDownEditor
}
,
{
field: "vchCompanyName",
title: "Company Name"
}
,
{
field: "Date",
title: "Date Added"
}
,
{
field: "AddedBy",
title: "Added By"
}
]

};
};

function companyDropDownEditor(container, options) {
var grid = $scope.tagsGrid;
var uid = options.model.uid;
var selector = kendo.format("tr[data-uid='{0}']", uid);
var currentGridElement = $(selector).closest("[data-role=grid]");
var parentRow = currentGridElement.closest(".k-detail-row").prev();
var parentModel = grid.dataItem(parentRow);

$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "CompanyName",
dataValueField: "CompanyID",
template: "#=CompanyName#",
dataSource: {
transport: {
read: "/SSQV4/SSQV5/Operator/GetUntaggedContractors",
data: {contractor: parentModel}
}
}

});
}

Here is my MVC Action Method:

public async Task<ActionResult> GetUntaggedContractors([DataSourceRequest] DataSourceRequest request,
ContractorTagModel contractor)
{
majorId = UserInfo.intMajorID;
var tagId = contractor.TagID;
var contractors = await CompanyClient.GetUntaggedContractors(majorId, tagId);
return Json(contractors, JsonRequestBehavior.AllowGet);
}

When the Action Method is hit, the model is always empty. I actually don't need the entire model, just the TagID, but I don't get anything but zeros in my model. Any assistance is greatly appreciated!

DropDownList

answered on 20 Jun 2017