Questions on Kendo UI for jQuery Forum

1 answer

198 views

Using Data Values in MVC Action call from a template

I am wondering if this can be done as I have not seen a specific example. What I would like to do is this:

<script type="text/x-kendo-template" id="template">

<div id="details-container">

<h2>#= EnterpriseImageFileName #</h2>

<h2>#=EnterpriseImageID#</h2>

<img src='@Url.Action("RenderImage", "Member", new { enterpriseImageID = #=EnterpriseImageID# }, @Request.Url.Scheme)'/>

</div>

</script>

<script type="text/javascript">

var detailsTemplate = kendo.template($("#template").html());

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var wnd = $("#Details").data("kendoWindow");

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

}

</script>

However, the template value can't referenced from the Razor syntax. Is there a way to gracefully, get the value of #=EnterpriseImageID# and use it in the call to to Action?

As an FYI - this works but I would like to use the Action helper method if possible:

<script type="text/x-kendo-template" id="template">

<div id="details-container">

<h2>#= EnterpriseImageFileName #</h2>

<h2>#=EnterpriseImageID#</h2>

<img src='../RenderImage/?enterpriseImageID=#=EnterpriseImageID#' />

</div>

</script>

Templates

answered on 01 Jan 2013

1 answer

129 views

Closing Window With Condition

I have Kendo Grid and used a window for editing.
i want closing window with condition.

if (person.FName =="Jone")
close window
else
msgbox "You can not Closing this window!"

how to do?

my controller:

public ActionResult UpdatePerson([DataSourceRequest] DataSourceRequest dsRequest, PersonViewModel person)

{

if (person != null && ModelState.IsValid)

{

var db = new

PersonDBEntities();



	         //... Condition

                //   if (person.FName =="Jone")

                //......

                //........

var toUpdate = db.tblPerson.FirstOrDefault(p => p.PersonID == person.PersonID);

if (toUpdate != null)

{

toUpdate.FName = person.FName;

toUpdate.LName = person.LName;

db.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

and Index Form:

@{

ViewBag.Title = "Person";

}

@(Html.Kendo().Grid<KendoMVCWrappers.Models.PersonViewModel>().Name("persons")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model=>model.Id(m=>m.PersonID))

.Read(read => read.Action("GetPersons", "Person"))

.Create(up => up.Action("CreatePerson", "Person"))

.Update(up => up.Action("UpdatePerson", "Person"))

.Destroy(del => del.Action("DeletePerson", "Person"))

)

.ToolBar(cmd => cmd.Create().Text("Add"))

.Columns(columns =>

{

columns.Bound(c => c.FName).Width(100);

columns.Bound(c => c.LName).Width(200);

columns.Command(cmd =>

{

cmd.Edit().UpdateText("Save").CancelText("Cancel").Text("Detail");

cmd.Destroy().Text("Del");

});

})

.Pageable()

.Selectable(sel => sel.Mode(GridSelectionMode.Single))

.Filterable()

.Sortable()

.Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("PersonDetail").Window(w => w.Title("Detail")))

)

and PersonDetail:

@model KendoMVCWrappers.Models.PersonViewModel

<div class="k-content">

<div id="detail">

<ul>

<li>

<label for="fname" class="required">First Name</label>

<input type="text" id="fname" name="fname" class="k-textbox" data-bind="value: FName" />

</li>

<li>

<label for="lname">Last Name</label>

<input id="lname" name="lname" type="number" class="k-textbox" data-bind="value: LName"/>

</li>

<li style="height:250px">

</li>

</ul>

</div>

please hel me.

Window

answered on 01 Jan 2013

2 answers

1.7K+ views

Passing default filter, sort, and group values to a grid via QueryString URL paramaters

Hello,

I'm using (and loving) the KendoUI Complete for ASP.NET MVC. I am trying to pass parameters to a page to indicate the filters, sorts, groups, etc. for the grid via the querystring; e.g., http://localhost/MyPage?sort=DatePlaced-desc&page=1&pageSize=15&group=&filter=Id~gte~1719300~and~Id~lte~1800000~and~UserFirstName~eq~'Edward'

When these parameters are passed, I'm wanting the grid on the page to reflect these parameters when it gets created; i.e., the grid should be initially filtered by Id and UserFirstName in accordance with the filters passed to the page.

I'm hoping for something as simple as:

.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("MyAction", "MyController"))
.Filter(Request.QueryString["filter"])
.Sort(Request.QueryString["sort"])
.PageSize(Request.QueryString["pageSize"])
)

I assume you get the idea of what I'm going for. The motivation for this is as follows: I'd like to give the user a few buttons, each to a different "canned" report, which is nothing more than the same grid with different filters, sorts, groups, etc. So if the user clicked one of the buttons, they'd be taken to the page containing the grid, and the filters, sorts, etc. would be passed in as QueryString parameters.

Your assistance on this would be much appreciated.

Thank you,
Billy McCafferty

Grid

answered on 01 Jan 2013

