A client is asking for both batch edit AND a detail/expand edit.

They like the Excel-like editing of batch, but they want several other UI features in the expanded/detail view that don't make sense in a grid row (think charts, hyperlinks, buttons to calculate things, etc.). The idea is that users could use both, even on the same row, then save all grid changes as usually for batch.

I've got it mostly working here: https://jsfiddle.net/joewilson0/jwcLhtg2/

But I have two questions:

1. Is this a supported way to make edits? Any concerns?
2. When I change a value in the detail/expand template, the row collapses. How can I prevent that?

Hi

I don't really know Kendo UI very well but I'm modifying an existing application that was written almost entirely in Kendo UI. Normally, making small changes by studying and re-purposing existing bits of code works fine for me. However, I have found an issue that I can't get past and I need help with.

I have a screen that lists a bunch of people in a kendo.grid. There is an edit button for each row that launches a popup in which there are a bunch of checkboxes that can be checked. Then on update I will send that data to the server for processing.

However, in the popup, when I press update, the datasource: transport: update: clause isn't firing. (For info, the datasource: transport: read: clause fires perfectly).

So, here is the code. Can anybody see where I have made any mistakes?

(For info, I have pasted below just the grid code, but I have also put in attachment the entire JS page, in case it's helpful).

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

  function setGrid() {
  var command = {};
  dataSource = new kendo.data.DataSource({
  serverFiltering: false,
  serverSorting: false,
      serverPaging: false,
      sort: {
        field: 'per_name',
        dir: 'asc'
      },
      transport: {
      read: {
      url: 'action.cfm?action=filehandler.list',
      dataType: 'json',
      cache: false
      },
      update: {
      url: 'action.cfm?action=filehandler.save',
      dataType: 'json',
      cache: false
      }, // THIS NEVER FIRES
       parameterMap: function (options, operation) {
      console.log(operation);
      console.log(options);
      if (operation !== 'read') {
      return options;
      }
      }
      },
      pageSize: 20,
      schema: {
      model: {
      id: 'login',
      fields: {
      login: {
      editable: false
      },
      per_name: {
      editable: false
      },
      org_name: {
      editable: false
      },
      //lst_user_sec_ids: {
    //  editable: true
      //},
      lst_user_sec_labels: {
      editable: false
      }
      }
      }
      },
      change: function (e) {
      if (e.action === 'sync') {
      lists.loadFilehandlers();
      this.read();
      }
      },
      error: function (e) {
      app.printMessage({
      restError: e.xhr
      });
      }
      
  });

  $screen.find('#filehandler-grid').kendoGrid({
  dataSource: dataSource,
  sortable: true,
  cache: false,
  noRecords: true,
  pageable: {
  pageSize: 20,
  pageSizes: [20, 50, 100],
  refresh: true,
  info: true
  },
  filterable: {
  extra: false,
  mode: 'row',
  operators: {
  string: {
  contains: 'Contains'
  },
  number: {
  eq: 'Equals'
  }
  }
  },
  editable: {
  mode: 'popup',
  template: kendo.template($("#sectors-editor").html())
  },
  edit: function (e) {
  $(e.container).parent().css({
  top: '50px',
  left: '150px',
  width: '850px',
  height: '600px',
  overflow: 'scroll'
  });
  }, 
  
  resizable: true,
  selectable: 'cell',

  columns: [
  {
    field: 'login',
    title: 'ECAS ID',
    hidden: true,
    type: 'string',
    filterable: {
    cell: {
    showOperators: false
    }
    },
    width: '150px'
  },
  {
    field: 'per_name',
    title: 'Name',
    hidden: false,
    filterable: {
    cell: {
    showOperators: false
    }
    }
  },
  {
        field: 'org_name',
        title: 'Unit',
        hidden: false,
        type: 'string',
        filterable: {
        cell: {
        showOperators: false
        }
        }
  },
  {
        field: 'lst_user_sec_labels',
        title: 'Has access to sectors',
        hidden: false,
        type: 'string',
        filterable: {
        cell: {
        showOperators: false
        }
        }
  },
  {
        field: 'lst_user_sec_ids',
        title: 'hide this later',
        hidden: false,
        type: 'string',
        filterable: {
        cell: {
        showOperators: false
        }
        }
  },
  {
    command: [
    {
    name: 'edit',
    text: {
    edit: 'Edit',
    cancel: 'Cancel'
    },
    click: function(e) {
            // prevent page scroll position change
                e.preventDefault();
                // e.target is the DOM element representing the button
                var tr = $(e.target).closest("tr"); // get the current table row (tr)
                // get the data bound to the current table row
                var data = this.dataItem(tr);
                // Get the data for the list of sectors and write it into the popup window
                setSectorsList(data.login, data.lst_user_sec_ids);
    }
    }
    ],
    title: 'Actions',
    width: '225px',
    filterable: false
  }
  ]
  });

  }

Hello Team,

I would like to suggest a new string operator that would allow to filter rows by exact values specified on the  list. This could be either list of predefined check boxes (defined in grid data binding or configuration) or list of elements typed in by the user in textbox (i.e. Elements In List [ value1, value2, ... ]). Have you been thinking of such enhancement? This could be helpful for data columns with a few values like statuses or types. Is there a chance to have such feature soon?

Thanks and best regards

Jacek Kłobut

Hello,

Is there an example of a masked textbox inside the kendo form?

Thank you,

Jeff

     Hello, 
I have created a multiselect that has default values (coming from the server) in an array that I then add to the kendoMultiSelect object as follows: 

$("#subscriptionsWindow").kendoMultiSelect({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: multiData,
                    filter: "contains",
                    value: defaults //defaults here is an array of default items
                });

I want to prohibit the user from deselecting these values, as they are enforced by the admin but must be shown in the drop down list.

I tried the read only option and that didn't work... 

Thanks

Hi All,

Can you please help me with following.

We are using a Signature control, that internally uses flashcanvas and jSignature .when attempting to add signature , it is  Prompted for Flash Player and unable to add Signature.

Adobe stop supporting flash player(check the below URL) recently

https://www.adobe.com/in/products/flashplayer/end-of-life.html

how to resolve this error, please help me.

Thanks,

Tram

Hello support,

We are looking for documentation about this demo:

https://demos.telerik.com/kendo-ui/m/index?&_ga=2.87831967.627147470.1612949974-420973595.1604377799#mobile-listview/hierarchical-databinding

And more specific about how to use: hierarchical-listview.

Please let us know if any questions.

Kind regards,

Roel Alblas

I have an application where the order of siblings under a node in the tree list is important and I would like to build upon the the demo at https://demos.telerik.com/kendo-ui/treelist/dragdrop whereby if I drag a node up or down within a branch, I can persist its order. 

In this example, if I drag Rinah above Akim in the list beneath Hyacinth, I would like to persist that order.  

I have been doing this fairly crudely by assigning an order field to each node - but figure there must be a better way.  Any suggestions?  

Hi

I am having two issues with Kendo Tab Strip(AnguarJS) as followings:

1) Default HTML tag 'li' is showing before Kendo Tab strip is applied

