ToolBar template - show popup editor

3 posts, 0 answers
  1. Tom
    Tom avatar
    4 posts
    Member since:
    Jul 2016

    Posted 12 Jul Link to this post

    Hi guy's,

     I've been doing my best to find a solution on the forum and google but can't find what I'm looking for.

    I have a grid which uses a toolBar template for the "add" button.

    @(Html.Kendo().Grid(Model.WorkingDays)
          .Name("WorkEffortRecordsGrid")
          .DataSource(ds =>
              ds.Ajax()
                  .Read(read => read.Action("GetWorkingDay", "WorkRecordEffort").Data("getTimezoneOffset"))
                  .Create(create => create.Action("SaveWorkRecordEffort", "WorkRecordEffort").Data("getTimezoneOffset"))
                  .Update(update => update.Action("UpdateWorkRecordEffort", "WorkRecordEffort").Data("getTimezoneOffset"))
                  .Group(groups => groups.Add(p => p.Activity.Name))
                  .Model(model => model.Id(viewModel => viewModel.Id))
          )
          .Columns(columns =>
          {
              columns.Bound(viewmodel => viewmodel.WorkRecord.Name).Title(Strings.WorkRecordId).ClientTemplate("#= (typeof WorkRecord === 'undefined')? '' : WorkRecord == null ? '' : WorkRecord.Name #");
              columns.Bound(viewmodel => viewmodel.Summary);
              columns.Bound(viewModel => viewModel.Task.Name).Title(Strings.TimeTaskName).ClientTemplate("#= (typeof Task === 'undefined')? '' : Task == null ? '' : Task.Name #");
              columns.Bound(viewModel => viewModel.StartTime).ClientTemplate("#= StartTime == null ? '' : kendo.toString(StartTime, \"t\") #");
              columns.Bound(viewModel => viewModel.EndTime).ClientTemplate("#= EndTime == null ? '' : kendo.toString(EndTime, \"t\") #");
              columns.Bound(viewModel => viewModel.Duration);
              columns.Command(commands =>
              {
                  commands.Edit().UpdateText(Strings.Save);
              });
          })
          .AutoBind(true)
          .ToolBar(toolBar =>
          {
              //toolBar.Create().Text("default add").HtmlAttributes(new { onclick = "Ps.onCreate()" });
              toolBar.Template("<a class='k-button k-button-icontext' onclick='Ps.onCreate()' href='#'></span>Create</a>");
          })
          .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Width(610)).TemplateName("WorkRecordEffortEditor"))
          .Filterable()
          .Events(events => events.Edit("Ps.onEdit").DataBound("Ps.onDataBound"))
    )

     

    with a javascript function which has to do some business logic through ajax calls

    /**
    * When Add is clicked
    */
    export function onCreate() {
        // clear the error message if it exists
        $('#errorMessages').html("");
     
        // do ajax call to the server to check if all existing records have end times
        $.ajax({
            type: 'POST',
            url: Urls.checkEndTimes,
            dataType: "JSON",
            success: allHaveEndTimes => {
                // if all records have end times
                if (allHaveEndTimes) {
                    // show the editor box
                    alert("here - true - show the editor box");
                } else {
                    // show the error message
                    $.ajax({
                        type: 'POST',
                        url: Urls.showErrorMessage,
                        contentType: 'application/json',
                        dataType: "html",
                        success: response => {
                            $('#errorMessages').html(response);
                        }
                    });
                }
            },
            error: function () {
                alert("somethings gone wrong... this is not good...");
            }
        });
    }

     

    I haven't figured out how to make the editor display when the response comes back as true ("allHaveEndTimes")

    Anybody have any ideas?

     

    Thanks

    Tom

  2. Tom
    Tom avatar
    4 posts
    Member since:
    Jul 2016

    Posted 12 Jul in reply to Tom Link to this post

    Just to point out, if i add the event to the Create() function i can have the editor, but i can't stop it appearing on the false section.

    .ToolBar(toolBar =>
    {
        //toolBar.Create().Text("default add").HtmlAttributes(new { onclick = "Ps.onCreate()" });
        toolBar.Template("<a class='k-button k-button-icontext' onclick='Ps.onCreate()' href='#'></span>Create</a>");
    })

     

    I'm at a real loss now!

     

    Tom

  3. Tom
    Tom avatar
    4 posts
    Member since:
    Jul 2016

    Posted 13 Jul in reply to Tom Link to this post

    should anybody come across this issue below is my final solution (thanks to a support ticket!)

    .ToolBar(toolBar =>
    {
        toolBar.Template("<a class='k-button k-button-icontext' onclick='Ps.onCreate()' href='#'></span>" + Strings.AddWorkRecordEffort + "</a>");
    })

     

    and the javascript

    /**
    * When Add is clicked
    */
    export function onCreate() {
        // hide the error message
        $('#errorMessages').hide();
     
        // do ajax call to the server to check if all existing records have end times
        $.ajax({
            type: 'POST',
            url: Urls.checkEndTimes,
            dataType: "JSON",
            success: returnedDate => {
                // if all records have end times
                if (returnedDate === "") {
                    // show the editor box
                    var grid = $('#WorkEffortRecordsGrid').data("kendoGrid");
                    grid.addRow();
                } else {
                    $('#recordDate').html(returnedDate);
                    $('#errorMessages').show();
                }
            }
        });
    }

     

    the part i didn't understand was grid.addRow(); will call the popup box when the editor is set to GridEditMode.PopUp

    I hope this helps someone in the future.

    Tom

Back to Top