5 answers

288 views

Invalid Template error when using editable grid in hierarchical grid.

Hello,

I have the following client template:

<script id="questionsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<AssignedQuestionViewModel>()

.Name("Questions_#=QuestionGroupTemplateId#")

.Columns(columns =>

{

columns.Bound(i => i.QuestionTemplateId).Hidden();

columns.Bound(i => i.QuestionGroupTemplateId).Hidden();

columns.Bound(i => i.Required);

columns.Bound(i => i.QuestionText);

}

)

.ToolBar(toolBar => toolBar.Save())

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(true)

.Model(model =>

{

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

model.Field(m => m.QuestionTemplateId).Editable(false);

model.Field(m => m.QuestionGroupTemplateId).Editable(false);

})

.Read(read => read.Action("ReadAssignedQuestions", "QuestionManagement", new { p = "#=QuestionGroupTemplateId"})

.Type(HttpVerbs.Post)

)

.Update(update => update.Action("SaveAssignedQuestions", "QuestionManagement"))

)

.ToClientTemplate()

)

</script>

When the code breaks on the 'Invalid Template Error", Here is what is in the output from the Dynamic Code page in VS2012:

<script id="questionsTemplate" type="text/kendo-tmpl">

<div class="k-widget k-grid" id="Questions_#=QuestionGroupTemplateId#"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-save-changes" href="#"><span class="k-icon k-update"></span>Save changes</a><a class="k-button k-button-icontext k-grid-cancel-changes" href="#"><span class="k-icon k-cancel"></span>Cancel changes</a></div><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="QuestionTemplateId" data-title="[en-US: QuestionTemplateId]" scope="col" style="display:none"><span class="k-link">[en-US: QuestionTemplateId]</span></th><th class="k-header" data-field="QuestionGroupTemplateId" data-title="[en-US: QuestionGroupTemplateId]" scope="col" style="display:none"><span class="k-link">[en-US: QuestionGroupTemplateId]</span></th><th class="k-header" data-field="Required" data-title="Required" scope="col"><span class="k-link">Required</span></th><th class="k-header" data-field="QuestionText" data-title="Question Text" scope="col"><span class="k-link">Question Text</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>

jQuery(function(){jQuery("\#Questions_#=QuestionGroupTemplateId#").kendoGrid({"columns":[{"title":"[en-US: QuestionTemplateId]","hidden":true,"field":"QuestionTemplateId","encoded":true},{"title":"[en-US: QuestionGroupTemplateId]","hidden":true,"field":"QuestionGroupTemplateId","encoded":true},{"title":"Required","field":"Required","encoded":true,"editor":"\u003cdiv class=\"baseEditorTemplate\" style=\"\"\u003e\u003cdiv\u003e    \u003c/div\u003e        \u003cdiv\u003e        \u003clabel for=\"Required\" title=\"Required\"\u003eRequired\u003c/label\u003e\u0026nbsp;\u003cinput class=\"checkBoxes\" data-val=\"true\" data-val-required=\"The Required field is required!!.\" id=\"Required\" name=\"Required\" title=\"Required\" type=\"checkbox\" value=\"true\" /\u003e\u003cinput name=\"Required\" type=\"hidden\" value=\"false\" /\u003e    \u003c/div\u003e    \u003cdiv id=\"errorMsg\"\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Required\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Required\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Question Text","field":"QuestionText","encoded":true,"editor":"\u003cdiv class=\"baseEditorTemplate\"\u003e\u003cdiv\u003e    \u003clabel for=\"QuestionText\" title=\"Question Text\"\u003eQuestion Text\u003c/label\u003e\u003c/div\u003e\u003cdiv\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Question Text field is required!!.\" id=\"QuestionText\" name=\"QuestionText\" title=\"Question Text\" type=\"text\" value=\"\" /\u003e    \u003cdiv id=\"errorMsg\"\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"QuestionText\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e      \u003c/div\u003e\u003c/div\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"QuestionText\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"}],"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this item?","mode":"incell","template":null,"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText"}]},"dataSource":{"transport":{"read":{"url":"/Administration/QuestionManagement/ReadAssignedQuestions/#=QuestionGroupTemplateId","type":"POST"},"update":{"url":"/Administration/QuestionManagement/SaveAssignedQuestions"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"QuestionTemplateId","fields":{"QuestionTemplateId":{"editable":false,"type":"number"},"QuestionGroupTemplateId":{"editable":false,"type":"number"},"QuestionText":{"type":"string"},"Required":{"type":"boolean"}}}},"batch":true}});});

<\/script>

</script>

If I make the template grid 'non editable', it works fine. Also, if I take the client grid and use it stand-alone, it works fine. It is only when I try to use it as a sub-grid in the hierarchical grid that it fails.

Thanks you!
Danny Green

Grid

answered on 31 Dec 2012

2 answers

102 views

multiple pointers in radial guage

any plans for handling multiple pointers in the radial guage?

LinearGauge

answered on 31 Dec 2012

