Telerik Forums
UI for ASP.NET MVC Forum
3 answers
699 views

I wish to connect the treeview checkboxes to an "enabled" field for records in my database.

Specifically, when a checkbox is clicked, I want to all an action to update the corresponding enabled field.

Also, with checkchildren(true), I want to likewise update the enabled field of all children.

What are the basics of how to do this?

The only demo using checkboxes also uses hard-coded tree items, with no connection to remote data.

Alex Gyoshev
Telerik team
 answered on 06 Nov 2015
1 answer
658 views

Hi telerik team,

I've a Multi-column comboBox and I need to get the value of 3 of the columns when the user select one item in JavaScript.

Here's my comboBox code:

01.@(Html.Kendo().ComboBox()
02.    .Name("comboBox1")
03.    .Events(x => x.Change("comboBox1_onChange"))
04.    .DataValueField("ID")
05.    .DataTextField("Description")
06.    .HeaderTemplate(
07.        "<div class=\"dropdown-header\">" +
08.        "<span class=\"k-widget k-header\">ID</span>" +
09.        "<span class=\"k-widget k-header\">Reference</span>" +
10.        "<span class=\"k-widget k-header\">Description</span>" +
11.        "<span class=\"k-widget k-header\">Internal Code</span>" +
12.        "</div>")
13.    .Template(
14.        "<span class=\"columnItem\">#: data.ID #</span>" +
15.        "<span class=\"columnItem\">#: data.Reference #</span>" +
16.        "<span class=\"columnItem\">#: data.Description #</span>" +
17.        "<span class=\"columnItem\">#: data.InternalCode#</span>")
18.    .Filter(FilterType.StartsWith)
19.    .DataSource(source => {
20.        source.Custom()
21.        .ServerFiltering(true)
22.        .ServerPaging(true)
23.        .PageSize(80)
24.        .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
25.        .Transport(transport =>
26.        {
27.            transport.Read("ProductsVirtualization_Read", "Edit");
28.        })
29.        .Schema(schema =>
30.        {
31.            schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
32.            .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
33.        });
34.    })
35.    .Virtual(v => v.ItemHeight(26))//.ValueMapper("valueMapper"))
36.)

 

Can anyone give me a clue about how to read the value of "ID", "Reference" and "InternalCode" in the comboBox1_onChange event?

Thank you.

Kiril Nikolov
Telerik team
 answered on 06 Nov 2015
3 answers
220 views

I'm trying to use Kendo UI Grid in Orchard CMS (http://orchardproject.net) and I've almost been able to get it to work all the way but I can't seem to get validation to work. I've decorated my model with:

 

        [DisplayName("Namn")]
        [Required(ErrorMessage = "Ange värde")]
        public string Name { get; set; }

 

but when I try to update/create with empty value I get an error:

 

{"Message":"The request is invalid.","ModelState":{"civilStatusTypeViewModel.Name":["Ange värde"]}}​

 

But I am not getting any "visual validation" error message in the page.

 

It is quite complicated to setup Kendo UI with Orchard so this is most likely a configuration error, like a missing .css or .js, but I can't figure out where to look so I would be grateful for any help on how to solve this.

improwise
Top achievements
Rank 1
Iron
Iron
 answered on 06 Nov 2015
1 answer
320 views
Hi, my KendoUI version is v2015.2.902, i use a kendo grid for server paging, sorting, filtering and now i would like to add grouping functionality.
I use "function read" mode for dataSource calling asp.net mvc controller method. (server side request object is a Kendo.Mvc.UI.DataSourceRequest object)
this is my dataSource configuration:

let dataSource: any = {
  batch: true,
  serverPaging: true,
  serverSorting: true,
  serverFiltering: true,
  serverGrouping: true,
  page: 1,
  pageSize: 20,
  transport:
  {
      read: function (options)
      {
          kendo.data.transports["aspnetmvc-ajax"].fn.options.options = { prefix: '' };
          let request = kendo.data.transports["aspnetmvc-ajax"].fn.options.parameterMap(options.data, "read", false);

          thisObject.httpService.GetNodes(request)
          .then(function (args: IHttpServiceParameters)
          {
              options.success(args.data);
          });
      }
  },
  schema:
  {
      data: function (data)
      {
          return data.Data;
      },
      total: function (data)
      {
          return data.Total;
      },
      groups: function (data)
      {
          return data.Data;
      },
      model: model
  }
};

