Questions on Kendo UI for jQuery Forum

2 answers

642 views

[Solved] tool viewHtml editing not working in twitter bootstrap modal

Hello,

the viewHtml tool doesn't seems to work when in a bootstrap modal. It' display the code properly but the text cannot be selected or edited.

I tried it in chrome see the file attached

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />

<link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />

<link href="//twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="//cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script src="//twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>

<script src="//twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>

</head>

<body>

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>

<h3 id="myModalLabel">Modal header</h3>

</div>

<div class="modal-body">

<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea>

</div>

<div class="modal-footer">

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

<button class="btn btn-primary">Save changes</button>

</div>

<script>

$("#editor").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"strikethrough",

"fontName",

"fontSize",

"foreColor",

"backColor",

"justifyLeft",

"justifyCenter",

"justifyRight",

"justifyFull",

"insertUnorderedList",

"insertOrderedList",

"indent",

"outdent",

"formatBlock",

"createLink",

"unlink",

"insertImage",

"subscript",

"superscript",

"viewHtml"

]

});

var editor = $("#editor").data("kendoEditor");

editor.value("test testes");

</script>

</body>

</html>

Editor

answered on 06 May 2013

7 answers

495 views

popup editing in a grid - razor examples

are there any code examples using MVC Razor for popup editing in a grid ? The supplied demos only seem to have standard html and no cshtml

Grid

answered on 06 May 2013

1 answer

379 views

[Solved] Cleared textbox not being propigated to model

I have a grid with a client template view attached. In the template view I have a textbox inside a span that I hide or show depending on the value of a textbox next to it. When the hidden textbox is hidden I want to clear its value. In jquery the setting the value of the hidden textbox by $('textboxid').val(''); works visually but this not propegating to the model when I save. here is my Form with the jquery i'm trying to use in it.

@model Papr2WebMvc4.Models.PiprForms.Tobacco

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<h2>Edit Refering Tobacco users</h2>

<fieldset>

<legend></legend>

<div>

<label>Month</label>

@Html.TextBoxFor(model => model.Month)/@Html.TextBoxFor(model => model.Year)

</div>

<div>

<label>Number of peope referred this month to:</label>

<div>

<span>

<label>Quitline</label>

@Html.TextBoxFor(model => model.Count)

</span>

</div>

<div>

<span>

<label>QuitNet</label>

@Html.TextBoxFor(model => model.Count2)

</span>

</div>

<div>

<span>

<label>Local Cessation</label>

@Html.TextBoxFor(model => model.Count3)

</span>

<span class="hiddenElement" style="display: none">

<label>Local Group Name</label>

@Html.TextBoxFor(model => model.FormName)

</span>

</div>

</fieldset>

<script>

$(window).load(function () {

trace("Begin");

alert($('#Count3').val());

var localCessation = $('#Count3').val();

trace(localCessation);

});

$(document).ready(

function myfunction() {

trace("Begin");

$('#Count3').change(function (event) {

trace("Text Changed");

var text = $(this).val();

if (text) {

trace("Has Text");

$('.hiddenElement').show("fast");

}

else {

trace("No Text");

$('#FormName').val(null);

$('.hiddenElement').hide("fast");

}

});

</script>

}

Here is the grid it my form is connected to.

@(Html.Kendo()

.Grid<Papr2WebMvc4.Models.PiprForms.Tobacco>()

.Name("tobaccoGrid")

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

.Columns(columns =>

{

columns.Bound(form => form.Date).Title("Date").Format("{0:M/yyyy}");

columns.Bound(form => form.Count).Title("Quitline");

columns.Bound(form => form.Count2).Title("QuitNet");

columns.Bound(form => form.Count3).Title("Local Cessation");

columns.Bound(form => form.FormName).Title("Local Group Name");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);

})//end columns

.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("AddEditTobacco"))

.ToolBar(toolbar => toolbar.Create())

.Sortable()

.Filterable()

.Pageable(page => page.PageSizes(true))

.DataSource(datasource => datasource

.Ajax()

.Model(model => model.Id(tobacco => tobacco.Id))

.ServerOperation(false)

.Read(read => read.Action("GetForm", "Form", new

{

planId = Convert.ToInt32(Session["PlanId"]),

planActivityId = Model.PlanActivityId,

activityType = Model.ActivityType,

activityTypeId = Model.ActivityTypeId

}))//end read

.Create(create => create.Action("AddForm", "Form", new { planActivityId = Model.PlanActivityId, activityTypeId = 11 }))//end create

.Update(update => update.Action("EditForm", "Form", new { planActivityId = Model.PlanActivityId, activityTypeId = 11, activityType = Model.ActivityType }))//end update

.Destroy(update => update.Action("DeleteForm", "Form", new { planActivityId = Model.PlanActivityId }))//end destroy

.Events(events=>events.RequestEnd("onRequestEnd"))//end events

)//end datasoruce

)@*End tobacco grid*@



