Questions on UI for ASP.NET MVC Forum

6 answers

87 views

Item Count appended to front of initial page

I've run into an interesting issue.

I have a grid's initial page being set to a range of items equal to that of the item count appended to the front of the page Ex. 4 rows, equals initial page 401. If I click the center page button of the page navigation it displays the data. What makes even less sense is I have an identical grid on another page returned from a separate controller but the same model and configuration, it works just fine. The only difference between the two grids is the parameters that are supplied to fetch the data, along with the route to allow the additional parameter in the URL.

The first thing i noticed is in my console I did have two errors regarding the sourcemaps for kendo.all.min.js.map and the kendo.aspnetmvc one as well. I grabbed replaced the existing ones from the original location and all cleared up in the console yet this issue still remains.

Is this a known issue on MVC 6 helpers?

Things I've tried. I supplied the model's row count in the datasource to override. Turning paging off makes it render correctly, though I would very much like for it work as it works on the same model elsewhere. I have also allowed ServerOperations to fetch the paging information again, but it acts like it doesnt know it needs to.

The model is an

IEnumerable<Document>

@(Html.Kendo().Grid<Document>(Model)

.Name("bookpage-grid")

.Columns(columns =>

{

columns.Bound(m => m.ImageIndicator).Width(35).Title("Img").Filterable(false);

columns.Bound(m => m.Instrument).Width(130);

columns.Bound(m => m.Name).Width(200);

columns.Bound(m => m.NameType).Width(75);

columns.Bound(m => m.Type).Width(75);

columns.Bound(m => m.Date).Width(75);

})

.ToolBar(toolbar =>

{

toolbar.Pdf();

toolbar.Excel();

})

.Excel(excel => excel.FileName(Model.FirstOrDefault().BookPage + "Export.xslx"))

.Selectable()

.Groupable()

.Sortable()

.Scrollable()

.Filterable()

.Pageable()

.DataSource(datasource => datasource

.Ajax()

.PageSize(10)

.ServerOperation(false)

)

Grid

answered on 24 Mar 2016

1 answer

1.1K+ views

kendo mvc grid dynamic columns binding with format and other data for each column

hi,

we need to have a kendo ui mvc grid with dynamic columns binding, also each column has a specific format and name.

i've created a view model like so

public class ReportGridColumnsViewModel
{
public DataTable GridColumns { get; set; }
public Dictionary<string, ColumnProperty> ColumnData{ get; set; }
}
}

the question is, how i do pass this view model from controller method, how do i use ToDataSourceResult with that, i do i not:

below wont work, because gridData is ReportGridColumnsViewModel, not IQueriable

public virtual ActionResult GridData([DataSourceRequest]DataSourceRequest request, ReportGridViewModel viewModel)
{
var gridData = _transformer.GetGridData(viewModel, SessionUser);
Session["KendoTradeAckGrid"] = gridData;
return Json(gridData.ToDataSourceResult(request));
}

we are using ajax as data source in grid.

thanks,

Inna

Grid

answered on 24 Mar 2016

1 answer

2.4K+ views

Use MaskedTextBox for Email

Not sure that the MaskedTextBox is the right control to use for this, but here goes:

I need to have an input for an email address that:

A) Is a hyperlink to start an email with displayed email address as the "To:" address.
AND
B) Allow the user to edit the email address if they so desire.

So, first, I need to have it appear as a link that can be edited,

Second, I need to know what I would use for a mask (assuming that this is the right control for this)

Can anyone point me in the right directions?

TIA,
Bob Mathis

MaskedTextBox

answered on 24 Mar 2016

6 answers

235 views

kendo.Slider() culture not localizing number correctly

Hello.

I have set up my environment to include

~/Scripts/kendo/2013.3.1324/cultures/kendo.culture.is-IS.min.js

followed by a localization script in _Layout.cshtml like this

<script type="text/javascript">
kendo.culture("@culture");
</script>

and construct a Slider in an Editor Template like so:
@model string
@(Html.Kendo().Slider()
.Name(@ViewData.ModelMetadata.PropertyName)
.Min(0.55)
.Max(34.1))
.SmallStep(0.5)
.LargeStep(5.5)
.Value(@Convert.ToDouble(Model))
)

The problem is that the tooltip will show a dot for decimal separator like "34.1" instead of the expected "34,1" (for example).

Also, when the value is read from the control it contains a dot instead of the comma. As a result, the value will come from the slider as 341 instead of 34.1 (or 34,1 in Icelandic, to be exact).