1 answer

115 views

Adding and Removing multiple nodes to the TreeView control

We use KendoUI TreeView controls for editing huge amounts of data (~ 10K of nodes). After adding a custom multi-selection and drag-n-drop functionalities we found that the control performs slowly when a user moves large number of nodes. Primary reason for this is that since TreeView and HierarchicalDataSource don't have methods for adding or removing multiple nodes. Each node has to be removed and added individually which causes a very large overhead on state refresh after each operation. Is there any ways to avoid such overhead?

TreeView

answered on 31 Dec 2012

1 answer

427 views

Object doesn't support property or method 'addEventListener'

Hi:
On my first mobile site I got the above problem in the following mobile js code:

for (var i = 0; i < CAPTURE_EVENTS.length; i ++) {

that.container[0].addEventListener(CAPTURE_EVENTS[i], capture, true);

}

The problem only occurs with IE browser, use Chrome browser and the problem disappears.

Phil

General Discussions

answered on 31 Dec 2012

1 answer

98 views

Creating href items in ListView from json feed

I am trying to create a dynamic set of href items in a list view from json. The sample json is below.
[

{"DayOfWorkOut":"<li><a href='#DayFive' data-role='button'  style='display: block; margin: .25em; text-align: left;' data-transition='slide'>12/5/2012</a></li>"},
{"DayOfWorkOut":"<li><a href='#DayFive' data-role='button'  style='display: block; margin: .25em; text-align: left;' data-transition='slide'>12/5/2012</a></li>"},
{"DayOfWorkOut":"<li><a href='#DayFive' data-role='button'  style='display: block; margin: .25em; text-align: left;' data-transition='slide'>12/5/2012</a></li>"},
{"DayOfWorkOut":"<li><a href='#DayFive' data-role='button'  style='display: block; margin: .25em; text-align: left;' data-transition='slide'>12/5/2012</a></li>"},
{"DayOfWorkOut":"<li><a href='#DayFive' data-role='button'  style='display: block; margin: .25em; text-align: left;' data-transition='slide'>12/5/2012</a></li>"}
]

The items appear in the list view, but they appear as just text.  I am using a template to bound the field.  
I have searched the documentation and forums and have not found a potential solution.  
How can this be accomplished?

ListView (Mobile)

answered on 31 Dec 2012

1 answer

280 views

Validation information can not disappeared automatically

Hi,
Bug.

1. When the grid editing mode is Popup.

The following test cases are based on 'Add new item' function.
For the Required Validation:
Case 1:
Step 1: (Normal)
Delete all default in textbox and leave this textbox(use mouse to leave textbox), then show a tips. The means this textbox cannot be null.

Step 2:(Bug)
Input a value in textbox,
If Step1 use mouse to leave this textbox, then both use mouse and press tab to leave textbox are the tips disappeared.
But Step1 use Tab to leave this textbox, then only press Tab to leave textbox the tips is can be disappeared at this step.
In actually, whether I leave this textbox use anyway at step1, that can not to impact the tips' appear/disappear.

Step 3:(Bug)
Delete the value in this textbox again.
If Step2 use mouse to leave this textbox, then both use mouse and press tab to leave textbox are the tips appeared.
But Step2 use Tab to leave this textbox, then only press Tab to leave textbox the tips is can be appeared at this step.

Step4:(Bug)
Input a value in this textbox again and leave this textbox(use mouse / press tab), but the tips can not disappeared.

For data type Validation:
The field's definition:

public decimal Tonnage { get; set; }

Case1:
Step1:(Normal)
Change this textbox value from default value '0' into a character(eg:'f'), and leave this textbox(mouse/tab), the tips is appeared.

Step2:(Bug)
Change this textbox value from 'f' into a number.
If use mouse to leave textbox at step1. Then both use mouse and tab to leave textbox are the tips disappeared.
But if use tab to leave textbox at step1. Then only use tab to leave textbox, the tips is can be disappeared.

Step3:(Bug)
Change this textbox value from a number into 'f'.
About leave textbox has same problem with Step2.
The tips is appeared.

Step4:(Bug)
Change this textbox's value from 'f' into a number.
Both use mouse and tab to leave this textbox are the tips can not be disappeared.

Case2:
I had assignment the UI-Culture to the 'zh-CN' (Chinese).

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<CarryingCapacityMD>"

UICulture="zh-CN" %>

But the tips can not be localized.

About Input:
If double click to select all text in the textbox, I can't to input any value.
I must Click the textbox first and double click to select all text in the textbox, that can input value.

Grid

answered on 31 Dec 2012

1 answer

113 views

CRUD Application with Kendo Ui Grid in Asp.net MVC3

Hello Experts
I am creating a crud application using KendoUI Grid in Asp.net MVC3 of VS-2012. But It doesn't work properly. For your kind consideration I am giving my code samples as attachment.

please help me to fix my problem.

Thanks in advance
Md. Mojammel Haque

Grid

answered on 31 Dec 2012