Is there something else I should be using to reset the textbox value so it is consumed by my model using javascript/jquery.

Grid

answered on 06 May 2013

3 answers

60 views

Possible bug with Adding/Concatenating

Hey guys,

I've noticed since upgrading recently that a few of my templates that have a plus (+) character in them:

#= x + y #
#= 'i' + Id #
etc...

are removing the '+' internally and throwing an invalid template exception.

I've gotten around this easily enough by moving my logic into a function and calling that within the template, however, this seems to be a bug, and I was just wondering if there was any official feedback on the issue.

EDIT: I should add I'm using Kendo v2013.1.319

Grid

answered on 06 May 2013

1 answer

623 views

Multiple filter in grid Toolbar template

Hi,

I have been following the example http://demos.kendoui.com/web/grid/toolbar-template.html with a variation and I'm stuck.

I have a grid with multiple dropdownlist and textbox for filtering a kendo grid result. I'm having a problem implementing this but specifically when i try to compare the field value and the value in one of my control (eg dropdownlist value) . I'm trying to compare it to a field in a model list - see Award.AwardTypeID. this might be the cause why it's not working

i have a html input button for the javascript

$('#btnSearch').on("click", function (e) {

refreshGrid();

return false;

});

function refreshGrid() {

$filter = new Array();

$filter.push({ field: "StudentID", operator: "contains", value: $('#txtStudentID').val() });

if ($('#AwardType').val()) {

$filter.push({ field: "Award.AwardTypeID", operator: "eq", value: $('#AwardType').val() });

}

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

grid.dataSource.filter($filter);

grid.dataSource.read();

}

Controller

public ActionResult ApplicationSearch_Read([DataSourceRequest]DataSourceRequest request)

{

var applications = context.Applications.Include("ApplicationDetails").OrderByDescending(p => p.SubmittedDate).ToList();

var data = applications.Select(x => new

{

ApplicationID = x.ApplicationID,

SubmittedDate = x.SubmittedDate,

FirstName = x.FirstName,

LastName = x.LastName,

StudentID = x.StudentID,

IsApplicationSubmitted = x.IsApplicationSubmitted,

Award = x.ApplicationDetails.Select(y => new {

AwardID = y.AwardDetail.AwardID,

AwardName = y.AwardDetail.Award.AwardName,

AwardTypeID = y.AwardDetail.Award.AwardTypeID

})

});

return Json(data.ToDataSourceResult(request));

}

Does anybody know how to properly do this?

Thanks,
Aaron

Grid

answered on 06 May 2013

5 answers

510 views

MVC - Server Paging and Aggregates

Hi, pretty simple question that I can't find any example of.

Is it possible to get aggregates for a DataGrid that also has an Ajax DataSource with Server Paging?

Grid

answered on 06 May 2013

1 answer

164 views

MVC Chart - multiple series different starts and endings

Hi,

I want to build a MVC chart with three diffirent line series with their own color and dashtype.
The values of the x-axis are dates with the baseunit weeks and the y-axis consists of double values.

Is it possible to start a second line series at the date where the first serie ends and have a third line at the same time? See the attached chart image.

Should I group data? Should each line have the same amount of items? Is this possible?

Could you give me any leads on this problem?
Thanks in advance

Charts

answered on 06 May 2013

1 answer

324 views

Add custom class to chart elements via template or?

Is there a way I can use the template configuration of chart elements like series, legend, etc, to add a custom class that I can style with my own css?

I can do regular css pathing , like

<style scoped>
div .chart svg g text:hover
{
cursor: pointer;
}
</style>

But I would love a simpler and more elegant solution of just adding and referencing my own specific classes.

Thanks

Charts

answered on 06 May 2013

6 answers

91 views

Recreating the Grid will not Group

All... I have to change the Grid Layout on an user selection. So the grid will have different column layout and different datasource set for each User selection..
So I did the obvious chose of a Kendo Newbe ... I destroyed the previously created Kendo grid, cleared the grid inner html and recreated the kendo grid using the new column values
Everything works fine.. but after the second selection (first selection is when the kendogrid is first created) ... the grouping wont work ..

any lime light on this issue is appriciated...
Here is the code snippit..

<div id="grid" style="height: 380px"></div>

Grid

answered on 06 May 2013

1 answer

541 views

How to make "open link in new window" option checked by default?

Hi,

How do you make the "open link in new window option" checked by default, or always checked?

This option is in the "insert hyperlink" dialog for the editor.

Thanks

Editor

answered on 06 May 2013