Questions on Kendo UI for jQuery Forum

1 answer

129 views

I was playing with the Radial Gauge and wanted to use the data initialization attributes but it seems that kendoui ignores somehow other attributes I set:

<div data-role="radialgauge" data-pointer="{ value: 20 }"></div>

the attribute data-pointer is ignored and the gauge is set to the default 0.

LinearGauge

answered on 02 Jan 2013

5 answers

1.3K+ views

Using a partial view as the template for the popup editor

Is it possible to use a partial view (.cshtml) as the template for the grid's popup editor in Javascript? Essentially I want to set the "template" property of the "editor" from Javascript. I see that it's possible by using the MVC wrapper's HTML helper property TemplateName, but I don't want to use the helper. From what I see the helper creates a string version of the partial view and sets the "template" property as viewed in the resulting Javascript generated by the view engine.

editable: { mode: 'popup', template: 'can I set this value from JS?' },

Thanks,
Dave

Grid

answered on 02 Jan 2013

1 answer

223 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

152 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.9K+ views

[Solved] 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

323 views

[Solved] 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

129 views

multiple pointers in radial guage

any plans for handling multiple pointers in the radial guage?

LinearGauge

answered on 31 Dec 2012

1 answer

143 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

485 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

111 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