Questions on UI for ASP.NET MVC Forum

11 answers

558 views

[Solved] Kendo UI MVC Beta on ASP.NET MVC4 RC?

Hi,
can I try the Kendo UI MVC on the brandnew ASP.NET MVC4 RC as well?
Means: is the Binaries\MVC3\Kendo.Mvc.dll ok for MVC4?

Cheers,
Hermann

General Discussions

answered on 24 Aug 2012

1 answer

125 views

kendovalidation for kendo objects

I would like to write some client side validation for kendo objects when the save button is clicked...however I am having trouble doing so. For example I have two autocompletes that have the same data bound to them. One of them cannot be empty. And if both have a value they both cannot be the same value (name). I also have a currencytext box that cannot be empty to create the record.

All of the validation examples I have found so far deal with regular web inputs. I just figured out, thanks to this forum how to set focus to a kedno object. It was no where in documenation and intellisence did not pick up the .siblbings on the second line of code. Also Iwould of had no idea to put ("input:visible").focus(); on the second line either. Can you point me to a demo that validates ACTUAL Kendo objects on a web form? Thanks...brand new at this

var numeric = $("#AuthBudget").kendoNumericTextBox();
numeric.siblings("input:visible").focus();

General Discussions

answered on 24 Aug 2012

0 answers

115 views

Value(null) method only works first time in window widget.

I have an ajax form in a window widget and on this form I have 4 Kendo AutoComplete widgets configured using the AutoCompletFor() method. The widgets are working correctly as far as suggesting and filtering against an MVC action, etc. I placed a button on my form to allow the user to quickly clear all of the values from the form:

Here is the button code:

<input onClick="resetOptionsQuery();" type=button value="Reset Query" />

Here is the code for one of the AutoComplete Widgets:

@(Html.Kendo().AutoComplete()

.Name("OptionQueryApplication")

.Placeholder("Select a default application...")

.DataTextField("Value")

.Filter("contains")

.HtmlAttributes(new { style = "width:250px" })

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetFilteredApplicationNameList", "ErrorLog")

.Data("onGetDefaultApplication");

}).ServerFiltering(true);

}))

Here is the javascript function in my javascript file to set the value to null:

function resetOptionsQuery() {

$("#OptionQueryApplication").data("kendoAutoComplete").value(null);

$("#OptionQueryMachine").data("kendoAutoComplete").value(null);

$("#OptionQueryEnvironment").data("kendoAutoComplete").value(null);

$("#OptionQueryUser").data("kendoAutoComplete").value(null);

}

The interesting thing is that when I first open the Window widget and display the form, the user can type into the autocomplete and then click the reset button and it clears the values and the placeholder value returns. If, however, they submit the form using a "save" method, and then click the "Reset" button, nothing happens. The function is called (I placed alerts inside). If I set the value to something other than null for instance (#field).data("KendoAutoComplete").value("some value"), the value changes, but not if I set it to null, or empty string.

Any help would be appreciated. Is this a bug or am I doing something incorrect?

AutoComplete

asked on 23 Aug 2012

0 answers

272 views

Window position mvc

Hi, I want to position my window OFF center to the left. So it does not cover up a part of the screen I want the user to see. I am using this to open it. Any ideas on how I can manipulate the positioning? Css?

.data('tWindow').center().open()

Window

asked on 23 Aug 2012

0 answers

155 views

How to with mvc grid

Hi,

I start to test Kendo mvc helpers and I have few questions about grid:
- how to change-translate delete confirmation text in pop-up,
- how to set column to readonly, also on edit pop-up dialog,
- how to format elements on edit pop-up, like input and lable,
- how to change font size on command buttons or how to use only images without text on buttons

This is for first day :0)
Thx for any help or ideas

Tomaz

Grid

asked on 23 Aug 2012

1 answer

265 views

[Solved] Ajax parameters

Hi,

We are porting our Telerik MVC project to Kendo MVC.
How can we achieve this with Kendo?

Clientside rebind

var grid = $('#DaGrid').data('tGrid');

grid.refresh(

{

searchfilter: search

}

);

c#

public ActionResult Select_archief(string searchfilter)

{

....

}

Thus a rebind with filter parameter.

Thanks,
Martin

Grid

answered on 23 Aug 2012

3 answers

1.3K+ views

[Solved] How can I find out when the treeview has finished loading?

This is my Kendo treeview definition:

@(Html.Kendo().TreeView()
        .Name("CollectionsheetTree")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("_getProjectCollectionsheetTree2", "Project", new { projectId = _projectId })            )
        )
