Search code examples
asp.net-mvctelerikkendo-grid

Defining a kendo grid by it's model


For the functionality I want to add I'm using a couple of different grids on the same page. All these grids should be able to affect what code is executed by the buttons 'delete', 'edit' and 'create'.

In order to seperate the grids I could use their name, but this is rather problematic with the subgrids. The code I'm currently using is as follows:

function deleteButton()
   switch(selectedGrid) {
      case $("#GridA").data("kendoGrid"):
         log("A"); break;
      case $("#GridB").data("kendoGrid"):
         log("B"); break;
   }

selectedGrid has a grid stored that should determine which function to execute. From this grid I would prefer to extract the model (name) and use that as the switchcase variable. The result would look something like this:

function deleteButton()
  switch(selectedGrid.Model) {
      case 'modelA':
         log("A"); break;
      case 'modelB':
         log("B"); break;
   }

Currently I use logs instead of functions, but the idea is the same. The reason I chose this approach is because multiple grids are using the same model and should call the same case.

Code in the kendo grid for calling the function to set the selectedGrid variable:

.Event(event => event.Change("function(){onRowSelectGrid('grid', 'model');}"))

Code in page js for setting the selectedGrid variable:

function onRowSelectGrid(datagrid, model) {
   if (typeof (selectedGrid) !== 'undefined' && selectedGrid !== $("#" + datagrid).data("kendoGrid")) {
      //Remove rowselection from the previous grid
      selectedGrid.select().removeClass("k-state-selected");
   }
   var grid = $("#" + datagrid).data("kendoGrid");
   selectedGrid = grid;
}

I understand that this is not your every day situation, so if the only solution would be to have seperate buttons for every grid, I would understand that. However, personally I would prefer to have dynamic code that can be used by all grids.

If there are any questions or more explanation is needed, please let me know. If there is a way to do this where the name (including the name of the subgrids) is somehow used, I would definitely want to take a look at such solution.


Solution

  • Oke so this may not be the best solution, but it works. What I did was add a bit to the code saving the selectedgrid.

    selectedGrid = grid;
    

    By adding a "model" to the variable to indicate the model of the grid:

    selectedGrid.model= model;
    

    This way, when calling the grid from the button, I can call the model variable to indicate what method should be used.

    function deleteButton()
      switch(selectedGrid.model) {
          case 'modelA':
             log("A"); break;
          case 'modelB':
             log("B"); break;
       }
    

    Hope this helps anybody running into the same issue.