Questions on Kendo UI for jQuery Forum

10 answers

49 views

View should optionally not create another layer in the DOM Tree

If view is rendered, it creates an additional layer in the DOM. With "tagName" the specific element can be configured. I prefered, if this layer could be omitted entirely.

In all my recent SPA-related work this layer was not needed at all. Typically the layout has a "section" as the point of insertion, and the view has a "div" as the outer element.

Michael G. Schneider

SPA

answered on 10 Apr 2013

2 answers

455 views

Empty data is passed to server after editing grid

Hello,
I have server side kendo grid:

<div class="k-rtl">

@(Html.Kendo().Grid<BO.UserPem>()

.Name("UserPemGrid").Events(e => e.DataBound("UserPemRowDataBound")).ToolBar(toolbar =>

{

toolbar.Create().Text("הוסף");

toolbar.Save().SaveText("שמור").CancelText("בטל");

})

.Columns(columns =>

{

columns.Bound(o => o.UserId).Title("ת.ז.");

columns.Bound(o => o.PermittedProgramGroup).Title("קבוצות הרשאה");

columns.Bound(o => o.PermittedProgramId).Title("תוכניות מורשות");

columns.Command(command => command.Destroy().Text("מחק")).Width(150);

})

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

.Sortable()

.Scrollable()

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

.DataSource(dataSource => dataSource.Ajax().Model(model => model.Id("UserId")).Read(read => read.Action("UserPemRowDataRead", "Home"))

.Update(update => update.Action("UserPemRowDataUpdate", "Home"))

.Create(update => update.Action("UserPemRowDataCreate", "Home"))

.Destroy(update => update.Action("UserPemRowDataDestroy", "Home"))

)

</div>

For some reason on server side in each of update events I get empty data...

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult UserPemRowDataCreate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]List<UserPem> users)

{

var results = new List<UserPem>();

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

{

foreach (var user in users)

{

UserPermissionsTable.Insert(user);

results.Add(user);

}

return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

}

I did it like in demo example...

Any help would be appreciated..

Thanks
Shabtai

Grid

answered on 10 Apr 2013

1 answer

348 views

enable disable kendo ui mobile button

how to enable disable kendo mobile button from javascript

Button (Mobile)

answered on 10 Apr 2013

7 answers

717 views

Grouping not working

hi,
I had been trying to group the grid on the column basis (the drag and drop feature) but I have not been able to drag and place the column in the Group Panel the column name drags with the stop sign on it.

@(Html.Kendo().Grid(Model.PersonSearch)
.Name("DatasGrid")
.Columns(columns =>
{
columns.Bound(p => p.SlNo).Visible(false);
columns.Bound(p => p.PersonName).Width("110px").Groupable(true);
columns.Bound(p => p.Code).Width("70px");
columns.Bound(p => p.Cityname).Width("300px").Groupable(true);
.Pageable(paging => paging.PageSizes(true))
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.SlNo))
.ServerOperation(false)
.Read(read => read.Data("AddDataBinding").Action("PersonDtls", "PersonSearch", new { area = "" }))
)
)

Jquery version -1.7
VS-2012

Grid

answered on 10 Apr 2013

1 answer

314 views

Binding Data to combobox after ajax call using mvvm

Hi,

I am using MVVM Framework

var indexViewModel = kendo.observable({
StatesList: statesList,
CountriesList: countriesList,
SelectedCountry: null
});

kendo.bind($("body"), indexViewModel);

Calling an ajax call in document ready function

$("document").ready(function () {
GetBaseInfo();
}

function GetBaseInfo()
{
$.ajax({
url: "http://localhost:64283/DRRService.svc/GetBaseData",
dataType: "jsonp",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data == null) {
alert("No Data Available");
}
else {

statesList = data.statesList;
countriesList = data.countriesList;

$("#countriesCombo").data("kendoComboBox").dataSource.data = countriesList;
$("#countriesCombo").data("kendoComboBox").refresh();

}
}
});

}
Mu UI Part is this

<select id="countriesCombo" data-role="combobox" data-text-field="Value"
data-bind="source:CountriesList" />

The data is not getting refreshed. Can you please provide the solution to this