Do you have any clue what I could do differently, am I missing something or am I misunderstanding the concept of culture and decimal numbers as far as the Slider goes?

Sincerely,
Baldvin

Slider

answered on 23 Mar 2016

1 answer

223 views

Dynamic MultiSelect in Scheduler edit Template

Ive a scheduler with a custom editor template. The template displays a MultiSelect whose selectable values will differ depending upon what specific event is picked. So when I click an event I capture the Edit event and I refresh the MultiSelect to populate its selecteble values and this works.

$('#PrerequisiteOids').data('kendoMultiSelect').dataSource.read();

However my selected values from my model are never set in the control. I'm guessing this is something to do with it being in a Template - how do I bind my values from the selected Event?

The MultiSelect in the Template looks like this:

@(Html.Kendo().MultiSelectFor(model => model.Prerequisites)

.Name("Prerequisites")

.AutoBind(true)

.DataTextField("Title")

.DataValueField("Oid")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetPrerequisites", "CourseCalendar").Data("getCourseEventID");

})

.ServerFiltering(true);

})

.HtmlAttributes(new { @class = "universalWidth" }))

Has

Scheduler

answered on 23 Mar 2016

1 answer

186 views

Toolbar like Ms Ribbon Concept

Hello,

I'm trying to use the toolbar as a workaround to the Rad Ribbon for Asp.Net Ajax: http://demos.telerik.com/aspnet-ajax/ribbonbar/examples/tooltip/defaultcs.aspx

that is not available in MVC. Where i am struggling is how to create headers/labels for each toolbar section like the Ribbon example (Clipboard, Font, Paragraph, Editing...) that will go on top (or bottom). Are there any examples of this, or is this even possible?

Thanks in advance,

Dave

Toolbar

answered on 22 Mar 2016

5 answers

135 views

scheduler work week navigation bug

Hello,

I am working with Kendo Scheduler. I want to set my work week to start at Sunday and end at Thursday.

I wrote the following code to define work week start and end.

.WorkWeekStart(-7)
.WorkWeekEnd(-3)

Now, my work week is displaying fine, but i have problem with navigation trough work weeks. This navigator doesn't work. When I click forward it doesn't respond at all, also when I click back, it jumps for two weeks back. All other navigators are working fine (day, month, agenda).

When I try

.WorkWeekStart(0)
.WorkWeekEnd(4)

today button redirects me to next week.

Scheduler

answered on 22 Mar 2016

2 answers

2.1K+ views

MVC Grid - capture selected row's data

Hello all,

I am new to both Telerik and MVC and need help desperately.

I have built a grid that is populated by data query upon load. I added a custom column with a button (Create Affidavit) to my grid with a .Click command pointing to jquery function sendVisibleRows.

Upon clicking the row’s “Create Affidavit” button, I wish to capture all the data in the “clicked” row and pass each column value and format them separately to local variables that I use to dynamically populate a form.

I’ve tried numerous methods but I cannot seem to be able to capture the data in the clicked row. No matter what I do, I seem to only be able to capture the columns in the very first row.

I also tried without success:
var row = this.select();
var id = row.data("id");

Any help is extremely welcome. Thank you!

<div class="container">

<div class="col-lg-6">

@(Html.Kendo().Grid<IntranetPolice.Models.AffDataTbl>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.inci_id).Title("Svc Number").Width(80);

columns.Bound(p => p.arr_chrg).Title("Charge").Width(80);

columns.Bound(p => p.lastname).Title("Last Name").Width(80);

columns.Bound(p => p.firstname).Title("First Name").Width(80);

columns.Bound(p => p.street).Title("Street").Width(80);

columns.Command(command => command.Custom("Create Affidavit").Click("sendVisibleRows")).Width(80);

})

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

//.Pageable(pageable => pageable

// .Input(true)

// .Numeric(false)

// )

.Sortable()

.Scrollable(scr => scr.Height(430))

//.Filterable()

.DataSource(dataSource => dataSource // Configure the grid data source

.Ajax() // Specify that ajax binding is used

.Read(read => read.Action("Affidavit_Read", "Home").Data("sendAddtionalData"))

)

</div>

<div class="col-lg-6">

<div class="panel" align="center">

@using (Html.BeginForm("Affidavit_PDF", "Home", FormMethod.Post, new { target = "_blank" }))

