ToolBar template - show popup editor

[Tom]

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

[Tom]

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

[Tom]

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