ComboBox

answered on 10 Apr 2013

1 answer

209 views

jQuery Form Wizard

I was wondering if anybody new if there was an option in Kendo Web UI to create a multi step form similar to the one featured here: http://thecodemine.org/#

PanelBar

answered on 10 Apr 2013

1 answer

201 views

Disable "go back" button when on first page.

Can anyone think of a clean way to make the go back button un-clickable if the user is already on the first page.

Not sure if there is already a hidden setting somewhere that does this...

Using MVC4 if its important.

Grid

answered on 10 Apr 2013

1 answer

166 views

Need example for setting multiple CategoryAxis.AxisCrossingValue with Date

All the examples in the API use an array of indices for setting this value.
http://docs.kendoui.com/api/dataviz/chart

We are trying to solve the need for positioning a second vertical line in the chart to mark today's date by adding a second vertical axis. Is it even possible to set the AxisCrossingValues of the category index with an array of dates rather than indices?

Setting axisCrossingValue : [new Date(1/1/2013), new Date()] does not work.

Thanks.

Charts

answered on 10 Apr 2013

1 answer

211 views

dropdown lists null in editor templates.

So how would I handle dropdowns in the editor template. Every time my editor template is intialized my selectlist for my dropdowns are null. Do I need to set up an empty list and populate on the dropdown on edit in jquery?

Here is my grid:

@(Html.Kendo()

.Grid(Model.Activity.MediaForms)

.Name("MediaIterations")

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

.Columns(columns =>

{

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

columns.Bound(form => form.Name).Title("Ad Name");

columns.Bound(form => form.TopicDesc).Title("Message Topic");

columns.Bound(form => form.TypeDesc).Title("Media Type");

columns.Bound(form => form.OutletName).Title("Media Outlet");

columns.Bound(form => form.TimesAdRan).Title("Runs");

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

})

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

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

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(false)

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

.Create(create => create.Action("AddMediaForm", "Form", new { planActivityId = Model.Activity.PlanActivityID }))

.Destroy(destroy => destroy.Action("DeleteMediaForm", "Form", new { planActivityId = ViewBag.planActivityId }))

.Update(destroy => destroy.Action("DeleteMediaForm", "Form", new { planActivityId = ViewBag.planActivityId })))

)

Here is my editor template in the editortemplates views folder:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>MediaForm</legend>
        <div>
            <label>Month ads ran @Html.TextBoxFor(model => model.Month, new { @placeHolder = "mm",@columns="2" })/@Html.TextBoxFor(model=>model.Year,new{@placeHolder="yyyy", @columns="4"})</label>
            <label>Ad Name @Html.TextBoxFor(model => model.Name)</label>
        </div>
        <div>
            <label>
                Message Topic
                <select id="MediaTopic" name="TopicId">
                    @foreach (var category in Model.MediaCategoriesList)
                    {
                        <optgroup label="@category.CategoryDesc">
                            @foreach (var topic in category.TopicsList)
                            {

                                <option value="@topic.Value" selected="@topic.Selected">@topic.Text</option>
                            }
                        </optgroup>
                    }

                </select></label>
            <label>Ad Runs @Html.TextBoxFor(model=>model.TimesAdRan)</label>
        </div>
        <div>
            <label>Media Type @Html.DropDownListFor(model => model.TypeId, Model.TypeList, new { @id = "mediaTypes" })</label>
        </div>
        <div>
            <label>Media Outlet @Html.DropDownListFor(model=>model.OutletID,Model.OutletList)</label>
        </div>
    </fieldset>
}

if I don't set the dropdown intially in my view all my dropdownlist are null and produce an exception. Is there anyway around this.

Grid

answered on 10 Apr 2013

5 answers

264 views

Grid Popup Editing layout

Dear Telerik Gurus,

Good morning.

I just downloaded the a trial version of KendoUI and saw the Popup editing features. Would just like to inquire if we customize the layout of the modal window something like as seen below:

http://www.flickr.com/photos/32177697@N03/8516958999/

Can that be done using a template in the popup edit template?

Thanks in advance and more power to Telerik :D

regards,
almond

Grid

answered on 10 Apr 2013