.HtmlAttributes(new { style = "height: 200px; overflow: auto; " })
.DragAndDrop(!Model.IsReadOnly)
)

When the ajax call has completed, I need to run some processing on the treeview to style it (e.g. change the text font).

I put the code in the $(document).ready as suggetsed by the Kendo documentation:

$(document).ready(function () {
var treeView = $("#CollectionsheetTree").data("kendoTreeView");

            treeView.find(".k-in").each(function() {
                var element = $(this),
                    data = element.find('> .data');

                if (data.length) {
                    //element.css('background-color', '#aabbcc' );
                    element.addClass("treeviewNode");
                    data.remove();
                }
            });
});

But the execution fails over on this line:
treeView.find(".k-in").each(function() {

The error message says:
Microsoft JScript runtime error: Unable to get value of the property 'find': object is null or undefined

I think it is because when the $(document).ready is executed the treeview is still being constructed.
On the Telerik treeview control there is a OnDataBound event that can be used to ensure that a function is run only after the treeview has been fully initialised.

How can I ensure that the Kendo treeview has been initialised before calling the styling function on it?

For completeness, here is the controller method:

         public ActionResult _getProjectCollectionsheetTree2(kendoTreeviewItem node,   int? projectId)
         {
             var nodes = new List<kendoTreeviewItem>();
             List<DofSurvey> list;
             _dofSurvey.EnrolInUnitOfWork(_unitOfWork);

             int collectionSheetId;
             int.TryParse(node.id, out collectionSheetId);

             if (node.id == null)
             {
                 list = _dofSurvey.FindBy(f => f.ParentSurveyId == null & f.ProjectId == projectId, "Survey").ToList();
             }
             else
             {
                 list = _dofSurvey.FindBy(f => f.ParentSurveyId == collectionSheetId & f.ProjectId == projectId, "Survey").ToList();
             }

             list.ForEach(cs =>
             {
                 var d = new kendoTreeviewItem
                 {
                     id = cs.SurveyId.ToString(),
                     text = cs.Survey.Title + "<span class='data'></span>",
                     hasChildren = cs.ChildSurveys.Any()
                 };
                 nodes.Add(d);
             });
             return Json(nodes, JsonRequestBehavior.AllowGet);
         }

TreeView

answered on 23 Aug 2012

0 answers

236 views

populate telerik dropdown list using jquery

I am having issues with populating a telerik dropdown list using jquery. I get the following Error:

'get(...).options' is null or not an object

On line:

$("#courseID").get(0).options.length = 0;

Here is my telerik dropdown list:

                <%= Html.Telerik().DropDownList()
                .Name("courseID")
                .HtmlAttributes(new{ @id="courseID"})
                %>

Here is how I am trying to populate it using jquery:

I call the populateDDL function on "StudentID" focusout event, here is the function.

function populateDDL() {

var link = '/Student/EnrollerCourse';
$.ajax({
    type: 'POST',
    url: link,
    data: { id: $('#StudentId').val() },
    dataType: 'json',
    success: function (result) {
         $("#courseID").get(0).options.length = 0;
        $("#courseID").get(0).options[0] = new Option("Select", "Select");
        $.each(result.courseID, function (item, value) {
            var courseID = value;
            $("#courseID").get(0).options[$("#courseID").get(0).options.length] = new Option(courseID);
        });          
    },
    error: function (result) {
        alert("Failed")
    }
});
}

DropDownList

asked on 22 Aug 2012

0 answers

338 views

Is there any way to create dynamic form based on Model?

I am trying to create a dynamic form based on client requirement. if clients need custom input fields then we stored the details of the custom fields in the database. After they logged into the system we get the custom fields details as JSON result (sample shown below) by using this result i would like to create a observable model and form.

var sampleCustomFieldObj = { customfields: [ {columnName: "customField1",type:"number", displayName: "My Number Field"},{columnName: "customField2",type:"string", displayName: "My String Field"},

{columnName: "customField3",type:"date", displayName: "My Date Field"}] };

Thanks in advance,
Ramesh.

General Discussions

asked on 22 Aug 2012

1 answer

254 views

How to make grid observable

Hi,
I am trying to load a kendo grid using Json Data coming from a controller. I would like to know how I can make my viewmodel grid observable. Please find my view model code below:

function

initControls() {

$(

"#ChargesGrid").kendoGrid({

dataSource: {

type:

"json",

transport: {

read: {

url:

"Charge/GetCharges",

dataType: