TUniDBTreeGrid Multiselect

[EOR]

Здравствуйте.

Возникла необходимость воспользоваться компонентом TUniDBTreeGrid. Пользователь должен выделить мышкой несколько строк в UniDBTreeGrid и скопировать их в буфер обмена для последующей вставки в MS World, MS Excel или куда то еще.

Я прочитал по интересующему вопросу топики (темы) 

 и 

Сделал как там советовали и все заработало, но не так как ожидалось. То есть я получаю в буфер обмена нужные данные, но пользователь не видит, какие строки он выделил в UniDBTreeGrid. То есть нет визуального отображения выделенных строк.

Это понятно так как включена опция UniDBTreeGrid.Options -> dgDontShowSelected=True

Попробовал подкрашивать выделенные строки с помощью CustomCSS как описано здесь: 

 Но тоже ничего не вышло. Стиль "custom-row" вроде бы применяется (видно в отладчике Chrome), но изменения не отображаются в браузере.

Подскажите пожалуйста как мне решить эту проблему с отображением выделенных (selected) строк в компоненте UniDBTreeGrid.

Заранее спасибо.

[Sherzod]

2 hours ago, EOR said:

Подскажите пожалуйста как мне решить эту проблему с отображением выделенных (selected) строк в компоненте UniDBTreeGrid.

Здравствуйте,

Вы можете прикрепить простой тестовый случай, то что сделано на данный момент?!

[EOR]

22 hours ago, Sherzod said:

Здравствуйте,

Вы можете прикрепить простой тестовый случай, то что сделано на данный момент?!

Хорошо. Завтра подготовлю приложение демонстрирующее проблему и описание того, что уже сделано.

[Sherzod]

Ок

[EOR]

Здравствуйте,

Подготовил приложение, демонстрирующее проблему. Версия UniGUI 1509.

Описание того, что уже сделано :

1. UniDBTreeGrid1: ClientEvents -> UniEvents -> beforeInit

config.selModel = {
        type: 'checkboxmodel',
        mode: 'MULTI'
    };

2. UniDBTreeGrid1.Options -> dgDontShowSelected=True (Если этого не сделать, то при получении данных в UniDBTreeGrid1 получим ошибку:  Could not set cell position: row: [0], column:[1] :Cannot read property 'store' of undefined.)

3. Выделенные строки для передачи в буфер обмена. В версии 1506 не нормально работало. Выделенные строки выделялись и сразу выделение снималось и визуально выделенных строк не было видно так как галочка с checkbox'а тоже снималась. После обновления до версии 1509 эта проблема ушла. Выделение остается постоянным и не снимается галочка с checkbox'а.

По CTRL+C содержимое ячеек копируется в буфер обмена:

Обработчики  UniDBTreeGrid1: ClientEvents -> ExtEvents -> select/deselect формируются динамически.

4. Пытаюсь изменить стиль выделенных ячеек через UniServerModule.CustomCSS:

/* DBTreeGrid Selected row*/
.custom-row .x-grid-cell {
   background-color: #B299CC !important;
}
.custom-row .x-grid-cell-selected  {
   background-color: greenyellow !important;
}

Стили назначаются строкам динамически в событиях UniDBTreeGrid1: ClientEvents -> ExtEvents -> select/deselect

Но стиль CSS не  применяется к выделенным строкам  

5. В связи с этим вопрос несколько меняется. Как теперь мне изменить цвет выделенных ячеек на кастомный? Что-нибудь типа например такого:

 

Заранее спасибо.

 

DBTreeGrid_Multiselect.zip

[Sherzod]

Ок, я попробую проанализировать. 

[Sherzod]

14 hours ago, EOR said:

5. В связи с этим вопрос несколько меняется. Как теперь мне изменить цвет выделенных ячеек на кастомный?

Изменить цвет выделенной ячейки или выделенных ячеек? Или Вы имеете в виду цвет выделенных строк?

[EOR]

Да. Я имею ввиду изменение стиля (цвета фона/шрифта) нескольких выделенных (selected) строк в компоненте UniDBTreeGrid1:

[Sherzod]

1 hour ago, EOR said:

Да. Я имею ввиду изменение стиля (цвета фона/шрифта) нескольких выделенных (selected) строк в компоненте UniDBTreeGrid1:

К примеру:

1.

      //'  grid.getView().el.select("tr.custom-row").removeCls("custom-row");' +
      //'  var record = Ext.get(grid.getView().id + "-record" + record.id);' +
//      '  record = Ext.get(grid.getView().id + "-record" + record.id);' +
      //'  if (record) {' +
      //'      record.addCls("custom-row");' +
//      '      record.set("Checked", true);' +

2. CustomCSS:

/* DBTreeGrid Selected row*/
.custom-row .x-grid-item-selected {
   background-color: #B299CC;
   color: white;
   font-family: Arial Narrow, sans-serif;
   font-style: italic;
   font-weight: bold;
   font-size: 14px;
}

3. UniDBTreeGrid1.LayoutConfig.Cls = custom-row

[EOR]

Работает если перед "=" поставить пробел.

Main.dfm

object UniDBTreeGrid1: TUniDBTreeGrid
	...
	LayoutConfig.Cls = ' = custom-row'
	...

Большое спасибо.

И чтобы не плодить темы еще вопрос: Следующий код в моем тестовом приложении (исходники прикладывал) не работает в FireFox.
Ошибка: document.execCommand('cut/' copy) было отклонено, поскольку оно не вызывалось из короткого запуска обработчика событий, созданного пользователем

procedure TMainForm.UniFormKeyUp(Sender: TObject; var Key: Word;
  Shift: TShiftState);
begin
  // Ctrl+C
  if (Key = 67 {'C'}) and (ssCtrl in Shift) then begin
    UniSession.AddJS(
      // Не работает в FireFox
      // Ошибка: document.execCommand('cut/' copy) было отклонено, поскольку оно не вызывалось из короткого запуска обработчика событий, созданного пользователем
      //Почему?
      ' var focus = document.activeElement;' +
      ' var textarea = document.getElementById("' + UniMemo1.JSName + '_id-inputEl"); '+
      ' textarea.select(); '+
      ' try { '+
      ' var successful = document.execCommand(''copy''); '+
      ' if(successful) console.log(''Copied!''); '+
      ' else console.log(''Unable to copy!''); '+
      ' } catch (err) { '+
      ' console.log(''Unsupported Browser!''); '+
      ' } ' +
      ' focus.focus(); // Возвращаем фокус туда, где был'
    );
  end;
end;

Почему?

 

[Sherzod]

2 hours ago, EOR said:

Работает если перед "=" поставить пробел.

Main.dfm

object UniDBTreeGrid1: TUniDBTreeGrid
	...
	LayoutConfig.Cls = ' = custom-row'
	...

Не понятно, Вы делаете изменения в dfm файле? 

[Sherzod]

3 hours ago, EOR said:

// Не работает в FireFox // Ошибка: document.execCommand('cut/' copy) было отклонено, поскольку оно не вызывалось из короткого запуска обработчика событий, созданного пользователем //Почему?

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

[EOR]

On 11/22/2019 at 7:45 PM, Sherzod said:

Не понятно, Вы делаете изменения в dfm файле? 

Нет конечно это я для наглядности привел. Я делаю так:

За ссылку спасибо. Посмотрим.

[Sherzod]

1 hour ago, EOR said:

Нет конечно это я для наглядности привел. Я делаю так:

 

On 11/22/2019 at 2:01 PM, Sherzod said:

3. UniDBTreeGrid1.LayoutConfig.Cls = custom-row

Без знака равенства "=", просто 

custom-row