if i not use grouping all work fine, but using grouping the data result object seem not binding correctly.

args.data.Data returned from server has this schema:

[{ AggregateFunctionsProjection: null, 
   Aggregates: {}, 
   HasSubGroups: false, 
   Items: [],      <--- Keep note of this element name
   Key: "Invoice", 
   Member: "InvoiceColumnName", 
   Subgroups: [], 
   value: undefined 
 }, 
...]

the problem is when kendo.all.js parse the response of the server, passed from args.data.Data to convertGroup function (kendo.all.js line 7049)
in this function there is a call who reference to record.items object but the object in data returned from server is called Items (starting with uppercase)

kendo.all.js code:
function convertGroup(data, getters, modelInstance, originalFieldNames, fieldNames) {
      var record,
          idx,
          fieldName,
          length;

      for (idx = 0, length = data.length; idx < length; idx++) {
          record = data[idx];

          fieldName = originalFieldNames[record.field];
          if (fieldName && fieldName != record.field) {
              record.field = fieldName;
          }

          record.value = modelInstance._parse(record.field, record.value);

          if (record.hasSubgroups) {
              convertGroup(record.items, getters, modelInstance, originalFieldNames, fieldNames);    <--- Here the problem !!
          } else {
              convertRecords(record.items, getters, modelInstance, originalFieldNames, fieldNames);  <--- Here the problem !!
          }
      }
  }

do you have any suggestion? why the object returned from server have Items property insted of items?
How to solve?
In attachment the google developer tools screenshot.

Thanks
Rosen
Telerik team
 answered on 06 Nov 2015
1 answer
976 views

Hi Everyone, 

 I have a question regarding the ASP.NET MVC Dropdownlist.

 I load my DDL with data from the controller like this. 

public JsonResult GetCountries()
{
    SelectList list = null;
    ServiceSession.CreateService<MemberService>((Service) =>
        {
            var country = Service.GetCountryCode​s();
            list = new SelectList(country, "Id", "Name", country.Where(e=>e.Name== "Danmark").First());
        });
 
    return Json(list, JsonRequestBehavior.AllowGet);
}
this result return a list of countries and add them to the DDL. 

@(Html.Kendo().DropDownListFor(m => m.CountryCode)
     .DataTextField("Text").DataValueField("Value").SelectedIndex(185).
     AutoBind(true).DataSource(dataSource => dataSource.Read(read =>
     { read.Action("GetCountries", "Member"); })))

Everything is fine, but how can I set the selectedIndex by the text and not the ID in the list?

I can't be sure that Denmark is always number 185. 

Georgi Krustev
Telerik team
 answered on 06 Nov 2015
3 answers
357 views

 If I have a treeview with .DataSource(d=>d.Model(....).Read(r=>r.Action(....)))

Can I use .ItemAction() to set item.checked based on a field provided in the DataSource?  How?

In the code below, what would I put in place of the bolded comment?

@( Html.Kendo()
       .TreeView()
       .DataTextField("Name")
       .Name("userPermissionsTree")

       .Checkboxes(cbxConfig => cbxConfig.Enabled(true)
                                         .CheckChildren(true)
                                         .Name("checkedNodes"))
       .DataSource(d => d.Model(m =>
                                {
                                    m.Field("enabled");
                                    m.Id("permissionId")
                                })
       .Read(read => read.Action("PermissionsTree_Read",
                                                   "SettingsUsers",
                                                   new {
                                                       userId = Model
                                                   })))
      .ItemAction(item=>item.Checked=    /*******set to true if field enabled is true**********/    )
      .Events(events => events
        .Check("onPrivilegeCheck"))
      )

Daniel
Telerik team
 answered on 06 Nov 2015
1 answer
93 views

How can I make editable first 3 columns of telerik grid? I can make editable the whole row but I need only first 3 columns.

 

 

Thanks.

Viktor Tachev
Telerik team
 answered on 05 Nov 2015