{

@Html.AntiForgeryToken()

<form id="arraignmentForm">

<ul id="fieldlist">

<li><center><h4>Arraignment Form</h4></center></li>

<li>

<p>

@Html.TextBoxFor(m => m.inci_id, new { id = "inci_id", @class = "TextBoxFor_txtcolor", @onclick = "" })

@Html.TextBoxFor(m => m.lastname, new { id = "lastname", @class = "TextBoxFor_txtcolor", @onclick = "" })

@Html.TextBoxFor(m => m.firstname, new { id = "firstname", @class = "TextBoxFor_txtcolor", @onclick = "" })

@Html.TextBoxFor(m => m.chrgdesc, new { id = "chrgdesc", @class = "TextBoxFor_txtcolor", @onclick = "" })

@Html.TextBoxFor(m => m.statute, new { id = "statute", @class = "TextBoxFor_txtcolor", @onclick = "" })

@Html.TextAreaFor(m => m.supplement, new { id = "supplement", @class = "TextBoxFor_txtcolor", @onclick = "" })

</p>

@Html.HiddenFor(m => m.date_occu, new { id = "date_occu" })

@Html.HiddenFor(m => m.armainid, new { id = "armainid" })

@Html.HiddenFor(m => m.archrgArmainid, new { id = "archrgArmainid" })

@Html.HiddenFor(m => m.archrgid, new { id = "archrgid" })

@Html.HiddenFor(m => m.chargetype, new { id = "chargetype" })

@Html.HiddenFor(m => m.arr_chrg, new { id = "arr_chrg" })

@Html.HiddenFor(m => m.bondamt, new { id = "bondamt" })

@Html.HiddenFor(m => m.fel_misd, new { id = "fel_misd" })

@Html.HiddenFor(m => m.race, new { id = "race" })

@Html.HiddenFor(m => m.sex, new { id = "sex" })

@Html.HiddenFor(m => m.dob, new { id = "dob" })

@Html.HiddenFor(m => m.height, new { id = "height" })

@Html.HiddenFor(m => m.weight, new { id = "weight" })

@Html.HiddenFor(m => m.hair, new { id = "hair" })

@Html.HiddenFor(m => m.eye, new { id = "eye" })

@Html.HiddenFor(m => m.streetnbr, new { id = "streetnbr" })

@Html.HiddenFor(m => m.street, new { id = "street" })

@Html.HiddenFor(m => m.city, new { id = "city" })

@Html.HiddenFor(m => m.state, new { id = "state" })

@Html.HiddenFor(m => m.zip, new { id = "zip" })

@Html.HiddenFor(m => m.dr_lic, new { id = "dr_lic" })

@Html.HiddenFor(m => m.dl_state, new { id = "dl_state" })

@Html.HiddenFor(m => m.name_id, new { id = "name_id" })

@Html.HiddenFor(m => m.ofcName, new { id = "ofcName" })

@Html.HiddenFor(m => m.selectCounty, new { id = "selectCounty" })

</li>

<li class="confirm">

<button class="k-button k-primary" type="submit">Arraignment Form</button>

</li>

</ul>

</form>

}

</div>

<script>

function sendAddtionalData() {

var caseNum = '@(ViewBag.caseNum)';

return {

caseNum: caseNum,

};

}

function sendVisibleRows(e) {

var grid = $("#Grid").data("kendoGrid").dataSource.get();//pulling data from selected grid column

//var t = grid.dataItem(grid.select());

var jgrid = JSON.stringify(grid); //converting the data received into JSON format

var jgrid_obj = eval("(" + jgrid + ")") //creating object with JSON datafields

$.ajax({

type: "POST",

dataType: "json",

contentType: "application/json; charset=utf-8",

url: '@Url.Action("Affidavit_Create", "Home")',

async: true,

processData: false,

data: jgrid,//JSON.stringify(grid),

success: function (json) {

if (json.pass) {

var ofcName = '@(ViewBag.ofcname)';

var selectCounty = '@(ViewBag.selectCounty)';

var inci_id = jgrid_obj.inci_id;

var date_occu = jgrid_obj.date_occu;

var armainid = jgrid_obj.armainid;

var archrgArmainid = jgrid_obj.archrgArmainid;

var chrgdesc = jgrid_obj.chrgdesc;

var archrgid = jgrid_obj.archrgid;

var chargetype = jgrid_obj.chargetype;

var arr_chrg = jgrid_obj.arr_chrg;

var bondamt = jgrid_obj.bondamt;

var fel_misd = jgrid_obj.fel_misd;

var statute = jgrid_obj.statute;

var lastname = jgrid_obj.lastname;

var firstname = jgrid_obj.firstname;

var race = jgrid_obj.race;

var sex = jgrid_obj.sex;

var dob = jgrid_obj.dob;

var height = jgrid_obj.height;

var weight = jgrid_obj.weight;

var hair = jgrid_obj.hair;

var eye = jgrid_obj.eye;

var streetnbr = jgrid_obj.streetnbr;

var street = jgrid_obj.street;

var city = jgrid_obj.city;

var state = jgrid_obj.state;

var zip = jgrid_obj.zip;

var dr_lic = jgrid_obj.dr_lic;

var dl_state = jgrid_obj.dl_state;

var name_id = jgrid_obj.name_id;

var supplement = jgrid_obj.supplement;

/////sending variables to Form

$("#ofcName").val(ofcName);

$("#selectCounty").val(selectCounty);

$("#inci_id").val(inci_id);

$("#lastname").val(lastname);

$("#firstname").val(firstname);

$("#supplement").val(supplement);

$("#chrgdesc").val(chrgdesc);

$("#statute").val(statute);

$("#date_occu").val(date_occu);

$("#armainid").val(armainid);

$("#archrgArmainid").val(archrgArmainid);

$("#archrgid").val(archrgid);

$("#chargetype").val(chargetype);

$("#arr_chrg").val(arr_chrg);

$("#bondamt").val(bondamt);

$("#fel_misd").val(fel_misd);

$("#race").val(race);

$("#sex").val(sex);

$("#dob").val(dob);

$("#height").val(height);

$("#weight").val(weight);

$("#hair").val(hair);

$("#eye").val(eye);

$("#streetnbr").val(streetnbr);

$("#street").val(street);

$("#city").val(city);

$("#state").val(state);

$("#zip").val(zip);

$("#dr_lic").val(dr_lic);

$("#dl_state").val(dl_state);

$("#name_id").val(name_id);

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert("Error");

}

});

}

</script>

Grid

answered on 21 Mar 2016

1 answer

457 views

dynamic window

Hi,

I'm working on something like Interactive video quiz I'm using html 5 for video and i will have my question and answers in a .txt file like this format

Questions.txt
"00:00:20","What is 10+4","16","*14"
"00:00:40","What is 10+6","*16","14","18"
"00:00:10","What is 10+8","16","14","*18"
"00:00:20","What is 10+14","16","*24","18"
"00:00:20","What is 10+41","*51","14"

I want to dynamically populate this questions(radio button/check box) in a kendo window . the html 5 video will play the video and it paused at the given time and kendo window populates the question. once the user click the submit button it records the answers and resume playing the video and again pause the video and open the kendo window to populate the questions.

How do i populate kendo window dynamically ?

Thank you for the help

Window

answered on 21 Mar 2016

1 answer

451 views

Custom Command Buttons - Images vs. Text

I want to create my own action buttons for each row in the grid using gylypicon images. I've used previous posts in this forum as a guideline for what to do,but the solutions offered (here and here) appear to be no longer supported. I can get the custom buttons to appear without any issue, but there's no icon (when a name value is specified), nor does there seem to be a way to just show an icon (we're using Bootstrap gylphicons and want to use them for the action buttons as well).

Here's how I'm creating the rows in the grid (I have additional command buttons, but they're the same as that below):

01.columns: [

02. { field: "id", title: "Id", hidden: false },

03. { field: "parentId", hidden: true },

04. { field: "Title", hidden: false },

05. { field: "Body", hidden: false },

06. { field: "NoteCreator", hidden: true },

07. { field: "CreatedBy", title: "Created By", hidden: false },

08. { field: "CreatedDate", title: "Created On", hidden: false },

09. { field: "Replies", hidden: true },

10. { field: "IsRoot", hidden: true },

11. { field: "Token", hidden: true },

12. {

13. field: "Actions", hidden: false,

14. command: [{

15. name: " ",

16. click: function (e) {

17. // e.target is the DOM element representing the button

18. var tr = $(e.target).closest("tr");

19. // get the data bound to the current table row

20. var data = this.dataItem(tr);

21. alert("View for id " + data.id + ".");

22. }

23. }]

24. ],

The first file (action-buttons-no-icons.png) shows what it looks like; the second file (action-buttons-icons-only.png) shows what I *want* it to look like.

Grid

answered on 21 Mar 2016