Change a column editor based upon another column

4 posts, 0 answers
  1. Stefan
    Stefan avatar
    20 posts
    Member since:
    Nov 2010

    Posted 15 Jun 2018 Link to this post

    Hi,

    I'm experimenting with the following grid and want to know if its possible to change the editor assosiated with the UserInputString column when the Field column value changes.

     

    That is the Field column consists of a drop down list for example containing "Job Number", "Client", "Product" and other items. When the user selects, for example, Job Number the UserInputString editor is to be a TextBox. If Product is selected, the input will be a product auto complete text box, if 'Is Invoiced' is selected it will be a check box etc.

     

    Is this possbile?

     

     

     @(Html.Kendo().Grid<S3Web.Models.AdvancedSearchModel>()
            .Name("grid")
            .Columns(columns =>
            {
              columns.Bound(p => p.AndOrString);
              columns.Bound(p => p.StartBracketString);
              columns.Bound(p => p.Field).Width(180);
              columns.Bound(p => p.OperatorString);
              columns.Bound(p => p.UserInputString);
              columns.Bound(p => p.EndBrackerString);
              columns.Command(command => command.Destroy()).Width(150);
            })
              .ToolBar(toolBar =>
              {
                toolBar.Create();
                toolBar.Save();
              })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .PageSize(20)
                .Read(read => read.Action("AdvancedSearch_Read", "Jobs"))
                .Create(create => create.Action("AdvancedSearch_Create", "Jobs"))
                .Update(update => update.Action("AdvancedSearch_Update", "Jobs"))
                .Model(model =>
                {
                  model.Id(p => p.Field);
                })
            )
      )

     

  2. Preslav
    Admin
    Preslav avatar
    583 posts

    Posted 19 Jun 2018 Link to this post

    Hi Stefan,

    I believe the desired behavior is achievable by implementing some JavaScript. For example, what I could suggest is handling the edit event. In the event handler, based on the column field and the e.model, append a regular HTML input with the k-textbox class or checkbox. Focus this input(to prevent the closing of the cell), and remove the previous editor input. After that, use the kendo.bind method to bind the new input to the model.

    For example, I used the "Grid / ForeignKey column" as a base:
    Now, the code looks like:
     
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
                .Title("Category").Width(200);
            columns.Bound(p => p.UnitPrice).Width(200);
            columns.Command(command => command.Destroy()).Width(150);
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Filterable()
        .Groupable()
        .Pageable()
        .Scrollable()
        .Events(e=>e.Edit("onEdit"))
        .HtmlAttributes(new { style = "height:540px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
            .Events(events => events.Error("errorHandler"))
            .Model(model =>
            {
                model.Id(p => p.ProductID);
                model.Field(p => p.ProductID).Editable(false);
                model.Field(p => p.CategoryID).DefaultValue(1);
            })
            .Read(read => read.Action("ForeignKeyColumn_Read", "Grid"))
            .Update(update => update.Action("ForeignKeyColumn_Update", "Grid"))
            .Create(create => create.Action("ForeignKeyColumn_Create", "Grid"))
            .Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Grid"))
        )
    )
      
    <script type="text/javascript">
        function errorHandler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function() {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }
        function onEdit(e) {
            var field = e.sender.columns[e.container.index()].field;
      
            if (field === "CategoryID") {
                if (e.model.ProductName === "Chai") {
                    var input = $("<input data-val='true' autocomplete='off' name='CategoryID' id='CategoryID' data-bind='value: CategoryID' class='k-textbox' />");
      
                    e.container.append(input);
                    input.focus();
      
                    $("span.k-widget.k-dropdown").remove();
                    kendo.bind(e.container, e.model);
                }
            }
        };
    </script>

    I hope this helps.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Stefan
    Stefan avatar
    20 posts
    Member since:
    Nov 2010

    Posted 21 Jun 2018 Link to this post

    Hi,

    Thanks for that, seems to mostly work. The only thing I changed was the part where it removes the old input editor. See below. I still need more testing, especially with the auto complete part, but so far so good :-)

     

       function onEdit(e) {
          var field = e.sender.columns[e.container.index()].field;

          if (field === "UserInputString") {
            var input = "";
            if (e.model.Field === "Job Number") {
              input = $("<input data-val='true' autocomplete='off' name='UserInputString' id='UserInputString' data-bind='value:UserInputString' class='k-textbox' />");
            } else {
              input = $("<input type='checkbox' name='UserInputString' id='UserInputString' data-bind='checked:UserInputString' />");
            }

            var temp = $("#UserInputString");
            e.container.append(input);
            input.focus();

            temp.remove();
            kendo.bind(e.container, e.model);

          }

  4. Preslav
    Admin
    Preslav avatar
    583 posts

    Posted 21 Jun 2018 Link to this post

    Hi Stefan,

    I am glad to hear that my suggestion helped. Do not hesitate to write back if I can assist with any further information.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top