- Default HTML tag 'li' is showing for 1 second(see the screenshot '1') and then Kendo Tab strip is applied

- I tried to use ng-cloak and also k-ng-delay, it is still showing default HTML tag

- I do not want to show default HTML tag, I want to display Kendo Tab Strip once it is fully initialized

- *I am using ng-repeat for dynamic tab, not data-bound. I prefer to use ng-repeat as each tab contents are quiet large

2) After add a new tab(by some button), UI for a new tab is broken

- As I mentioned above, I am using ng-repeat and add a new object to existing array to add a new tab.

- I guess this would be a bug, it would be great if you can provide the example with ng-repeat scenario

Kind regards

Minchul

My requirement is to have multi select dropdown and foreign key in the kendo grid. It's working fine when i update records one at time, but if i want to do it with batch update, how can i do that? 

   @(Html.Kendo().Grid<Rostering.Models.ViewModels.RosterShiftAllocationViewModel>()
                .Name("rgAllocation")
                //.Events(e => e.Change("rgAllocation_Save"))
                .Editable(editable => editable.Mode(GridEditMode.Incell))
                .ToolBar(toolbar =>
                {
                    toolbar.Save().HtmlAttributes(new { @class = "no-print" });
                })
                .Columns(c =>
                {
                    c.Bound(e => e.Id).Visible(false);
                    c.Bound(e => e.StartEndDetail).Title("Start and End").EditorTemplateName("").HtmlAttributes(new { @class = "cellBorder", @style= "color: red" });
                    c.Bound(e => e.RollNumber).Title("Payroll Number").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.StaffMember).Title("Staff Member").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.Grade).Title("Grade").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.ShiftBeds).ClientTemplate("#=bedsTemplate(RosterShiftBeds)#").Title("Allocation").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.AllocationComments).Title("Comments").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.ShiftType).Title("Shift Type").HtmlAttributes(new { @class = "cellBorder" });
                    c.ForeignKey(p => p.AllocationSpecialId, (System.Collections.IEnumerable)ViewData["AllocationSpecial"], "AllocationAlertTypeId", "Description")
                        .EditorTemplateName("AllocationSpecialEditor")
                        .ClientTemplate("#=AllocationSpecialDescription#")
                        .Title("Special")
                        .HtmlAttributes(new { @class = "cellBorder" });
                     c.Command(command => { command.Edit(); }).Width(100).HtmlAttributes(new { @class = "no-print"});
                })
                .Events(events => events.Save("on_rgAllocation_Save"))
                .DataSource(d =>
                    d.Ajax()
                    .Batch(true)
                    .Model(model =>
                    {
                        model.Id(e => e.Id);
                        model.Field(e => e.ShiftStartEndDetail).Editable(false);
                        model.Field(e => e.RollNumber).Editable(false);
                        model.Field(e => e.StaffMember).Editable(false);
                        model.Field(e => e.Grade).Editable(false);
                        model.Field(e => e.ShiftType).Editable(false);
                        model.Field(e => e.ShiftBeds).DefaultValue(new List<ShiftBedViewModel>());
                    })
                    .Read(r => r.Action("GetShiftDetailByDateId", "Home").Data("getAllocationParams"))
                    .Update(update => update.Action("UpdateShiftAllocationDetails", "Home"))
                   )
                )

  function on_rgAllocation_Save(e) {
            console.log("i m called _ on rg Allocation");
            if (!e.model.AllocationSpecialId) {
                //change the model value
                e.model.AllocationSpecialId = 0;
                //get the currently selected value from the DDL
                var currentlySelectedValue = $(e.container.find('[data-role=dropdownlist]')[0]).data().kendoDropDownList.value();
                //set the value to the model
                e.model.set('AllocationSpecialId', currentlySelectedValue);
                if (e.model.RosterShiftBeds.count > 0) {
                    $.each();
                }
            }
        }

and this is my multiselect  editor template

@model IEnumerable<Rostering.Models.ViewModels.ShiftBedViewModel>
@(
    Html.Kendo().MultiSelectFor(m => m)
        .DataTextField("BedName")
        .DataValueField("BedId")
        .Placeholder("Select")
        .DataSource(d => d.Read(r => r.Action("OrgUnitBeds", "List").Data("getUnit")))
)