Questions on Kendo UI for jQuery Forum

1 answer

326 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

218 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

221 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

179 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

219 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

276 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

3 answers

876 views

Date picker format does not persist in Edit Popup - MVC

Hi,

I have nullable datetime (in UI and as date in DB) field for birth date. But when I click on Edit action in grid, It still displays as yyyy/MM/dd instead of yyyy-MM-dd. Hence I am getting BirthDay is not valid date error message. I have not written any explicit validation.

In my cshtml page I have formatted it as:
columns.Bound(r => r.BirthDay).Width(100).Format("{0:yyyy-MM-dd}");

In my model I have initialized as:
[Display(Name = "Birth Day")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime? BirthDay { get; set; }

I can however generalized and apply formatting for my entire site by below code in global.asax but I want to apply it for specific pages only.
protected void Application_BeginRequest()
{
CultureInfo info = new CultureInfo(System.Threading.Thread.CurrentThread.CurrentCulture.ToString());
info.DateTimeFormat.ShortDatePattern = "yyyy-MM-dd";
System.Threading.Thread.CurrentThread.CurrentCulture = info;
}

Please help!

Thanks,
Nirav

Grid

answered on 10 Apr 2013

1 answer

173 views

How to get the grid's rows count ? alert($('#Grid').data("kendoGrid").tbody.find('>tr.k-master-row').length); seems not right

How to get the grid's rows count ?My grid has data,but the code shows 0 row..
alert($('#Grid').data("kendoGrid").tbody.find('>tr.k-master-row').length);

Grid

answered on 10 Apr 2013

7 answers

963 views

Unit testing

where can I find some documentation / examples with Qunit or Jasmine for something such as testing if data is bound to a grid? or upon selecting a row, data is present?

General Discussions