3 answers
866 views

 For some unknown reason I can't seem to get my EditTemplates to work if I have them in a folder named "EditorTemplates" in the same folder as my view containing the Kendo UI Grid (MVC) but if I put the same file in Shared/EditorTemplates it works. If I look at this example the Edit Template is setup as indicated above but is working (I guess). 

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor/KendoUIMVC5/Views/Home

 

What do I need to do to get it to work from an EditorTemplates folder in same folder as my main view?

improwise
Top achievements
Rank 1
Iron
Iron
 answered on 05 Nov 2015
5 answers
1.2K+ views

I have a window (apologies for bolding... seems easiest way to distinguish code given limited formatting options)

     @(Html.Kendo()
          .Window()
          .Name("UserPermissionsWindow")
          .Title("User Privileges")
          .Content("loading privlege settings...")
          .Iframe(true)
          .Draggable()
          .Resizable()
          .Visible(false))

 

opened by a button click from a grid row:

          columns.Command(com => com.Custom("Privileges")
                                    .Click("openUserPermissionsWindow"));​

 The click handler calls the window refresh button:

 <script type="text/javascript">
    function openUserPermissionsWindow(e) {
        e.preventDefault();
        // the dataitem retrieved here will have the field values that can subsitute in the template (I hope)
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        personId = dataItem.Person_ID; //will this work?????
        var wnd = $("#UserPermissionsWindow").data("kendoWindow");
        wnd.refresh({
            url: "UserPrivileges/" + personId, // what does this url need to look like?
            data: { id: personId }
        });
        wnd.center().open();
    }
</script>

And the action returns a partialview containing a treeview wrapper:

 
<b>yo 'sup?</b>
@( Html.Kendo()
       .TreeView()
       .DataTextField("Name")
       .Name("userModulePermissions")
       .Checkboxes(cbxConfig => cbxConfig.Enabled(true)
                                         .CheckChildren(true)
                                         .Name("checkedNodes"))
       .DataSource(d => d.Read(read => read.Action("PermissionsTree_Read",
                                                   "SettingsUsers",
                                                   new {
                                                           userId = Model
                                                       })))
      )

But I end up with javascript error:  ReferenceError: jQuery is not defined

This is "fixed" by putting the jquery (and kendo?) bundles at the top of the PARTIAL view:

 @Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")​

But because this is a PartialView in a window on a page that already exists, shouldn't it be able to use the jquery library that is already on the page?

I don't think I should have to bundle jquery libraries on partial views.

Currently the jquery bundle is at top of layout page.

Please advise.

 

Scott
Top achievements
Rank 1
 answered on 04 Nov 2015
2 answers
501 views

We are experiencing an issue with the Kendo ui datetime picker in our MVC Sitefinity application. The issue manifests itself only in IE after a workaround JavaScript function has been applied. The application's default culture is set to fr-CA however in the view the date format needs to be fr-FR. If submit is clicked and the text area of the datetime picker is empty the validation message as set on the model property is displayed correctly, however if any non valid text is entered into the text area then the validation message displayed is: "DateDebut is not a valid date". The workaround function replaces the data-val-date attribute displaying the correct validation message in the French language and as stated works in all browsers but IE.  As show below the kendo culture is set to fr-FR.

 

$(document).ready(function () {
        kendo.culture("fr-FR");
    });
 
   $(function () {
        $("input[data-val-date]").each(function (index, el) {
            var re = new RegExp("The field (.*?) must be a date");
            var string = $(this).attr("data-val-date");
            var m = string.match(re);
            if (m != null && m.length > 1) {
                $(this).attr("data-val-date", string.replace(m[0], "Le champ " + m[1] + " doit être une date (ex: 14/06/2015)"));
            }
 
        });
    });
 
   <div class="form-group" style="width: 100%">
        @Html.LabelFor(m=> m.DateDebut, new { @class = "control-label col-sm-4" })
        <div class="col-sm-3">
            @Html.Kendo().DatePickerFor(m => m.DateDebut).Format("{0:dd/MM/yyyy}").HtmlAttributes(new {@style="width:150px;"})
            @Html.ValidationMessageFor(m => m.DateDebut)
        </div>
    </div>

 

 

LUCIAN GOGONEA
Top achievements
Rank 1
 answered on 04 Nov 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?